【浅入AJAX一】AJAX概要&AJAX XHR

AJAX概要&AJAX XHR

1.概述

AJAX（Asynchronous JavaScript and XML）–异步JavaScript和XML，早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编 程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端新的内容而不必重新加载 页面，是无刷新数据读取的技术，一种创建交互式网页应用的网页开发技术。让 Web 更能接近桌面应用的用户体验。
说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现 网络编程。

2.AJAX XHR

2.1 使用 AJAX 的过程可以类比平常我们访问网页过程

代码如下：

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器 
var xhr = new XMLHttpRequest();  
//2、打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('get',url,true);
//3、 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求 
xhr.send();
//4、 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作 
xhr.onreadystatechange = function(){
 // 通过 xhr 的 readyState 判断此次请求的响应是否接收完成 
 if(xhr.readyState == 4){
    // 通过 xhr 的 responseText 获取到响应的响应体 
   if(xhr.status == 200){
     console.log('成功： '+xhr.responseText);
   }else{
     console.log('失败');
   }
 }
}

2.2 XMLHttpRequest对象的的 open() 和 send() 方法详解：

2.2.1 open(method,url,async)

参数一：提交方法——GET/POST：

GET：用于获取数据（如：浏览贴子，分享商品地址等），把数据放在url（网址）里来提交，安全性低、容量小，适合获取，且会缓存

POST：用于上传数据（如：用户注册，上传图片等），把数据放在报体里提交，安全性一般、容量几乎无限

参数二：文件路径——服务器上的文件地址，

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。如果需要阻止缓存：

  'abc.txt?&'+new Date().getTime(); //每次提交时间戳不同 

参数三：同步和异步——false/true（事件一件一件进行就是同步，多件事一起进行就是异步）：同步会阻塞后续代码，异步不会

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

2.2.2 sent()

一般就调用sent()方法就可以

xhr.send();

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

xhr.open("POST","ajax_test.asp",true);
//向请求添加HTTP头 两个参数（header: 规定头的名称，value: 规定头的值）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Bill&lname=Gates");

2.2.3 readyState

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被 触发多次，所以我们有必要了解每一个状态值代表的含义：

通过下面这个例子来理解这五个状态：

  var xhr = new XMLHttpRequest() console.log(xhr.readyState)； 
    // => 0 
    // 初始化 请求代理对象   
    xhr.open('GET', 'time.php') console.log(xhr.readyState)； 
    // => 1 
    // open 方法已经调用，建立一个与服务端特定端口的连接   
    xhr.send()；   
    xhr.addEventListener('readystatechange', function () {   
      switch (this.readyState) {     
        case 2:       
          // => 2       
          // 已经接受到了响应报文的响应头         
          // 可以拿到头       
          // console.log(this.getAllResponseHeaders())       
          console.log(this.getResponseHeader('server'))；       
          // 但是还没有拿到体       
          console.log(this.responseText)；       
          break；       
        case 3:       
          // => 3       
          // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整         
          // 在这里处理响应体不保险（不可靠）       
          console.log(this.responseText)；       
          break；      
        case 4:       
          // => 4       
          // 一切 OK （整个响应报文已经完整下载下来了）         
          // 这里处理响应体       
          console.log(this.responseText)；       
          break；   
      } 
    })

理解这个过程后得出：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

2.2.4 请求遵循HTTP

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

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

responseText属性：返回的数据（无论什么数据都是字符串）；

status属性：是否成功（200成功，常见失败404）:

1字头：消息类
2字头：成功类型
3字头：重定向，请求发生了页面跳转（包括缓存
4字头：客户端错误（请求错误）
5字头：服务器错误

具体的状态码可自行查阅。