Ajax的简单封装应用

最新推荐文章于 2023-09-20 10:27:08 发布

hehefefe

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量75

点赞数

分类专栏： Ajax 文章标签： Ajax 应用服务器 Servlet IE 浏览器

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>