AJAX+Servlet实现的数据处理显示功能示例
本文实例讲述了AJAX+Servlet实现的数据处理显示功能。分享给大家供大家参考,具体如下:
实现功能:在输入框中输入字符,用AJAX传到后台Servlet处理后加上随机数,并返回到前台显示。
一、写前台jsp页面index.jsp
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>MyJSP'index.jsp'startingpage /* ajax的几个步骤: 1、建立XmlHttpRequest对象 2、设置回调函数 3、使用Open方法建立与服务器的连接 4、向服务器发送数据 5、在回调函数中针对不同响应状态进行处理 */ varxmlHttp; functioncreateXMLHttpRequest(){//1建立XmlHttpRequest对象 if(window.ActiveXObject){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHttp"); }catch(e){ alert("Error!!!"); } }else{ xmlHttp=newXMLHttpRequest(); } } functionshowMes(){//2设置回调函数 if(xmlHttp.readyState==4){//数据接收完成并可以使用 if(xmlHttp.status==200){//http状态OK //5、在回调函数中针对不同响应状态进行处理 document.getElementById("sp").innerHTML=xmlHttp.responseText;//服务器的响应内容 }else{ alert("出错:"+xmlHttp.statusText);//HTTP状态码对应的文本 } } } /** //这是GET方法传送 functiongetMes(){ createXMLHttpRequest(); vartxt=document.getElementById("txt").value; varurl="servlet/AjaxServlet?txt="+txt; url=encodeURI(url);//转换码后再传输 xmlHttp.open("GET",url,true);//3使用Open方法建立与服务器的连接 xmlHttp.onreadystatechange=showMes; xmlHttp.send(null);//4向服务器发送数据 } */ /** *这是post方法 */ functionpostMes(){ createXMLHttpRequest(); vartxt=document.getElementById("txt").value; varurl="servlet/AjaxServlet"; varparams="username="+txt; //alert(params); xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); xmlHttp.send(params); xmlHttp.onreadystatechange=showMes; }
二、写后台Servlet加random随机数,关键代码如下:
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ request.setCharacterEncoding("utf-8");//用utf-8转换获得传输过来的码 response.setContentType("text/html"); PrintWriterout=response.getWriter(); Stringtxt=request.getParameter("txt"); //Stringtx=newString(txt.getBytes("iso-8859"),"utf-8"); out.print("txt="+txt+Math.random()); out.flush(); out.close(); } /** *ThedoPostmethodoftheservlet.
* *Thismethodiscalledwhenaformhasitstagvaluemethodequalstopost. * *@paramrequesttherequestsendbytheclienttotheserver *@paramresponsetheresponsesendbytheservertotheclient *@throwsServletExceptionifanerroroccurred *@throwsIOExceptionifanerroroccurred */ publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriterout=response.getWriter(); Stringusername=request.getParameter("username"); //Stringtxt=newString(username.getBytes("ISO-8859-1"),"UTF-8"); Stringtxt=newString(username); out.print("txt="+txt+":"+Math.random()); out.flush(); out.close(); }
更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.netajax技巧总结专题》
希望本文所述对大家ajax程序设计有所帮助。