AjaxRequest.js又一个ajax的小框架
版权：JavaIT学习室
转载请表明，http://www.javait.org
AjaxRequest.js文件是一个单独独立出来专门对Ajax请求做处理的JavaScript。使用起来还是比较简单，但是功能肯定要和jQuery、ExtJS4这些JavaScript库有区别。因为AjaxRequest.js文件没有对HTMLDocumentModel进行处理封装的方法，这一点要给大家说明一下。
下面先给出AjaxRequest.js文件的全部源代码结构。大家请参考如下的代码
varnet=newObject();//定义一个全局变量net
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror)?onerror:this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if(!method){
method="GET";
}
if(window.XMLHttpRequest){
this.req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
this.req=newActiveXObject("Microsoft.XMLHTTP");
}
if(this.req){
try{
varloader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method,url,true);
if(method=="POST"){
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params);
}catch(err){
this.onerror.call(this);
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
varreq=this.req;
varready=req.readyState;
if(ready==4){
if(req.status==200){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态:"+this.req.status);
}
其中最重要的方法就是AjaxRequest.js文件中的构造方法，所有Ajax的请求来调用此构造方法完成。
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror)?onerror:this.defaultError;
this.loadDate(url,method,params);
}
参数介绍：
（1）url，指定你发送给服务器端的请求地址。
（2）onload，指定当用于处理服务器端返回的数据。如：xml/txt/json。当然onload这个需要自己写JavaScript函数
（3）onerror，指定用于请求服务器失败后的处理。如：400/500/401/404等等HTTP状态码
（4）method，告知请求URL的方式是GET请求还是POST请求
（5）params，发送给服务器端的参数
举个列子告诉大家如何用：
（1）编写一个Ajax.jsp页面
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="JS/AjaxRequest.js"></script>
<scripttype="text/javascript">
//Ajax：页面无动态刷新技术（异步）
//Ajax的技术特点：JavaScript+XML(JSON)+HTMLDOM/CSSDOM
//Ajax技术实现：
//（1）将页面请求发送给服务器端的Java代码，然后此Java代码会传送一个XML/txt/JSON格式的数据到View层
//（2）View层接受Ajax获取到服务端的数据，然后进行解析并将数据显示到页面上
//（3）一定要注意Ajax不会刷新页面就可以看到新的数据显示
//（4）采用AjaxRequest.js这个JavaScript代码来完成Ajax的编写
$=function(v){
returndocument.getElementById(v);
}
functionsendMsg(){//用Ajax技术发送消息给服务器
varmsg=$("msg").value;
varloader=newnet.AjaxRequest("ajaxone.do?msg="+msg,doMsg,onError,"GET");
}
functiondoMsg(){//接受Ajax返回的消息，然后不刷新页面就显示数据
$("show").innerHTML=this.req.responseText;
}
functiononError(){//如果Ajax与服务器通信失败给出一个报错信息
alert("服务器通信失败，请检查服务");
}
</script>
</head>
<body>
<inputtype="text"value=""id="msg"><inputtype="button"value="send"onclick="sendMsg()">
<divid="show"></div>
</body>
</html>
（2）一个AjaxServlet.java的服务器端代码
packagecom.webchart.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*ServletimplementationclassAjaxServlet
*/
publicclassAjaxServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
/**
*@seeHttpServlet#HttpServlet()
*/
publicAjaxServlet(){
super();
//TODOAuto-generatedconstructorstub
}
/**
*@seeHttpServlet#doGet(HttpServletRequestrequest,HttpServletResponseresponse)
*/
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//TODOAuto-generatedmethodstub
request.setCharacterEncoding("utf-8");
Stringmsg=request.getParameter("msg");
msg="<fontcolor='red'>"+msg+"</font>";
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
out.println(msg);//服务端处理好数据，将数据做出一个txt返回给页面
out.flush();
out.close();
}
/**
*@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)
*/
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//TODOAuto-generatedmethodstub
}
}
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo