本文详细讲解了使用 JavaScript 实现 Ajax 的完整流程，涵盖从创建兼容 IE 与非 IE 浏览器的 XHR 对象、构建请求 URL、设置 readyStateChange 回调，到打开连接并发送请求的具体代码示例。文章还解析了状态码判断及响应数据处理，帮助开发者掌握前端异步通信的核心技术。
Ajax 应用概述与优缺点
Ajax 应用如今已非常普及，其优点众所周知，此处不再赘述。然而，Ajax 也存在不少缺点，例如可能破坏浏览器的后退按钮功能，导致相同 URL 打开的界面内容并不完全一致，以及在安全性能方面存在潜在风险。尽管存在这些缺陷，大家使用 Ajax 的热情依然高涨。
Ajax 实现基本步骤
本文将以表单提交为例，介绍实现 Ajax 的具体步骤。
第一步，从表单中获取需要提交的数据。
第二步，根据获取的数据构建相应的请求 URL。
第三步，设置 onreadystatechange 函数以监听状态变化。
第四步，调用 open 方法打开连接。
第五步，调用 send 方法发送请求。
以上即为 Ajax 实现的基本步骤，接下来将分步进行详细总结。
创建兼容浏览器的 XHR 对象
首先是关于 XHR 对象的建立。
function creatXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.xhr");
}
}一个较为完整的创建示例如下所示：
function creatXhr(){
var xhr=null;
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2){
xhr=false;
}
}
if(!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xhr=new XMLHttpRequest();
}
}上述代码对 IE 浏览器和非 IE 浏览器进行了兼容性处理。
发送 Ajax 请求与状态处理
接下来是发送 Ajax 请求，以下以表单项 country 为例进行说明：
function callReqest(){
var country=document.getElementById('country').value;
if((country==null)||(country==''))
return;
var url='example.php?country='+encodeURIComponent(country);
xhr.onreadystatechange=update;
xhr.open('GET',url,true);
xhr.send(null);
}以上代码获取了名为 country 的表单项值。onreadystatechange 函数会在 readyState 发生变化时触发，借此可以判断是否需要执行后续动作。
onreadystatechange 函数的具体实现如下：
function onreadystatechange(){
if((xhr.onreadystatechange==4)&&((xhr.state==200)||((xhr.state>200)&&(xhr.state<300)))){
document.getElementById('countryCode').value=xhr.responseText;
}
}当 onreadystatechange 等于 4 时，说明资源已完全下载到客户端，可以使用。同时检查状态码，若状态码在 200 到 300 之间（左闭右开），即可进行刷新操作。此处仅简单地将 responseText 赋值给一个表单项，当然也可以返回 XML 等相关数据，相关内容可查阅其他介绍。
触发 Ajax 的时机设置
最后，关于触发 Ajax 的时机，可以在表单的 country 字段中添加 onChange 事件，这样用户在输入表单时即可触发 Ajax 请求。
JavaScript Ajax 核心总结
ps：javascript ajax 小结
1. 创建 XHR 对象
2、XHR 对象的属性和方法
3、readyState 属性