JS的AJAX测试

待我称王封你为后i 2022-03-02 19:38 236阅读 0赞

## intro ##

AJAX(Asynchronous JavaScript and XML)异步的JS和XML。  
优点：与服务器异步交互数据，对页面进行局部刷新。

## 常用成员 ##

*  构造方法  
    `new XMLHttpRequest()` 几乎所有现代浏览器都支持`XMLHttpRequest`对象。  
    `new ActiveXObject("Microsoft.XMLHTTP")` IE5和IE6使用`ActiveXObject`。
 *  成员方法  
    `xhr.open(method, url, ?async, ?username, ?password)` 打开xhr|修改xhr的`readyState`为`OPENED`。  
    `xhr.send(?body)` 发送AJAX请求。
 *  成员属性
    
     *  `status` 返回[HTTP状态码(status Code)][HTTP_status Code]。`200`为`OK`。
     *  `readyState` xhr对象的准备状态。共有5种。  
        0 xhr.`UNSEND`, 未发送(刚构造xhr时的状态，请求未初始化)。  
        1 xhr.`OPENED`, 打开的(调用`xhr.open()`之后，表示服务器连接已建立)。  
        2 xhr.`HEADERS_RECEIVED`, 头已接收(即请求已接收)。  
        3 xhr.`LOADING`, 载入中(请求处理中)。  
        4 xhr.`DONE`, 已完成，表示请求已完成且响应已就绪。
     *  `onreadystatechange`事件  
        每次`xhr.readyState`值改变都会触发该事件，并调用该事件绑定的函数。  
        绑定：`xhr.onreadystatechange = function() {...}`
        
        `xhr.readyState == xhr.DONE && xhr.status == 200` 表示请求成功(响应就绪)且成功返回。
 *  其他成员  
    xhr.`responseType`  
    xhr.`responseURL`  
    xhr.`response`  
    xhr.`responseText`  
    xhr.`responseXML`  
    xhr.`getResponseHeader(name)`  
    xhr.`getAllResponseHeaders()`

## `xhr.readyState`属性变化 ##

`xhr = new XMLHttpRequest()` 实例化`xhr`对象之后，`xhr.readyState == 0`，表示`UNSEND`。  
调用`xhr.open(...)`之后，`readyStatus`从0表为1，表示`OPENED`。  
调用`xhr.send()`之后，`readyStatus`的变化：`1 -> 2`, `2 -> 3`, `3 -> 4`。  
一般在`onreadystatechange`事件绑定的函数中检测`xhr.readyState == xhr.DONE`或`xhr.readyState == 4`)。  
在整次过程中，`xhr.readyStatus`状态值共变化4次。

## 测试 ##

(测试链接)\[[http://www.runoob.com/try/try.php?filename=tryajax\_first][http_www.runoob.com_try_try.php_filename_tryajax_first]\]

// 1. 实例化xhr对象
    xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActivaXObject("Microsoft.XMLHTTP");
    
    // 2. 打印xhr.readyState和HTTP状态码status
    console.log(xhr.readyState, xhr.status);
    
    // 3. 定义xhr.onreadystatechange事件(每次xhr.readyState改变都会触发该事件)的函数。
    xhr.onreadystatechange = function() {
      console.log(xhr.readyState, xhr.status);
      if (xhr.readyState == xhr.DONE && xhr.status == 200) {
      	responseType = xhr.responseType;
      	responseURL = xhr.responseURL;
      	response = xhr.response;
      	responseText = xhr.responseText;
      	responseXML = xhr.responseXML;
      	allResponseHeaders = xhr.getAllResponseHeaders();
      	console.log("\nresponseType: " + Object.prototype.toString.call(responseType) + ":\n" + responseType);
      	console.log("\nresponseURL: " + Object.prototype.toString.call(responseURL) + ":\n" + responseURL);
      	console.log("\nresponse: " + Object.prototype.toString.call(response) + ":\n" + response);
      	console.log("\nresponseText: " + Object.prototype.toString.call(responseText) + ":\n" + responseText);
      	console.log("\nresponseXML: " + Object.prototype.toString.call(responseXML) + ":\n" + responseXML);
      	console.log("\nallResponseHeaders: " + Object.prototype.toString.call(allResponseHeaders) + ":\n" + allResponseHeaders);
      }
    }
    
    // 4. 打开xhr(修改xhr.readyState为xhr.OPENED，值为1)。
    xhr.open("GET", "/try/ajax/ajax_info.txt", true);
    
    // 5. 发送AJAX请求。
    xhr.send();

![测试结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

[HTTP_status Code]: https://blog.csdn.net/wuyujin1997/article/details/88722498
[http_www.runoob.com_try_try.php_filename_tryajax_first]: http://www.runoob.com/try/try.php?filename=tryajax_first
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20220302/1ed925fc79b84f23b40120bd14fe3033.png