本文详解JavaScript中Ajax技术的核心原理，重点讲解XMLHttpRequest对象的创建、跨域限制及open方法的使用。深入剖析同步与异步请求的区别，以及readyState各状态值（0-4）的含义。同时系统梳理HTTP状态码分类（1xx至5xx）及statusText属性，结合代码示例说明GET与POST请求的选择策略，帮助开发者掌握前端数据交互的基础实现。
Ajax概述与工作原理
Ajax及其工作原理
AJAX（Asynchronous Javascript And XML）是一种无需刷新整个网页即可与服务器交换数据的技术，该技术最早由Google在谷歌地图中应用并迅速普及。
AJAX默认不支持跨域请求。若需实现跨域，可尝试设置document.domain为相同的主域名（如'a.com'），或通过服务器端代理来转发XMLHttpRequest请求。
AJAX技术基于现有的Internet标准构建，主要联合使用了以下技术：
XMLHttpRequest 对象：用于异步与服务器交换数据； JavaScript/DOM：负责信息的显示与交互； CSS：用于定义数据的样式； XML：作为数据传输的格式。
XMLHttpRequest对象的创建与连接
创建 XMLHttpRequest 对象
现代浏览器（包括IE7及以上版本、Firefox、Chrome、Safari以及Opera）均原生支持 XMLHttpRequest 对象。
创建Ajax对象：
//IE6以上版本 var oAjax = new XMLHttpRequest();
//IE6版本 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 连接服务器
oAjax.open(方法, url, 是否异步) Ajax全称为“Asynchronous Javascript And XML”（异步JavaScript和XML），旨在创建交互式网页应用。因此，Ajax默认工作在异步模式下（即第三个参数为true，若为false则为同步模式）。
同步与异步请求机制
同步和异步
同步是指：发送方发出数据后，必须等待接收方发回响应，才能发送下一个数据包。 异步是指：发送方发出数据后，无需等待接收方响应，即可继续发送下一个数据包。 简单来说：同步操作是串行执行的，而异步操作允许并发进行。
发送请求send()
代码如下:
<script type="text/javascript">
function getDoc(){
var xmlhttp;
if(window.xmlhttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myId").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", index.php,true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="getDoc()">请求数据</button>
</body>GET与POST请求的选择
GET 还是 POST？
与 POST 相比，GET 请求更简单且速度更快，在大多数场景下均可使用。
然而，在以下情况中，建议使用 POST 请求：
无法使用缓存文件（例如需要更新服务器上的文件或数据库）； 向服务器发送大量数据（POST 请求没有数据量限制）； 发送包含未知字符的用户输入时，POST 比 GET 更稳定且可靠。
请求状态监听与XHR对象详解
oAjax.onreadystatechange = function(){ //当请求状态改变时要调用的事件处理器
alert(oAjax.readystate);
} 只要readyState属性的值发生变化，便会触发一次readyStatechange事件。利用该事件可以检测每次状态变化后的readyState值。通常，我们只关注readyState值为4的阶段，因为此时所有数据已就绪。注意，必须在调用open()之前指定onreadystatechange事件处理程序，以确保跨浏览器兼容性。示例如下：
代码如下:
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.statusText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);HTTP状态码与响应文本解析
XHR对象
当XHR对象将HTTP请求发送到服务器时，会经历几个状态，直到请求被处理并接收回应。readyState是XHR请求的状态属性，包含5个状态值：
0（未初始化）：尚未调用open()方法； 1（载入）：已调用send()方法，正在发送请求； 2(载入完成)：send()方法执行完毕，已收到全部响应内容； 3(解析)：正在解析响应内容； 4（完成）：响应内容解析完成，客户端可使用。
status属性表示从服务器返回的响应状态码。例如：200表示成功，404表示未找到资源。
1字头：消息。表示请求已被接受，需要继续处理。 2字头：成功。表示请求已成功被服务器接收、理解并接受。 3字头：重定向。表示需要客户端采取进一步操作才能完成请求。 4字头：客户端错误。表示客户端可能出错，妨碍了服务器处理。 5字头：服务器错误。表示服务器在处理请求过程中发生错误或异常。
另附：http状态码详解
statusText
statusText是响应返回的文本信息，仅在readyState值为3或4时可用。当readyState为其他值时，访问statusText属性将引发异常。
XHR的方法
| 方法 | 描述 |
|---|---|
| abort() | 导致当前正在执行的请求被取消 |
| getAllResponseHeaders() | 返回包含所有响应头的名称和值的单个字符|串 |
| getResponseHeader(name) | 返回响应头中指定的名称和值 |
| open(method,url,async,username,pwd) | 设置HTTP方法（get或post）等 |
| send(content) | 发出带有指定主体内容的请求 |
| setRequestHeader(name,value) | 使用指定的名称和值设置请求头 |
代码如下:
<script type="text/javascript">
var oAjax =oAjax();
alert(oAjax.readyState);//弹出"0"
oAjax.open("get","index.html",true);
alert(oAjax.readyState);//弹出"1"
oAjax.send(null);
alert(oAjax.readyState);//IE下弹出4,而firefox是2
//可以通过readystatechange事件监听
oAjax = XHR();
oAjax.onreadystatechange = function () {
alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后还会再来个1
//IE下则是1,1,3,4
};
oAjax.open("get","index.txt",true);
oAjax.send(null);
</script>