实现原生Ajax的过程和代码

1 概述

Ajax是前端中发送请求最最基础的方法，在jq中已经封装好了，在axios中更是多次封装，那Ajax的实现原理到底是怎样的呢？
本博文就原生Ajax进行解析和代码展示，

2 Ajax

1. 创建XMLHttpRequest对象； 注意兼容
2. 注册回调函数，在XMLHttpRequest中设置要发送的请求，利用的是open（first,second,third）方法
   1）param first：提交的方式 get或者是post
   2）param second：该次请求的路径url，如果是get，则需要在路径后加上传递的相应参数parama，该url为servlet对应的url
   3）param third：提交的模式是同步模式还是异步模式 true代表异步模式
3. 发送请求给服务器，利用的是xmlHttp.send(null) ，加上null代表火狐和ie都支持
4. 利用xmlHttp的onreadystatechange的事件来监视xmlHttp.readyState的状态，每次改变时都调用函数(回调函数)
5. 在回调函数中处理返回值 利用dom模型写到页面的指定位置 实现局部刷新

var XHR=null;
var XHRcreate=function() {
    
    
    if (window.XMLHttpRequest) {
    
    
        //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
        XHR = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器的BUG进行修正
        if (XHR.overrideMimeType) {
    
    
            XHR.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
    
    
        //针对IE6，IE5.5，IE5
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
    
    
            try{
    
    
                //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
                XHR = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
    
    
            }
        }
    }
}
XHRcreate();
XHR.onreadystatechange = callback;
//XHR.open("GET","login_verify.jsp?name="+ userName,true);
//XHR.send(null);
XHR.open("POST","AJAXXMLServer",true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
XHR.send("name=" + userName);
function callback() {
    
    
    //判断对象的状态是交互完成
    if (XHR.readyState == 4) {
    
    
        //判断http的交互是否成功
        if (XHR.status == 200) {
    
    
            var responseText = XHR.responseText;
            //通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)
            var divNode = document.getElementById("result");
            divNode.innerHTML = responseText;
        } else {
    
    
            alert("error！");
        }
    }
}