快捷導(dǎo)航

Ajax基礎(chǔ)教程之封裝(三)

更新時(shí)間：2016年06月22日 14:39:30 作者：沫晴的前端世界

這篇文章給大家介紹ajax基礎(chǔ)教程之封裝的知識(shí)，本文通過實(shí)例給大家詳細(xì)介紹，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧

在上篇文章給大家介紹了Ajax基礎(chǔ)詳解教程(一) Ajax基礎(chǔ)詳解教程(二)

今天接著我們上篇博文的栗子，現(xiàn)在我來擴(kuò)大一下需求，之前是點(diǎn)擊按鈕取出新聞，現(xiàn)在要實(shí)現(xiàn)每隔一段事件進(jìn)行新聞的更新。這個(gè)時(shí)候，肯定是加一個(gè)定時(shí)器，然后每隔一段事件，再進(jìn)行一次Ajax請(qǐng)求，既然要經(jīng)常用到Ajax請(qǐng)求，封裝函數(shù)就很必要了，先來看一下上個(gè)栗子的js代碼，我們來進(jìn)行封裝。

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 ) { //紅色標(biāo)識(shí)為成功后執(zhí)行的任務(wù)
var data = JSON.parse( xhr.responseText ); // 將后臺(tái)獲取的內(nèi)容轉(zhuǎn)為json類型 每一個(gè)json里面有兩個(gè)鍵：title和date
var oUl = document.getElementById('ul1'); // 獲取顯示新聞列表的節(jié)點(diǎn)
var html = '';
for (var i=0; i<data.length; i++) { // 循環(huán)所有的json數(shù)據(jù)，并把每一條添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把內(nèi)容放在頁面里
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
}
}
}
</script>

封裝函數(shù)的要點(diǎn)就是把重復(fù)使用的部分提取取來，同時(shí)一些變化的東西作為參數(shù)，無法作為參數(shù)的進(jìn)行判斷處理。

1 所以我們先看看變化的東西都有哪些：1 請(qǐng)求方式是get/post 2 請(qǐng)求的地址 3 請(qǐng)求的數(shù)據(jù) 4 請(qǐng)求成功后需要做的事情

所以這四個(gè)就做為函數(shù)的參數(shù)：ajax(method,url,data,success);

2 因?yàn)椴煌恼?qǐng)求方式，我們傳數(shù)據(jù)的方式不一樣，所以對(duì)于這些，需要進(jìn)行條件判斷。

3 還有一個(gè)問題就是關(guān)于 xhr.responseText ，變量xhr是在封裝函數(shù)中聲明的，所以這個(gè)東西屬于ajax函數(shù)的，我們?cè)趕uccess函數(shù)中是用不到的，但是success這個(gè)函數(shù)里面需要用這個(gè)數(shù)據(jù)。所以辦法就是在封裝函數(shù)中調(diào)用success函數(shù)的時(shí)候，把xhr.responseText當(dāng)作參數(shù)傳出去。success(xhr.responseText)。

其實(shí)這是一種回調(diào),回調(diào)就是一個(gè)函數(shù)作為另一個(gè)函數(shù)的參數(shù)，并在另一個(gè)函數(shù)里面被調(diào)用，這個(gè)栗子就是success作為ajax函數(shù)的參數(shù)，并在ajax里面被調(diào)用。（其實(shí)個(gè)人感覺就是函數(shù)在用參數(shù)，函數(shù)的參數(shù)，就是拿來用的，只是現(xiàn)在參數(shù)是函數(shù)，所以就調(diào)用唄）。

所以封裝后就是這樣：

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); //如果函數(shù)存在就執(zhí)行后面的 &&的執(zhí)行過程就是前面的是真，才執(zhí)行后面的。
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
}
}

調(diào)用就是這樣

ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data ); 
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});

其實(shí)這個(gè)封裝，還不是那么好，比如上面的data沒有數(shù)據(jù)，我們還是得占位，像jquery里面用json格式傳參，就方便一些，目前還未總結(jié)好，后期補(bǔ)充。

您可能感興趣的文章: