Ajax基礎之封裝3

          今天接着咱們上篇博文的栗子，如今我來擴大一下需求，以前是點擊按鈕取出新聞，如今要實現每隔一段事件進行新聞的更新。這個時候，確定是加一個定時器，而後每隔一段事件，再進行一次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格式傳參，就方便一些，目前還未總結好，後期補充。