封装ajax

什么是ajax

此概念截取于w3school

封装ajax

var ajax = {
    get : function(url,callback){
// 首先需要创建XMLHttpRequest对象,这里要考虑到兼容性的问题，ie老版本需要使用ActiveXObject对象
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcorosoft.XMLHTTP');
// 使用open方法规定请求类型
        xhr.open('GET',url,true);
// 使用send方法向服务器发送请求
        xhr.send();
// 添加状态改变事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof callback === 'function'){
                    callback(xhr.responseText)
                }
            }
        }
    },
    post : function(url,data,callback){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcrosoft.XMLHTTP');
        xhr.open('POST',url,true);
// post请求需要设置请求头
        xhr.setRequestHeader('content-type','Application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(data);
        xhr.onreadystatechange = function(url,data,callback){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof callback === 'function'){
                    callback(xhr.responseText);
                }
            }
        }
    }
}

xhr.open()方法的参数，分别为请求方式，url地址，是否异步。

接下来我们测试get请求,这里使用json-server进行模拟

var getUsers = function(res){
    console.log('get请求返回：' + res);
}
var url = 'http://localhost:3000/user';
ajax.get(url,getUsers);

get请求成功，接下来测试post请求

var addData = {
    "name": "WangWu",
    "age": 12,
    "score": 100
};
//这里测试，发送json格式数据，模拟后端接收到的数据格式不正确，所以先改为formData格式
function jsonToString(json){
    var dataArr = [];
    for (var key in json) {
        dataArr.push(key + "=" + json[key])
    }
    return dataArr.join("&")
}
ajax.post(url,JSON.stringify(addData),addUsers);

请求成功，返回值正确。

重新设置post请求的请求头。

var ajax = {
    get : function(url,callback){
// 首先需要创建XMLHttpRequest对象,这里要考虑到兼容性的问题，ie老版本需要使用ActiveXObject对象
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcorosoft.XMLHTTP');
// 使用open方法规定请求类型
        xhr.open('GET',url,true);
// 使用send方法向服务器发送请求
        xhr.send();
// 添加状态改变事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof callback === 'function'){
                    callback(xhr.responseText)
                }
            }
        }
    },
    post : function(url,data,callback){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcrosoft.XMLHTTP');
        xhr.open('POST',url,true);
// post请求需要设置请求头
        xhr.setRequestHeader('content-type','Application/json;charset=utf-8');
        xhr.send(data);
        xhr.onreadystatechange = function(url,data,callback){
            if(xhr.readyState === 4 && xhr.status === 200){
                if(typeof callback === 'function'){
                    callback(xhr.responseText);
                }
            }
        }
    }
}

这里再进行一次post测试，请求成功

ajax.post(url,JSON.stringify(addData),addUsers);

在测试过程中，感觉自己对请求时的数据格式还需要再钻研一下。