`

GET与POST方式提交Ajax的区别

    博客分类：
  • Ajax
AjaxServletJavaIE浏览器 
阅读更多
这个小Demo是来区别GET与POST提交Ajax的区别.Ajax是异步的javascript与xml的调用.之前一篇博文已经介绍了Ajax的运行机制与原理.这里就直接上代码了.
1.这是我写的一个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 Administrator
 * @date 2011-3-6
 * @action AjaxServlet.java
 * @time 下午05:08:54
 * @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, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("doPost方式来请求");
		this.process(request, response);
	}

}

2.这是我写的jsp页面<script type="text/javascript"></script>中式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 ajaxSubmit()
	{
		if(window.ActiveXObject) //IE浏览器
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else if(window.XMLHttpRequest) //除IE外的其他浏览器实现
		{
			xmlHttpRequest = 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 ajaxCallback()
	{
		if(xmlHttpRequest.readyState == 4)
		{
			if(xmlHttpRequest.status == 200)
			{
				var responseText = xmlHttpRequest.responseText;

				document.getElementById("div1").innerHTML=responseText;
			}
		}
	}
</script>

</head>
<body>

<input type="button" value="get content from server" onclick="ajaxSubmit();"><br/>
<input type="text" name="value1" id="value1ID"><br/>
<input type="text" name="value2" id="value2ID"><br/>
<div id="div1"></div>
 
</body>
</html>

0
顶
3
踩
分享到：
| 生活工作必备
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics