JavaScript（三十五）原生Ajax请求

一、AJax概述

Ajax是一种快速创建动态网页的技术。通过后台与服务器进行少量数据交换，Ajax可使网页实现异步更新。即在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、区分同步与异步

同步：通俗理解代码必须按顺序执行，后面代码必须等待前面代码执行完成才能执行，即当客户端发送请求到服务器端，服务器返回响应之前，客户端都处于等待，卡死状态。

• 就是当你浏览页面的时候，你点击一个按钮或者链接，那么这个界面就会向服务器发送请求，此时你眼前的界面就是一片空白，直到请求的数据返回页面上才有东西显示。就是一个操作要等前一个做完才可以开始。

异步：前后代码同时执行，后面代码不需等待前面代码执行完成，即客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可随意做其他事情不会被卡死。

• 比如一个注册页面，你填写名字，密码，邮箱之类的信息，界面看上去什么都没有变化，但是其实你注册的这个界面已经向服务器发送了一个请求来验证你的用户名是否已经存在。就是后台与界面可以进行数据交互，而界面则可以继续保持一直跟用户交互而不受影响。

三、运行原理

页面发起请求发送给浏览器内核的Ajax引擎，Ajax引擎会提交请求到服务器端，这期间用户可进行任意操作，直到服务器端将数据返回给Ajax引擎，触发设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

四、核心技术XMLHttpRequest对象

是Ajax基础，XMLHttpRequest用于在后台与服务器交换数据；即在不重新加载整个网页的情况下，对网页的部分进行更新，目前所有浏览器都支持XHLHttpRequest。

属性：

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。
status	相应的HTTP状态，状态代码200表示成功
statusText	这个属性用名称而不是数字指定请求的HTTP的状态代码
readyState	请求/响应过程的当前活动阶段

详细解释：

1.readyState:Http请求的状态，当一个XMLHttpRequest初次创建时，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。

0	未初始化	尚未调用open（）方法
1	启动	已经调用open（）方法，但尚未调用send（）方法
2	发送	已经调用send（）方法，但尚未接收到响应
3	接收	已经接收到部分响应数据
4	完成	已经接收到全部响应数据，而且可以在客户端使用

readyState的值不会递减，除非当一个请求在处理过程中的时候调用了abort()或open()方法。酶促这个属性的值增加的时候，都会触发onreadystatechange事件句柄； 

2.responseText:目前为止为服务器接收的响应(不包括头部)，或者如果还没接收到数据的话，就是空字符串。

readyState<3 responseText是一个空字符串；

readyState=3 responseText返回目前已接收的响应部分；

readyState=4 responseText保存完整的响应体；

 方法：

方法	描述
abort()	取消当前响应，把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。
getAllResponseHeaders()	把HTTP响应头部作为未解析的字符串返回。
getResponseHeader()	返回指定的Http响应头部的值，其参数是要返回的HTTP响应头部的名称
open()	初始化HTTP请求参数，(URL和HTTP)但不发送请求
send()	发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体
setRequestHeader()	向一个打开但未发送的请求设置或添加一个HTTP请求

详细解释：

1.getResponseHeader（）方法，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

2.open（）方法

语法：open(method, url, async, username, password)

• 参数：method用于请求的HTTP方法(get,post,head)
• url请求的主体。多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
• async指示请求使用应该异步执行(false同步请求true异步请求，默认true)
• username和password可选参数，为url所需的授权提供认证资格。若指定，它们会覆盖 url 自己指定的任何资格。
   

3.send（）方法

语法：send(body)

• 如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象

4.setRequestHeader（）方法

语法：setRequestHeader(name, value)

• 参数：name设置头部名称，不包括空白，冒号或换行
• Value是头部的值，不包括换行;
• setRequestHeader() 方法指定了一个 HTTP 请求的头部，它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当readyState 为 1 的时候才能调用。如open()之后send()之前

 事件

事件句柄：onreadystatechange注册事件

五、使用Ajax完成异步操作的步骤

1. 创建XMLHTTPRequest对象  (new XMLHTTLRequest)
2. 使用open方法设置和服务器端交互，建立连接
3. 设置发送的数据，开始和服务器端交互 send()
4. 注册事件 onreadystatechange
5. 渲染界面

六、俩种方法请求示例

（1）get（）方法

//1.创建对象  xmlhttprequest     请求数据的对象 - http  https  三次握手
var ajax=new XMLHttpRequest();
//2.使用open方法设置和服务器端交互 建立连接
ajax.open("get","./data/data.stu",true);//异步
//3.给服务器发送请求
ajax.send();
//4.创建请求读取完成事件，注册事件onreadystatechange状态改变就会被调用
ajax.onreadystatechange=function(){
    if(ajax.readyState==4&&ajax.status==200){
        //5.进入则成功，渲染界面
        console.log(ajax.responseText);//输出相应内容
    }
}

2.post（）方法

  var ajax = new XMLHttpRequest();
    ajax.open("post", "./data/stu.txt",true);  //默认异步
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            console.log(ajax.response);
        }
    }
    //原生js  ajax 设置同步会造成线程锁死 onreadystatechange  无法进入

七、封装俩种方式为一个方法

 function ajax(method, url, data,success) {
        var ajax = new XMLHttpRequest();
  
        //get post方法判断

        if (method == "get") {

        //get请求 ？data方式传
            if (data) {    //若有值

                url += "？";
                url += "data";
            }
            ajax.open(method, url);
            ajax.send();
        }
        else {   //post
            ajax.open(method, url);
            if (data) {
                ajax.send(data);
            }
            else{
                ajax.send();
            }
        }
        ajax.onreadystatechange =function (){
            if(ajax.readyState ==4&&ajax.status ==200){
                success(ajax.responseText);
            }
        }
    }