Ajax（Asynchronous JavaScript And XML）
通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
AJAX 仅仅组合了：
- 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
- JavaScript 和 HTML DOM（显示或使用数据）
创建核心对象
创建XMLHttpRequest是Ajax的核心，语法是：
variable = new XMLHttpRequest();
老版本的IE5/IE6使用ActiveX对象：
variable = new ActiveXObject("Microsoft.XMLHTTP")
因此为了应对所有的浏览器，可以利用下面的方式创建对象，检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法
| 方法 | 简述 |
| open | 规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置，这里要写绝对路径 async：true（异步）或 false（同步） |
| send() | 向服务器发送请求（用于get） |
| send(string) | 向服务器发送请求（post） |
GET or POST
GET 比 POST 更简单更快，可用于大多数情况下。
以下情况始终使用 POST：
- 缓存文件不是选项（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 无大小限制）
- 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全
对于GET请求：
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
为了避免缓存数据的重复，向url添加一个唯一的ID：
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
如果要利用GET方法来发送信息，可以在url添加这些信息：
xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();
对于POST请求：
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
如果需要像表单那样POST数据，需要通过 setRequestHeader() 添加一个 HTTP 头部：
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
在 send() 方法中规定您需要发送的数据：
xhttp.send("fname=Bill&lname=Gates");
服务器响应
onreadystatechange 属性
| 属性 | 描述 |
| onreadystatechange | 定义了当 readyState 属性发生改变时所调用的函数，每当 readyState 发生变化时就会调用 onreadystatechange 函数 |
| readyState | 保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪 |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" |
| statusText | 返回状态文本（例如"OK"/"Forbidden"） |
当 readyState 为 4，status 为 200 时，响应就绪：
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//响应的内容
}
};
服务器响应属性：
| 属性 | 描述 |
| responseText | 获取字符串形式的响应数据 |
| responseXML | 获取XML数据形式的响应数据 |
服务器响应方法：
| 方法 | 描述 |
| getResponseHeader() | 从服务器返回特定的头部信息 |
| getAllResponseHeaders() | 从服务器返回所有头部信息 |
实例
responseText属性
document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML属性
XML HttpRequest 对象有一个內建的 XML 解析器。
ResponseXML 属性以 XML DOM 对象返回服务器响应。
使用此属性，您可以把响应解析为 XML DOM 对象：
music_list.xml文件内容
<TRACK>
<TITLE>再见</TITLE>
<ARTIST>邓紫棋</ARTIST>
<ALBUM>新的心跳</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>邓紫棋工作室</COMPANY>
<YEAR>2016</YEAR>
</TRACK>
<TRACK>
<TITLE>All I Ask</TITLE>
<ARTIST>Adele</ARTIST>
<ALBUM>25</ALBUM>
<COUNTRY>英国</COUNTRY>
<COMPANY>XL Recordings</COMPANY>
<YEAR>2015</YEAR>
</TRACK>
获取里面的所有歌手：
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();
getResponseHeader()
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
ajax的简单案例：点击按钮更改文本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h2 id="demo">Ajax更改这段文本</h2>
<button onclick="loadDoc()">更改内容</button>
</div>
<script>
function loadDoc(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerText = this.responseText;
}
};
xhttp.open("GET", "http://localhost:8088/ajaxServlet", true);
xhttp.send();
}
</script>
</body>
</html>
