对于网络请求ajax理解

先对原生Ajax进行理解：

Ajax=异步JS和XML，用于创建快速动态网页的技术

可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理

对于Ajax的使用和实现---很重要

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.

var xmlHttp;
if(window.XMLHttpRequest){  //针对除IE6以外的浏览器
    xmlHttp = new XMLHttpRequest(); //实例化一个XMLHttpRequest
}else{
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   //针对IE5,IE6
}

(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式

如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader() 来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

提示：POST请求的特点如下：
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求

(3)设置响应HTTP请求状态变化的函数.

xmlHttp.onreadystatechange()=>{
	if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
	// 你需要执行的事件
    }
}

响应状态码----常见
200: “OK”
· 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
· 403 （禁止） 服务器拒绝请求。
· 404 （未找到） 服务器找不到请求的网页。
· 408 （请求超时） 服务器等候请求时发生超时。
·500 （服务器内部错误） 服务器遇到错误，无法完成请求。

xmlHttp.send(); //使用open()方法将请求发送出去

(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新

所以一个完整的ajax请求调用代码如下

<script>
    //step1.创建XMLHTTPRequest对象,对于低版本的IE，需要换一个ActiveXObject对象
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //>>step2.使用open方法设置和服务器的交互信息:
    //设置请求的url参数,参数一是请求的类型,参数二是请求的url,参数三指定是否使用异步，默认是true
    xhr.open("post", "", true);
    //post请求一定要添加请求头才行不然会报错
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    //>>step3.发送请求 GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
    xhr.send();

    //>>step4.注册事件 onreadystatechange 状态改变就会调用
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) { // 成功完成
            // 判断响应结果:
            if (xhr.status === 200) {
                // 成功，通过responseText拿到响应的文本:
                console.log(xhr.responseText);
            } else {
                // 失败，根据响应码判断失败原因:
                console.log(xhr.status);
            }
        } else {
            // HTTP请求还在继续...
        }
    }
</script>

参考资料：

ajax是什么？及其实现步骤和原理