Ajax——Asynchronous JavaScript an
XMLHttpRequest 对象：
概述：
一个JavaScript 对象，能够通过 HTTP 协议连接到服务器。Ajax的异步性就是由这个对象的特性获得的。
XMLHttpRequest 向服务器发送一个异步请求，一旦请求被初始化，其余的js代码不需要等待服务器端相应，即异步。
当然，XMLHttpRequest 也可以发送同步请求。
流程图
XMLHttpRequest 对象的方法：open() send() abort()
1.abort() ： 取消Http 请求。
2.open(method, string url，string asynch， username， password)：初始化HTTP 请求参数，但并不发送。
参数：
method：请求的 HTTP 方法，包括：GET 、POST、HEAD。
url：请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
username/password 可选，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
3.send(body)：发送 HTTP 请求。
如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不是必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。
二、XMLHttpRequest 对象的属性和列表
1.ReadyState 属性值列表
ReadyState 值 描述
0 未初始化 Uninitialized ——已创建 XMLHttpRequest 对象，但还未初始化
1 创建请求 Open ——调用了 open()，准备好发送一个请求到服务器，但还未发送。
2 发送请求 Sent —— 调用了 send()，请求已发送到 Web 服务器。未接收到响应。
3 接受相应 Receiving —— 响应头已接收完，相应体开始接收但未完成。
4 加载 Loaded _ HTTP 响应已经完全接收。
每次 ReadyState 的值改变时，都会触发 onreadystatechange 事件句柄。
2.responseText 属性
目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。
当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
3.responseXML 属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)，将请求的相应，描述为 XML 并作为 Document 对象返回。
4.status 属性
此 status 为服务器返回的 HTTP 状态码。
仅当 readyState 为 3或4时，这个属性才可用，小于3时读取会引发异常。
常用 HTTP 状态码：
200 —— 请求成功
404 —— 服务器无法找到被请求的页面
500 —— 请求未完成，服务器遇到不可预知的情况。
5.statusText 属性
此 statusText 为服务器返回的 HTTP 状态码文本。如：200——OK，404——Not Found，500——Internal Server Error
仅当 readyState 为 3或4时，这个属性才可用，小于3时读取会引发异常。
例：
HTML及JavaScript部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax 读取 txt </title>
</head>
<body>
<button id="getJson">get</button>
<br>
<br>
<div id="displayJson"></div>
<script>
document.getElementById('getJson').addEventListener('click', clickGet);
function clickGet(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'simple.txt', true);//创建请求
xhr.send();//发送请求
//响应请求
xhr.onload = function () {
document.getElementById('displayJson').innerHTML = this.responseText;
}
}
</script>
</body>
</html>
txt 内容为：there is txt data
则运行 HTML 并点击 get 按钮后页面显示如下：
