JS AJAX XMLHttpRequest 对象 异步请求的方法

Asynchronous JavaScript And XML

异步JS和XML

• 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
• JavaScript 和 HTML DOM（显示或使用数据）
• Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也很常见。

Browser

发送

接收

Server

处理

查看readyState和status

接收response响应

执行js操作

响应某个事件

创建XMLHttpRequest对象

发送HttpRequest

处理HttpRequest

返回数据

1. 网页中发生一个事件（页面加载、按钮点击）
2. 由 JavaScript 创建 XMLHttpRequest 对象
3. XMLHttpRequest 对象向 web 服务器发送请求
4. 服务器处理该请求
5. 服务器将响应发送回网页
6. 由 JavaScript 读取响应
7. 由 JavaScript 执行正确的动作（比如更新页面）

XMLHttpRequest 对象

现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject(“Microsoft.XMLHTTP”);

属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。
status	返回请求的状态号 200: “OK” , 403: “Forbidden” , 404: “Not Found”
statusText	返回状态文本（比如 “OK” 或 “Not Found”）
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据

readyState 值对应 XMLHttpRequest 的状态。
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪

每当 readyState 发生变化时就会调用 onreadystatechange 函数
当 readyState 为 4，status 为 200 时，响应就绪

方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
open(method, url, async, user, psw)	规定请求 method：请求类型 “GET” 或 “POST”
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
setRequestHeader()	向要发送的报头添加标签/值对

跨域问题

出于安全考虑，现代浏览器 必须保证尝试加载的网页和 XML 文件都必须位于相同服务器上
协议、ip、端口 必须相同

发送请求

创建 XMLHttpRequest 对象
使用 XMLHttpRequest 对象的 open() 和 send() 方法 配置和发送

以下情况始终使用 POST方法：

• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

兼容ie5/ie6:

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

同步请求时，程序会等待服务器的响应，同步 XMLHttpRequest 正在从 Web 标准中移除

接收响应

通过相应属性获取响应数据
onreadystatechange 函数中，当 readyState 为 4，status 为 200 时，响应就绪

let ajax = new XMLHttpRequest();
let url = 'xxxxx';


ajax.onreadystatechange = function () {
    //当 readyState 为 4，status 为 200 时，响应就绪
    if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
        
    }
}
ajax.open("GET", url, true)
ajax.send();