一个简单的Ajax开发框架

根据Ajax与XMLHttpRequest对象一文的介绍,我们可以开发一个简单的Ajax框架供以后开发应用。 
首先要知道Ajax的开发流程:
1:初始化XMLHttpRequest,这一步要考虑跨浏览器的问题。
2:设置XMLHttpRequest对象的onReadyStateChange属性,指定服务器返回响应数据时要调用的回调函数,即指定响应处理函数,
3:调用XMLHttpRequest对象的open方法,创建http请求。
4:调用XMLHttpRequest对象的setResouceHeader等方法,设置必要的http请求头信息。
5:调用XMLHttpRequest对象的send方法,发送之前创建的http请求。
6:根据XMLHttpRequest对象的open方法参数,决定等待或者不等待服务器回响应数据。如果服务器返回响应数据,则将控制权交给之前设置回调函数。

了解上面的流程后,我们来一步步的解析和示范,形成一个发送和接收XMLHttpRequest请求的Ajax应用程序框架。

//定义XMLHttpRequest对象实例 var http_request = false; //定义创建跨浏览器XMLHttpRequest方法 function createXMLHttpRequest() {     http_request = false;     //开始初始化XMLHttpRequest对象     if(window.XMLHttpRequest) //Mozilla 浏览器         http_request = new XMLHttpRequest();         if (http_request.overrideMimeType) {//设置MiME类别             //有些版本的浏览器在处理服务器返回的未包含XML mime-type头部信息的内容时会报错,因此,要确保返回的内容包含text/xml信息。             http_request.overrideMimeType("text/xml");         }     }     else if (window.ActiveXObject) // IE浏览器         try {             http_request = new ActiveXObject("Msxml2.XMLHTTP");         } catch (e) {             try {                 http_request = new ActiveXObject("Microsoft.XMLHTTP");             } catch (e) {}         }     }     if (!http_request) // 异常,创建对象实例失败         window.alert("不能创建XMLHttpRequest对象实例.");         return false;     } } //定义可复用的http请求发送函数 function send_request(method,url,content,callback) {//请求方式,请求目标,内容,处理函数名称          //第一步:初始化XMLHttpRequest     createXMLHttpRequest();          //第二步:指定响应处理函数     http_request.onreadystatechange = callback;//注意这里不用加括号     //第三步:向服务器发出http请求 调用 open和send方法     // 确定发送请求的方式和URL以及是否异步执行下段代码     if(method.toLowerCase()=="get"{         http_request.open(method, url, true);//第三个参数 为 是否异步     }     else if(method.toLowerCase()=="post"{         http_request.open(method, url, true);         http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这个位置不能放错     }     else {         window.alert("http请求类别参数错误。");         return false;     }     http_request.send(content);     //send方法如果POST方式发出的话,可以是任何想传给服务器的内容,不过与form一样,如果要传的是文件或者POST内容给服务器,在调用open方法之后send方法之前,必须先调用XMLHttpRequest对象的setRequestHeader方法,修改http请求头信息中的MIME类别。 }     //最后一步 就是处理服务器返回信息的方法了,由于每个页面的应用不同,所以应该将具体方法写在相应的页面中。这写一个示例:          // 处理返回文本格式信息的函数 示例 function processTextResponse() {     if (http_request.readyState == 4// 判断对象状态(4表示完成)         if (http_request.status == 200// 200 信息已经成功返回,开始处理信息             //这里面即是具体的处理代码             alert("Text文档响应。");         } else //页面不正常             alert("您所请求的页面有异常。");         }     } }  //我们将以上文件保存为ajax.js文件
//然后在以后的每个需要应用Ajax的页面中引入 <script language="javascript" src="ajax.js"></script>

这个Ajax应用程序开发框架现在还是一个简单的初步的框架,其目的就是通过这个框架的示范,形式一个使用Ajax的基本方法和轮廓。 关于如何使用这个框架,将在以后的文章中写出

 使用案例

registerCheck.jsp

补充:

如果使用POST方法传递。则content一般使用XML的形式。例如:

 

Code

 

而相应的后台代码 ASP.NET中可以如下获得

Code
posted @ 2013-07-16 11:21  nik2011  阅读(126)  评论(0)    收藏  举报