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/>
通过此文,希望能帮助到大家,谢谢大家对本站的支持!