用JQuery来写Ajax

下面是用Javascript来写的ajax代码

<script type="text/javascript">
			var xmlHttpRequest = null;
			function ajaxSubmit() {
			if (window.ActiveXObject) {
					xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
				} else if (window.XMLHttpRequest) {
					xmlHttpRequest = new XMLHttpRequest();
				}
				if (xmlHttpRequest != null) {
					var v1 = document.getElementById("add1").value;
					var v2 = document.getElementById("add2").value;
						xmlHttpRequest.open("POST", "jisuan", true);
						xmlHttpRequest.onreadystatechange = ajaxCallback;
						xmlHttpRequest.setRequestHeader("Content-Type",
								"application/x-www-form-urlencoded")
						
						xmlHttpRequest.send("add1=" + v1 + "&add2=" + v2);
				}
			}
			function ajaxCallback() {
				if (xmlHttpRequest.readyState == 4) {
					if (xmlHttpRequest.status == 200) {
						var responseText = xmlHttpRequest.responseText;
						//alert(responseText);
						document.getElementById("results").value = responseText;
					}
				}
			}
		</script>

用JQuery来写的话
第一种写法：

<script type="text/javascript" src="jquery-1.7.1.js"></script>
     <script type="text/javascript">
     $(function()
	{
     	$("#jia").click(function()
     	{
     		$.ajax({
     			type:"POST",
     			url:"../suanfa",
     			dateType:"html",
     			data:{'add1':$("#add1").val(),'add2':$("#add2").val()},
     			success:function(returnedData)
     			{
     				$("#result").val(returnedData);
     			}
     		});
     	});
     });
     </script>

第二种写法：

<script type="text/javascript" src="jquery-1.7.1.js"></script>
     <script type="text/javascript">
     $(function()
	{
     	$("#jia").click(function()
     	{
     		$.post
     		("../suanfa",{add1:$("#add1").val(),add2:$("#add2").val()},
	   			function(returnedData)
	   			{
	   				$("#result").val(returnedData);
	   			}
     		);
     	});
     });
     </script>

body里的是：

<input type="text" id="add1"/>
   +
   <input type="text" id="add2"/>
   <input type="button" value="=" id="jia"/>
   <input type="text" id="result"/>

servlet里的处理

package com.niit.test;

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;

public class Suanfa extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
			{
				doPost(request, response);			
			}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException 
			{
				int num1=Integer.parseInt(request.getParameter("add1"));
				int num2=Integer.parseInt(request.getParameter("add2"));
				int result=num1+num2;
				
				response.setHeader("pragma", "no-cache");
				response.setHeader("cache-control", "no-cache");
				
				response.setContentType("text/html");
				PrintWriter out=response.getWriter();
				out.print(result);
				out.flush();
				out.close();
			}

}

第二种写法在学完JQuery后用的最多。