1.AJAX兼容IE和Firefox两大浏览器,出现了AJAX开发框架.
2.AJAX开发关键技术:XMLHttpRequest对象,JavaScript编程技术,DOM(文档对象模型),CSS(层叠样式表),和XSLT(可扩展样式表转换)
XMLHttpRequest对象是实现Ajax应用的核心;
JavaScript是Ajax应用在客户端使用的脚本语言;
通过JavaScript和DOM的配合才能实现页面的动态更新;
CSS主要用于控制页面元素的显示样式;
XSLT可以将XML文档转换为任何形式的文档,在Ajax应用中使用XSLT可以实现数据和页面显示的完全分离;
3.XMLHttpRequest对象:
3.1 发送请求
使用XMLHttpRequest对象向服务器端发送请求的基本流程可以分为5步:
3.1.1 从Web表单中获取需要的数据;
3.1.2 建立要连接的URL;
3.1.3 打开到服务器的连接;
3.1.4 设置服务器在完成后要运行的函数;
3.1.5 发送请求;
function callServer(){
//表单中获取必要的数据
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
//只有在数据不为空时才发出请求
if((city == null) || (city == "")) return;
if((state == null) || (state == "")) return;
//请求的URL
var url = "getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
//联系服务器,打开连接
xmlHttp.open("GET",url,true);//"true"代表该请求是异步的
//设置请求完成时的响应函数,注意这里是请求完成时,并不是响应完成时
xmlHttp.onreadystatechange = updatePage;
//发送请求,因为已经在请求URL中添加了要发送给服务器的数据(city和state),所以请求中 无需再发送其他数据.
xmlHttp.send(null);
}
3.2 .处理HTTP响应
200:一切正常
401:未经授权
403:禁止
404:没找到
function updatePage(){
//readState == 4,表示请求成功完成
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var response = xmlHttp.responseText;//HTTP请求返回的文本内容
document.getElementById("zipCode").value = response;
}else if(request.status == 404){
//HTTP状态码为404,无法找到资源
alert("404 Not Found");
}else if(request.status == 403){
//HTTP状态码为403,资源不可用
alert("403 Forbidden");
}else if(request.status == 401){
//HTTP状态码为401,未经授权
alert("401 Unauthorized");
}
}
}
3.3.HTTP就绪状态
共有5种就绪状态:
0:请求未初始化(还没有调用XMLHttpRequest对象的open方法)
1:请求已经建立,但是还没有发送(还没有调用send方法)
2:请求已发送,正在处理中
3:请求在处理中。通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成
4:响应已完成,可以获取并且使用服务器的响应了