Ajax原理——XMLHttpRequest

1.定义

Ajax原理核心是JavaScript提供的XMLHttpRequest对象，其目的是在浏览器客户端未人为刷新的情况下做到页面效果和数据的局部刷新，达到不阻塞用户行为的目的。

2.工作原理

XMLHttpRequest对象创建之后，客户端发起请求，请求会给到创建的 XMLHttpRequest对象，之后对象把这个请求发送给服务器，服务器做出相应的业务处理之后把数据相应给XMLHttpRequest对象，之后XMLHttpRequest对象接收数据进行解析，解析之后的数据方可在页面中使用

3.实现步骤

 1. 创建一个XMLHttpRequest对象
 
 2. 使用此对象的open方法定义请求的方法、路径、是否使用异步方式、是否验证用户名、是否验证密码
 
 3. 注册状态改变的监听事件（事件回调中判断请求状态码，获取数据）
 
 4. 使用XMLHttpRequest对象的send方法发送请求

4.代码实现

	var xhr =  new XMLHttpRequest()       
	xhr.open(method,url,flag,name,password)
        xhr.onreadystatechange = function(){
            // 请求成功，获取结果
            if(xhr.readyState === 4 && xhr.status == 200){
                // 获取数据的格式
                // var str = xhr.getAllResponseHeaders() // 返回一个数据类型的键值对
                // console.log(str);
                // var type = xhr.getResponseHeader('content-type') // 返回数据类型的值
                // console.log(type);
                // console.log(xhr.responseText);
                // console.log(xhr.responseXML);
         
                // 解析application/json数据  使用   JSON.parse()
                var data = JSON.parse(xhr.responseText)
                console.log(data);
            }
        }
     xhr.send()

注：

1.open方法的参数解析如下

method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。

URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。

flag：该参数为可选，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步，默认为true。

name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。

password：该参数为可选，用于输入密码。若服务器需要验证，则必须使用该参数。

2.XMLHttpRequest对象从创建开始，到发送请求，接收数据的过程中一共会经历以下五种状态

未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。

初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。

发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。

接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。

完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。