DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> Ajax基礎教程之封裝(三)
Ajax基礎教程之封裝(三)
編輯:AJAX基礎知識      日期:2016/12/24 15:06:05

在上篇文章給大家介紹了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; i<data.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; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
}); 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved