ajax 三种实现方法实例代码
ajax即异步的javascriptandxml,本文章向码农们介绍ajax的三种实现方法（prototype实现，jquery实现，XMLHttpRequest实现）
本文主要是比较三种实现Ajax的方式，为以后的学习开个头。
准备:
1、 prototype.js
2、 jquery1.3.2.min.js
3、 json2.js
后台处理程序(Servlet),访问路径servlet/testAjax:
Java代码
packageajax.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*Ajax例子后台处理程序
*@authorbing
*@version2011-07-07
*
*/
publicclassTestAjaxServletextendsHttpServlet{
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
response.setContentType("text/html;charset=utf-8");
PrintWriterout=response.getWriter();
Stringname=request.getParameter("name");
Stringage=request.getParameter("age");
System.out.println("{\"name\":\""+name+"\",\"age\":\""+age+"\"}");
out.print("{\"name\":\""+name+"\",\"age\":"+age+"}");
out.flush();
out.close();
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doGet(request,response);
}
}
TestAjaxServlet接收两个参数：name和age，并返回一个以JSON格式编写的字符串。
前台页面参数输入界面:
Html代码
<divid="show">显示区域</div> <divid="parameters"> name:<inputid="name"name="name"type="text"/><br/> age:<inputid="age"name="age"type="text"/><br/> </div>
一、prototype实现
<scripttype="text/javascript"src="prototype.js"></script>
<scripttype="text/javascript">
functionprototypeAjax()
{
varurl="servlet/testAjax";//请求URL
varparams=Form.serialize("parameters");//提交的表单
varmyAjax=newAjax.Request(
url,{
method:"post",//请求方式
parameters:params,//参数
onComplete:pressResponse,//响应函数
asynchronous:true
});
$("show").innerHTML="正在处理中...";
}
functionpressResponse(request)
{
varobj=request.responseText;//以文本方式接收
$("show").innerHTML=obj;
varobjJson=request.responseText.evalJSON();//将接收的文本用解析成Json格式
$("show").innerHTML+="name="+objJson['name']+"age="+objJson['age'];
}
</script>
<inputid="submit"type="button"value="提交"onclick="prototypeAjax()"/><br/>
在prototype的Ajax实现中，用evalJSON方法将字符串转换成JSON对象。
二、jquery实现
<scripttype="text/javascript"src="jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="json2.js"></script>
<inputid="submit"type="button"value="提交"/><br/>
<scripttype="text/javascript">
functionjqueryAjax()
{
varuser={"name":"","age":""};
user.name=$("#name").val();
user.age=$("#age").val();
vartime=newDate();
$.ajax({
url:"servlet/testAjax?time="+time,
data:"name="+user.name+"&age="+user.age,
datatype:"json",//请求页面返回的数据类型
type:"GET",
contentType:"application/json",//注意请求页面的contentType要于此处保持一致
success:function(data){//这里的data是由请求页面返回的数据
vardataJson=JSON.parse(data);//使用json2.js中的parse方法将data转换成json格式
$("#show").html("data="+data+"name="+dataJson.name+"age="+dataJson.age);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
$("#show").html("error");
}
});
}
$("#submit").bind("click",jqueryAjax);//绑定提交按钮
</script>
刚接触jQuery,在json的处理上借助了json2.js。还请前辈们指教。
三、XMLHttpRequest实现
<scripttype="text/javascript">
varxmlhttp;
functionXMLHttpRequestAjax()
{
//获取数据
varname=document.getElementById("name").value;
varage=document.getElementById("age").value;
//获取XMLHttpRequest对象
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){
varactivxName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(vari=0;i<activexName.length;i++){
try{
xmlhttp=newActiveXObject(activexName[i]);
break;
}catch(e){}
}
}
xmlhttp.onreadystatechange=callback;//回调函数
vartime=newDate();//在url后加上时间，使得每次请求不一样
varurl="servlet/testAjax?name="+name+"&age="+age+"&time="+time;
xmlhttp.open("GET",url,true);//以get方式发送请求
xmlhttp.send(null);//参数已在url中，所以此处不需要参送
}
functioncallback(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){//响应成功
varresponseText=xmlhttp.responseText;//以文本方式接收响应信息
varuserdiv=document.getElementById("show");
varresponseTextJson=JSON.parse(responseText);//使用json2.js中的parse方法将data转换成json格式
userdiv.innerHTML=responseText+"name="+responseTextJson.name+"age="+responseTextJson.age;
}
}
}
</script>
<inputid="submit"type="button"value="提交"onclick="XMLHttpRequestAjax()"/><br/>
通过此文，希望能帮助到大家，谢谢大家对本站的支持！