用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后用的最多。

点击打开链接