AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。也就是我们常听到的“异步加载”。
它的基本工作流程如下：
使用起来也非常简单：
<head>
<script>
function loadXMLDoc()
{
.... AJAX 脚本执行 ...
}
</script>
</head>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
这样就能实现网页某部分的异步数据加载，重点在于“ AJAX 脚本执行”部分，下面详细说明一下创建一个Ajax 脚本的具体步骤。
创建一个AJAX 脚本分为4个步骤：
1. 创建XMLHttpRequest对象
不同的浏览器使用的异步调用对象有所不同。
- 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象：
var xmlHttp = new XMLHttpRequest();
- 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
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");
}
2. 向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法，将请求发送到服务器
xmlHttp.open("GET","test1.txt",true);
xmlHttp.send();
3. 获取服务器响应
使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获取来自服务器的响应。
- responseText：获取字符串形式的响应数据。
- responseXML：获取 XML 形式的响应数据。
示例1：如果来自服务器的响应并非 XML，使用 responseText 属性。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
示例2：如果来自服务器的响应是 XML，使用 responseXML 属性，并对XML 对象进行解析。
var xmlDoc=xmlhttp.responseXML;
var txt="";
var x=xmlDoc.getElementsByTagName("ARTIST");
for (var i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
4. 完善AJAX请求
经过上面三步，我们实现了一个完整的AJAX 请求过程。
但是整个过程中还存在瑕疵：我们无法得知服务器响应是否成功。如果响应未成功，那么后面的操作就毫无效果，我们可能还会误以为是自己程序写错了，为了防止这种情况，我们监听一下响应的状态，确保响应成功后才进行后面的操作。
XMLHttpRequest 对象的三个重要的属性:
-
readyState
从创建XMLHttpRequest对象开始，到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5种状态：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
-
onreadystatechange 事件
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 -
status
- 200: "OK"
- 404: 未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
}
}
（注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。）
到现在，我们已经完成了一个完美的AJAX脚本！
完整代码：
<script>
// 1.创建XMLHttpRequest对象
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");
}
// 2.发送服务器请求
xmlHttp.open("GET","test1.txt",true);
xmlHttp.send();
// 3.判断服务器响应是否成功，如果响应成功，进行相关操作
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
</script>
扩展：AJAX CORS 跨域请求
由于所有浏览器都存在“同源策略”，因此跨域请求正常情况下不被允许。
随着技术的发展，现在的浏览器可以主动支持设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
前端的代码不用修改，服务端的代码需要修改。
网友评论