【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
AJAX = 异步 JavaScript 和 XML。
1. AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 对象用于和服务器交换数据。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
2. 向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。
- string：仅用于 POST 请求
3. AJAX - 服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText (获得字符串形式的响应数据)或 responseXML(获得 XML 形式的响应数据。) 属性。
3.1 responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText
3.2 responseXML属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
请求 books.xml 文件，并解析响应
4. AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
（1）onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
（2）readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
（3）status：200: "OK"，404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Let AJAX change the content!</button>
</body>
</html>
index.html页面显示为：
index.php内容如下：
<?php
echo "AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.";
?>点击button按钮，部分网页内容动态显示为：
注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
来源：oschina
链接：https://my.oschina.net/u/4225107/blog/3141885