Ajax基礎教程之封裝(三)_AJAX相關

在上篇文章給大家介紹了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和datevar 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格式傳參，就方便一些，目前還未總結好，後期補充。