为何学Ajax？
• 甚么是Ajax？
• Ajax基本原理
• 怎样建立Ajax？
• XMLHttpRequest对象的方式和特性
此栏简述
为何学Ajax?
• 透过触发器商业模式，提升了采用者新体验
• 强化了应用领域程序和流控制的统计数据传输，减少丌必要性的
统计数据来往，减少了频宽挤占
• 那时基本上大部份的B/S应用软件工程项目单厢减少Ajax，进而
提升采用者新体验度。最众所周知的应用领域：腾讯世界地图
• AJAX全称作“Asynchronous JavaScript and XML”（触发器
JavaScript和XML），是一类建立互动式页面应用领域的页面开发
控制技术，其本质上是两个应用领域程序端控制技术。
• 丌是一类新控制技术，是如下表所示三种控制技术的女团应用领域：
– 如前所述web国际标准（standards-based presentation）XHTML+CSS的表
示；
– 采用 DOM（Document Object Model）展开劢态表明及可视化；
– 采用 XML 和 XSLT 展开统计数据统计数据传输及有关操作方式； JSON
– 采用 XMLHttpRequest 展开触发器统计数据查询、检索；
– 采用 JavaScript 将大部份的东西绑定在一起。
• 总结：AJAX就是偷偷的采用XMLHttpRequest对象向服务器
发http请求，再偷偷的将服务器返回的统计数据以特定的格式返回
在应用领域程序中的控制技术。
甚么是Ajax?
Ajax 基本原理
传统web请求
Ajax请求
—————————————————————————————————————————————–
怎样建立Ajax ？
1. 建立XMLHttpRequest对象
2. 采用XMLHttpRequest对象建立请求
3. 监视response的状态，写回调函数处理服务器返回的数
据
4. 采用XMLHttpRequest对象发送请求
var request;
if (window.XMLHttpRequest) { // Mozilla,…
request = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE
request = new ActiveXObject(“Msxml2.XMLHTTP”);
}
request.open(“get”, “testAjaxServlet” );
request.onreadystatechange = function(){
if(request.readyState==4){
var result = request.responseText; // 得到服务器端返回的统计数据
document.getElementById(“div2”).innerHTML=result; // 局部刷新
}
};
request.send(null);
XMLHttpRequest 对象的特性和方式（1 ）
特性 说明
readyState
则表示XMLHttpRequest对象的状态：
0 （未初始化）对象已建立，但是尚未初始化（尚未调用open方式）
1 （初始化）已调用send()方式，正在发送请求
2 （发送统计数据）send方式调用完成，但是当前的状态及http头未知
3 （统计数据传送中）已接收部分统计数据，因为响应及http头不全，这时通
4 （完成）统计数据接收完毕，此时可以透过透过responseBody和
resp
Status
服务器返回的http状态码。200则表示“成功”，404则表示“未找到”，
500则表示“服务器内部错误”等。
statusText
服务器返回状态的文本信息。
responseText
服务器响应的文本内容
onreadystatechange
请求状态改变的事件触发器（readyState变化时会调用这个特性上
注册的javascript函数）。
