ajax的开发步骤

2009-02-15 18:52:00

一 .初始化对象并发出XMLHttpRequest请求
var http_request;
if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
http_request = new ActiveXObject(“Mircosoft.XMLHTTP”);
}
注:有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错,因此,要确保返回的内容包含text/xml,需加入:http_request.overrideMimeType(“text/xml”);

二.指定响应处理函数
http_request.onreadystatechange = processRequest;
当服务器返回信息时,指定客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性既可。 注:需要指出的是,这个函数名称不加括号,不指定参数。也可以用javascript即时定义函数的方式定义响应函数,比如: http_request.onreadystatechange = function(){ };

三.发送HTTP请求
指定响应处理函数之后,就可以向服务器发送HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open(“GET”,http://www.example.org/index.jsp,true);
http_request.send(null);
open的第一个参数是HTTP请求的方法,GET、Post或者Head
open的第二个参数是目标URL。基于安全考虑,这个URL只能是同网域的,否则会提示“没有权限”的错误。这个URL可以是任何的URL,包括需要服务器解释执行的页面,而不仅仅是静态页面。目标URL处理XMLHttpRequest请求跟处理普通的HTTP请求一样,比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。
open的第三个参数只是指定在等待服务器返回信息时,是否继续执行下面的代码。如果为true,则不会,直到服务器返回信息,默认为true open调用完毕后,要调用send方法。Send的参数如果是以post方式发出的,可以是任何想传给服务器的内容。不过,跟form一样,如果要传文件或者Post内容给服务器,必须先调用setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时,资料则以查询字符串的形式列出,作为send的参数,例如:name=value&so=on 处理服务器返回的信息
在第二步,我们已经指定了响应处理函数,这一步,来看看响应处理函数都应该做什么。
首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性标可以指定,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:

If(http_request.readyState){
//信息已经返回,可以开始处理
}else{
//信息还没有返回,等待
}
服务器返回信息后,需判断返回的HTTP状态码,确定返回的页面没有错误,所有的状态码可以在W3C的官方网站上查到。其中,200代表页面正常。
if(http_request.status==200){
//页面正常,可以开始处理
}else{
//页面有问题}

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注