Ajax基礎之封裝3

今天接著我們上篇博文的栗子，現在我來擴大一下需求，之前是點選按鈕取出新聞，現在要實現每隔一段事件進行新聞的更新。這個時候，肯定是加乙個定時器，然後每隔一段事件，再進行一次ajax請求，既然要經常用到ajax請求，封裝函式就很必要了，先來看一下上個栗子的js**，我們來進行封裝。

window.onload =function() 
else
xhr.open(
'get
','getnews.php
',true
); xhr.send();
xhr.onreadystatechange =function() 
oul.innerhtml = html; //把內容放在頁面裡
} else}}
}}

封裝函式的要點就是把重複使用的部分提取取來，同時一些變化的東西作為引數，無法作為引數的進行判斷處理。

所以這四個就做為函式的引數：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) 
catch
(e) 
if (method == 'get' &&data) 
xhr.open(method,url,
true
); 
if (method == 'get') 
else
xhr.onreadystatechange = function
() 
else}}
}

呼叫就是這樣

ajax('get','getnews.php','',function
(data) 
oul.innerhtml =html;
});

其實這個封裝，還不是那麼好，比如上面的data沒有資料，我們還是得佔位，像jquery裡面用json格式傳參，就方便一些，目前還未總結好，後期補充。

Ajax基礎之封裝3

Js之AJAX簡易封裝

js之ajax的封裝

ajax基本封裝

Ajax基礎之封裝3

Js之AJAX簡易封裝

js之ajax的封裝

ajax基本封裝

相關推薦