原生Js封装Ajax

loadmore-ajax.PNG

• 这是一个点击加载更多的插件，点击more按钮，请求ajax，将依次加载3条数据
• html由一个ul和一个button组成

1. 首先，获取dom节点，分别获取列表和按钮

var more = document.getElementsByClassName("more")[0],                         // more按钮
    contents = document.getElementsByClassName("contents")[0];                // 列表

2. 监听more的点击事件，点击按钮则发送ajax获取数据，所以下面来封装ajax，发送ajax的步骤可以理解为：创建异步对象-连接服务器-发送请求-接受返回值

// 封装创建异步对象
function createXHR(){
    // 该对象用于在后台与服务器交换数据，IE7+及其他浏览器都支持
    var xhr = new XMLHttpRequest();
    try{
        xhr = new XMLHttpRequest();
    }catch (error){
        try{
            // 兼容老版本的IE5、IE6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (error){
            xhr = null;
        }
    }
    return xhr;
}

3. 下面创建一个名为ajax的函数，在这里面处理参数和发送请求

function ajax(opts){
  // opts参数即请求对象，包括的请求链接、请求方式及参数
  // 创建异步对象
  var xhr = createXHR();
}

4. 在发送ajax请求前，我们先需要处理下参数，也就是要告诉服务器从第几条开始返回数据和返回几条数据，在调用ajax函数时会给2个参数：start和num以键值对形式保存在参数的data属性中

// 处理参数，将参数转换成 key=value 的形式
var dataStr = "";
for(var key in opts.data){
    dataStr += key + "=" + opts.data[key] + "&";
}
// 去掉字符串末尾的&符号
dataStr = dataStr.substr(0,dataStr.length-1);

5. 处理好参数后，再判断发送ajax时使用的是get请求还是post请求，分别针对这2种请求方式：

// open()的参数分别表示：请求方式，请求地址
// true表示异步请求
if(opts.type.toLowerCase() == "get"){
    // get请求直接通过?将请求参数拼接在url后面即可
    xhr.open(opts.type,opts.url + "?" + dataStr,true);
    xhr.send();
}
if(opts.type.toLowerCase() == "post"){
    xhr.open(opts.type,opts.url,true)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // post请求直接将请求参数写在send方法里
    xhr.send(dataStr);

6. 确定好请求方式后，便会发送请求了，这时会触发一个onreadystatechange函数

xhr.onreadystatechange = function(){
    // xhr.readyState == 4  请求已完成（请求可能失败也可能成功）
    // xhr.status == 200  请求成功
    // xhr.status == 304  请求成功并且请求条件较上一次并没有改变
    if( xhr.readyState == 4 && ( xhr.status == 200 || xhr.status == 304 ) ){
        var json = JSON.parse(xhr.responseText)
        opts.success(json);
    }else if( xhr.readyState == 4 && xhr.status == 404 ){
        opts.error();
    }
}

7. 封装好ajax之后，就可以使用啦

// 监听按钮的点击事件
more.addEventListener('click',function(){
    // 计算出开始项，传给服务器告诉他从第几条开始
    var start = (contents.children).length + 1;
    // 调用ajax函数
    ajax({
        url: "./loadmore.php",
        type: "get",
        data: {
            start:start,
            num: 3
        },
        success: function(ret){
            // 获取到返回的数据后拼接dom
            contents.innerHTML += ret.msg;
        },
        error: function(){
            console.log('error');
        }
    })
})