Ajax已经是很古老的话题了,可对于我这类的菜鸟来说"车轮"还是很有必要来造的,通过几个月来的工作体验,让我深深的感受到了基础的重要性,有一个人之前跟我说过这样一句话"当你有一天真正感受到基础的重要性时,那么你就逐步在走向更高层次的迈进",那会我是不以为然,而今让我深受体会,也在其中栽了大跟头,......今天这里就来做一下简单的Ajax封装类的应该!!!
这是Servlet代码:
package com.huawei.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * * @name 何枫 * @date 2011-3-23 * @action AjaxServlet.java * @time 下午11:47:06 * @package_name com.huawei.servlet * @project_name ajaxTest */ public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet方式来请求"); process(request, response); } //抽取方法() private void process(HttpServletRequest request, HttpServletResponse response) throws IOException { String v1 = request.getParameter("v1"); String v2 = request.getParameter("v2"); System.out.println("v1=" + v1 +", v2=" + v2); String v3 =String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2)); PrintWriter out = response.getWriter(); // try { // Thread.sleep(5000); // } catch (InterruptedException e) { // // TODO Auto-generated catch block // e.printStackTrace(); // } //System.out.println("doGet方法调用!!!"); //清空缓存的小技巧 response.setHeader("pragma", "no-cache"); response.setHeader("cache-control", "no-cache;"); out.print(v3); out.flush(); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException { System.out.println("doPost方式来请求"); this.process(request, response); } }
这是Ajax简单封装的核心代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="pragma" content="no-cache; charset=ISO-8859-1"> <meta http-equiv="cache-control" content="no-cache; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript"> //var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象 /* function Ajax(){ if(window.ActiveXObject) //IE浏览器 { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) //除IE外的其他浏览器实现 { xmlHttpRequest = new XMLHttpRequest(); } //xmlHttpRequest = window.XMLHttpRequest ? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest() ; if(null != xmlHttpRequest) { v1 = document.getElementById("value1ID").value; v2 = document.getElementById("value2ID").value; //Servlet doGet方式来请求 //xmlHttpRequest.open("GET","AjaxServlet?v1=" + v1 + "&v2=" + v2,true); xmlHttpRequest.open("POST","AjaxServlet",true); //关联好ajax的回调函数 xmlHttpRequest.onreadystatechange = ajaxCallback; //真正向服务器端发送数据 //xmlHttpRequest.send(null); //Servlet doPost方式来请求 //用doPost提交必须加上如下一行 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2); } } */ function ajax(getorpost,url,data){ var xmlHttpRequest; if(window.ActiveXObject){ //IE浏览器 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } else{//除IE外的其他浏览器实现 xmlHttpRequest = new XMLHttpRequest(); } var statechange = function(){ if(xmlHttpRequest.readyState == 4) { if(xmlHttpRequest.status == 200) { var responseText = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML=responseText; } } }; //关联好ajax的回调函数 xmlHttpRequest.onreadystatechange = statechange; if(getorpost=="post"){ xmlHttpRequest.open(getorpost,"AjaxServlet ",true); //用doPost提交必须加上如下一行 xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2); } //Servlet doGet方式来请求 else if(getorpost=="get"){ xmlHttpRequest.open(getorpost,url,true); //真正向服务器端发送数据 xmlHttpRequest.send(null); } } function test(){ v1 = document.getElementById("value1ID").value; v2 = document.getElementById("value2ID").value; var URL= "AjaxServlet?v1=" + v1 + "&v2=" + v2; new ajax("get",URL,true); } </script> </head> <body> <input type="button" value="get content from server" onclick="test();"><br/> <input type="text" name="value1" id="value1ID"><br/> <input type="text" name="value2" id="value2ID"><br/> <div id="div1"></div> </body> </html>
这里是jQuery的Ajax的应用,相比上面的简单了一大把!
servlet的dopost方法 /* * 清除页面缓存!!! */ response.setHeader("pragma", "no-cache"); response.setHeader("cache-control", "no-cache"); int parm1 = Integer.parseInt(request.getParameter("parm1")); int parm2 = Integer.parseInt(request.getParameter("parm2")); PrintWriter out = response.getWriter(); out.print(String.valueOf(parm1+parm2)); out.flush(); ====================================================== <%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript" src="javascript/jquery-1.4.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ //alert("EEE"); $.ajax({ url: "jsonServlet", type: "GET", dateType: "html", data: {'parm1':$("#parm1").val(), 'parm2':$("#parm2").val()}, success: function(returnedData){ $("#text1").val(returnedData); } }); }); }); </script> </head> <body> <input type="text" id="parm1"/>+ <input type="text" id="parm2"/>= <input type="text" id="text1" /> <input type="button" id="button1" value="ckick Servlet"> </body> </html>