原生js封装ajax

前两天闲着没事爬了下校园网的信息，实现了模拟登陆然后获取课表，考勤表，空教室的信息等，想着顺便结合前端也都实现一下。以前在请求接口数据时基本都利用了jquery ajax，方便嘛，这次我将原生拿出来溜溜，还是要知道原理的好。

先来说说什么是ajax

ajax是一种创建交互式网页应用的技术，通过在后台与服务器进行少量数据交换使网页异步更新。

ajax请求步骤

1.创建ajax的核心对象XMLHttpRequest

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        //兼容IE7+，firefox，chrome，opera，safari
    } else if (window.ActiveXObject) {  
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } else {  
        xmlhttp = null;  
        return;
    }  

2.向服务器发送请求

其中涉及到了两个方法open和send

xmlhttp.open（method，url，async）参数分别表示请求方法，请求路径，请求方式（异步/同步）

xmlhttp.send()这里表示发送数据

需要注意的是这里get和post的区别

在get请求中参数被携带在请求url的后边，这里的send方法传入参数为空。

在post请求中需要将参数变换为这类的字符串username=111&password=222

//处理参数
function formatParams(data) {
    var arr = [];
    for(var name in data){
        arr.push(name + '=' + data[name]);
    }
    return arr.join("&");
}

然后这是请求头

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

是为了将参数转换为Form Data对象传递到后端

3.服务器处理

responseText 获得字符串形式的响应数据

responseXML 获得XML形式的响应数据

同步处理：例如

    xmlhttp.open("GET",...,false);
    xmlhttp.send();
    console.log(xmlhttp.responseText);

异步处理：例如

   xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            console.log(xmlhttp.responseText);
        }
    }

其中readyState表示请求步骤，status表示状态码

状态	步骤
0	请求未初始化
1	服务器建立连接
2	请求已接受
3	请求处理中
4	请求已完成

现在来配合后端说下哈哈

//这是封装ajax的代码
function baseAjax() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {  
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } else {  
        xmlhttp = null;  
        return;
    }  
    xmlhttp.open(arguments[0],arguments[1],true);
    var callback = arguments[3];
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(JSON.parse(xmlhttp.responseText));
        }
    }
    if (arguments[0] == 'GET') {
        xmlhttp.send();
    } else {
        var str = formatParams(arguments[2]);
        console.log(str);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }
}

//这是调用的GET实例
var model = {};
    baseAjax('GET','http://localhost:4000/vercode',model,function(data){
        console.log(data);
      });

//这是调用的POST实例
var model = {
            username : ,
            password : 
        };
        baseAjax('POST','http://localhost:4000/login',model,function(data){
        console.log(data);
      });

后端使用的是node+express，接受参数这样来处理req.body.username

顺便来提一下node接受参数的形式

请求路径	获取参数方法
…?username=111&password=222	req.query.username
…/:username/:password	req.params.username
post请求	req.body.username(借助body-parser)