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格式传参，就方便一些，目前还未总结好，后期补充。