在上篇文章給大家介紹了Ajax基礎詳解教程(一) Ajax基礎詳解教程(二)
今天接著我們上篇博文的栗子，現在我來擴大一下需求，之前是點擊按鈕取出新聞，現在要實現每隔一段事件進行新聞的更新。這個時候，肯定是加一個定時器，然后每隔一段事件，再進行一次Ajax請求，既然要經常用到Ajax請求，封裝函數就很必要了，先來看一下上個栗子的js代碼，我們來進行封裝。
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) { //紅色標識為成功后執行的任務
var data = JSON.parse( xhr.responseText ); // 將后臺獲取的內容轉為json類型 每一個json里面有兩個鍵：title和date
var oUl = document.getElementById('ul1'); // 獲取顯示新聞列表的節點
var html = '';
for (var i=0; idata.length; i++) { // 循環所有的json數據，并把每一條添加到列表中
html += 'li>a href="">'+data[i].title+'/a> [span>'+data[i].date+'/span>]/li>';
}
oUl.innerHTML = html; //把內容放在頁面里
} else {
alert('出錯了,Err：' + xhr.status);
}
}
}
}
}
/script>
封裝函數的要點就是把重復使用的部分提取取來，同時一些變化的東西作為參數，無法作為參數的進行判斷處理。
1 所以我們先看看變化的東西都有哪些：1 請求方式是get/post 2 請求的地址 3 請求的數據 4 請求成功后需要做的事情
所以這四個就做為函數的參數：ajax(method,url,data,success);
2 因為不同的請求方式，我們傳數據的方式不一樣，所以對于這些，需要進行條件判斷。
3 還有一個問題就是關于 xhr.responseText ，變量xhr是在封裝函數中聲明的，所以這個東西屬于ajax函數的，我們在success函數中是用不到的， 但是success這個函數里面需要用這個數據。所以辦法就是在封裝函數中調用success函數的時候，把xhr.responseText當作參數傳出去。success(xhr.responseText)。
其實這是一種回調,回調就是一個函數作為另一個函數的參數，并在另一個函數里面被調用，這個栗子就是success作為ajax函數的參數，并在ajax里面被調用。 （其實個人感覺就是函數在用參數，函數的參數，就是拿來用的，只是現在參數是函數，所以就調用唄）。
所以封裝后就是這樣：
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success success(xhr.responseText); //如果函數存在就執行后面的 的執行過程就是前面的是真，才執行后面的。
} else {
alert('出錯了,Err：' + xhr.status);
}
}
}
}
調用就是這樣
ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; idata.length; i++) {
html += 'li>a href="">'+data[i].title+'/a> [span>'+data[i].date+'/span>]/li>';
}
oUl.innerHTML = html;
});
其實這個封裝，還不是那么好，比如上面的data沒有數據，我們還是得占位，像jquery里面用json格式傳參，就方便一些，目前還未總結好，后期補充。
您可能感興趣的文章:- 一個AJAX自動完成功能的js封裝源碼[支持中文]
- 一個封裝的Ajax類
- JavaScript 封裝Ajax傳遞的數據代碼
- 自己動手封裝的 ajax
- ajax的工作原理以及異步請求的封裝介紹
- 對Jquery中的ajax再封裝,簡化操作示例
- 原生JS封裝Ajax插件(同域、jsonp跨域)
- jQuery Ajax 全局調用封裝實例代碼詳解
- Ajax基礎詳解教程(一)
- 原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
- Ajax基礎詳解教程(二)
