Ajax(原生)基础小结

1. 快速上手

		//1.创建XHR对象
   var  xhr =  new XMLHttpRequest();
        //2.与目标地址建立连接 通过GET请求  相当于打开浏览器(输入网址)
        xhr.open("GET","./index.html");
        //3.需要发送的参数，不需要时可以为(null) 或者直接() 相当于浏览器按回车，开始请求
        xhr.send();
        //4.请求完成后进行的操作
        xhr.onreadystatechange=function () {
        //这个事件不是只在响应时触发 ，状态改变就触发
        if(this.readyState!==4) return; //当状态值不为4时 不往下执行
        //获取服务端响应内容 响应体
        console.log(this.responseText);
        };

打印出的响应体

2. readyState

readyState是Ajax请求过程中的不同状态值。

readyState	状态描述	说明
0	UNSENT	代理（XHR）被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用，建立了连接。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头。
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据。
4	DONE	响应体下载完成，可以直接使用 responseText。

代码

 var xhr=new XMLHttpRequest();
        console.log(xhr.readyState);
        // =>0
        //初始化 请求代理对象

        xhr.open("GET","./index.html");
        console.log(xhr.readyState);
        //=>1
        //open方法已经被调用，建立一个与服务端特定端口的连接

        xhr.send();
        console.log(xhr.readyState);
        //这里也是1

		//给xhr绑定事件
        xhr.addEventListener("readystatechange",function () {
            switch (this.readyState) {
                case 2:
                    console.log(this.readyState);
                    console.log(this.getAllResponseHeaders().split("\n"));  //获取响应头 分割
                    console.log(this.getResponseHeader("server"));   /*获取响应头中的指定键*/
                    console.log(this.responseText);
                    //2 已经接受到了响应报文的响应头
                    break;
                case 3:
                    //3 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
                    //在这里处理响应体不保险(不可靠)
                    console.log(this.readyState);
                    break;
                case 4:
                    //4. 一切ok(整个响应报文已经完整下载)
                    console.log(this.readyState);
                    console.log(this.responseText);
                    break;
            }
        });

一般在readyState的值为4时进行后续操作

xhr.onreadystatechange = function () {   
    if (this.readyState === 4) {    
        // 后续逻辑......   
    } 
}

3. onload兼容

   var xhr=new XMLHttpRequest();

        xhr.open("GET","./index.html");

        xhr.send(null);

        /*onload是HTML5中 提供的XMLHttpRequest verson 2.0 定义的*/
        xhr.onload=function () {
            console.log(this.readyState);  //打印4
            console.log(this.responseText);
        }

使用方法与xhr.onreadystatechange类似，不过要注意兼容问题。

4. Ajax遵循HTTP协议

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行 
xhr.open('GET', './index.html');
// 设置请求头 
xhr.setRequestHeader('Accept', 'text/plain');
// 设置请求体 xhr.send(null)   
xhr.onreadystatechange = function () {   
    if (this.readyState === 4) {     
        // 获取响应状态码     
        console.log(this.status);    
        // 获取响应状态描述     
        console.log(this.statusText);
        // 获取响应头信息     
        console.log(this.getResponseHeader('Content‐Type')); // 指定响应头     
        console.log(this.getAllResponseHeader()); // 全部响应头     
        // 获取响应体    
        console.log(this.responseText); // 文本形式 
        console.log(this.responseXML); // XML 形式   
    } 
}

5. GET请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的? 参数传递。
在响应端可以用location.search获取？后面的内容

var xhr = new XMLHttpRequest();
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './index.html?id=1');
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState ===  4 ) {
	console.log(this.responseText);
  }
}

// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据

6. POST请求

POST 请求过程中，都是采用请求体承载需要提交的数据。

var xhr = new XMLHttpRequest();
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', './add.php');
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded');
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value
xhr.send('key1=value1&key2=value2');
xhr.onreadystatechange = function () {
if (this.readyState ===  4 ) {
	console.log(this.responseText);
  }
}

7.同步运行与异步运行

异步

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认为 true，如果需要同步执行可以通过传递 false 实现：

console.log('before ajax');
var xhr = new XMLHttpRequest();
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', './index.html', true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState ===  4 ) {
// 这里的代码最后执行
	console.log('request done');
  }
}
console.log('after ajax');

同步

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax');
var xhr = new XMLHttpRequest();
// 同步方式
xhr.open('GET', './index.html', false);
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
xhr.onreadystatechange = function () {
if (this.readyState ===  4 ) {
// 这里的代码最后执行
	console.log('request done');
  }
}
xhr.send(null);
console.log('after ajax');

时间戳

可以用时间戳计算两段代码的运行时间：

 console.time("ajax");
	//...代码段
 console.timeEnd("ajax");
 //参数要一样

不要使用同步模式

8. 了解XML，掌握JSON的使用

9. 兼容方案(可能的考点)

XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替

var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');