传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。那这样肯定会造成浏览器性能的问题，那么这个时候，AJAX诞生了。
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。
什么是AJAX?
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
简单的理解就是：AJAX是一种无需重新加载整个网页的情况下，就能够实现部分网页数据更新(指异步更新)的技术。
AJax实例
创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX实例</title>
<script type="text/javascript">
function Change() {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// 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", "./a.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv">
<h1>点击按钮替换文字</h1>
</div>
<button onclick="Change()"> 确定改变</button>
</body>
</html>创建一个a.txt文件，内容如下：
AJAX是一种无需重新加载整个网页的情况下，就能够实现部分网页数据更新(指异步更新)的技术。
Ajax请求的步骤
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象；
(2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息；
(3)设置响应HTTP请求状态变化的函数；
(4)发送HTTP请求；
(5)获取异步调用返回的数据；
(6)使用JavaScript和DOM实现局部刷新。
XMLHttpRequest对象
说到Ajax请求的步骤，第一步就是创建XMLHttpRequest对象，那么我们就来聊聊。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。同时XMLHttpRequest 也是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
AJAX向服务器发送请求
如果将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
/*
open方法描述：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajax_info.txt",true);
/**
send()：将请求发送到服务器。
*/
xmlhttp.send();AJAX - 服务器 响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 restonseText（获得字符串形式的响应数据。
） 或 responseXML（获得 XML 形式的响应数据。
） 属性。
responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
实例
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
例：请求 cd_catalog.xml 文件，并解析响应：
我收藏的 CD :
AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange： 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState状态码：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
http状态码（status）
200：（成功）
403：（禁止）服务器拒绝请求
404：（未找到）服务器找不到请求的页面
408：（请求超时）服务器等候请求发生超时
500：（服务器内部错误）服务器遇到错误，无法完成请求
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
