完整代码：
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest(); //1
xhttp.onreadystatechange = function() { //2
var el = document.getElementById("demo"); //3
if (this.readyState == 4 && this.status == 200) {
//4
el.innerHTML = this.responseText; //5
}
};
xhttp.open("GET", "/demo/js/ajax_info.txt", true);//6
xhttp.send(); //7
}
</script>
</body>
</html>
代码的目的是点击按钮后改变显示的文本，显示 " / demo / js / ajax_info.txt " 中的内容
AJAX 即Asynchronous JavaScript And XML（异步JS和XML）
ajax通过与服务器交换数据更新网页而不需要重新加载整个页面。
ajax的工作流程：（用B代表浏览器，用S代表服务器）
- 鼠标点击等网页事件（B）
- 创建XMLHttpRequest对象（B）
- XMLHttpRequest对象向S发送请求HttpRequest（B -> S）
- S处理HttpRequest请求（S）
- S创建响应并将数据返回B（S -> B）
- JavaScript处理响应的数据（B）
- 页面更新（B）
1. 创建XMLHttpRequest对象
var xhttp = new XMLHttpRequest(); //1
XMLHttpRequest对象有以下几种方法：
new XMLHttpRequest(); //创建对象
abort() //取消当前请求
send() //将请求发送到服务器，使用GET
send("string") //将请求发送到服务器，使用POST
getAllResponseHeaders() //返回头部信息
getResponseHeader() //返回特定头部信息
setRequestHeader(header, value)//向请求添加http头部
/* header规定头部名称， value规定头部值 */
open(method, url, async, user, psw) //规定请求
/*
method：请求类型 GET 或 POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
*/
2. 向服务器发送请求
xhttp.open("GET", "/demo/js/ajax_info.txt", true);//6
xhttp.send(); //7
三种情况下应该用POST：
- 需要更新服务器上的数据库时，即不是对缓存操作；
- 由于POST无大小限制所以向服务器发送大量数据时；
- 发送用户输入的字符时；
当open方法的async参数为true时表示异步发送：
JS在等待服务器响应时可以执行其他脚本，当响应就绪时再处理响应
3. 服务器响应-定义readystate改变时的操作
xhttp.onreadystatechange = function() { //2
var el = document.getElementById("demo"); //3
if (this.readyState == 4 && this.status == 200) {
//4
el.innerHTML = this.responseText; //5
}
};
XMLHttpRequest对象有以下属性：
readyState 保存XMLHttpRequest的状态
/* 0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪 */
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
//每当 readyState 发生变化时就会调用 onreadystatechange 函数
responseText 以字符串返回响应数据
responseXML 以XML返回响应数据
status 返回请求的状态号
/*200: "OK" 403: "Forbidden" 404: "Not Found" 详见http状态码*/
statusText 返回状态文本，比如 "OK" 或 "Not Found"
xhttp.onreadystatechange = function() { /* 定义当readyState改变时要做什么 */};
函数内部为：
var el = document.getElementById("demo");
//通过dom操作获取id为"demo"的<div></div>
if (this.readyState == 4 && this.status == 200) {
el.innerHTML = this.responseText;
}
//如果请求完成且响应已就绪 同时 满足返回请求OK 则改变文本
//以字符串返回响应数据
//应该返回的数据在 步骤2. 发送请求 中已经指定了路径
