jQuery常用AJAX-API

目的：简化客户端与服务端进行局部刷新的异步通讯

（1）取得服务端当前时间

简单形式：jQuery对象.load(url)

返回结果自动添加到jQuery对象代表的标签中间

如果是Servlet的话，采用的是GET方式

复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

sendData = {"user.name":"jack","user.pass":"123"};

以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

注意：对于load方法而言，如果请求体无参数发送的话，load方法

采用GET方式提交

注意：对于load方法而言，如果请求体有参数发送的话，load方法

采用POST方式提交

注意：使用load方法时，自动进行编码，无需手工编码

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>取得服务端当前时间</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    当前时间：<span id="time"></span><br/>
    <input type="button" value="获取时间"/>
    
    
    
    <script type="text/javascript">
        $(":button").click(function(){
            //参数一:发送的路径
            var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime();
            //参数二:以JSON文本书写的发送的参数
            var sendDate = {
                "name" : "哈哈",
                "sal"  :  6000
            };
            //参数三:回调函数
            $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
                //回调函数中参数一：backData表示返回的数据，它是js对象
                //回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
                //回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
                //alert("backData=" + backData);//它是一个js对象
                //alert("textStatus=" + textStatus);
                //alert("xmlHttpRequest=" + xmlHttpRequest.readyState);
                //alert("xmlHttpRequest=" + xmlHttpRequest.status);
                //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串
                //项目中只需要使用backDate即可                
            });
            
                            
            //$("#time").load(url,sendDate);
            //$("#time").load(url);
        });
    </script>
    
  </body>
</html>

package loaderman.time;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 取得服务端当前时间
 * @author AdminTC
 */
public class TimeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("GET");
        String name = request.getParameter("name");
        String sal = request.getParameter("sal");
        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        System.out.println("POST");
        String name = request.getParameter("name");
        String sal = request.getParameter("sal");
        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String str = sdf.format(new Date());
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(str);
        pw.flush();
        pw.close();
    }
}

load()方法参数解释：

参数一：url发送到哪里去

参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}

参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数

其中参数三为function处理函数最多可以接收三个参数，含义如下

第一个参数：服务端返回的数据，例如：backData

第二个参数：服务端状态码的文本描述，例如：success、error、

第三个参数：ajax异步对象，即XMLHttpRequest对象

以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意

检查注册用户名和密码是否存在

$.get(url,sendData,function(backData,textStatus,ajax){... ...})

$.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡

注意：使用get或post方法时，自动进行编码，无需手工编码

jQuery对象.serialize()

作用：自动生成JSON格式的文本

注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名

注意：必须用<form>标签元素

适用：如果属性过多，强烈推荐采用这个API

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>检查注册用户名和密码是否存在</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <!-- 
        在异步提交的方式下，form标签的action和method属性没有意义
    -->
    <form action="01_time.jsp" method="GET">
        <table border="2" align="center">
            <tr>
                <th>用户名</th>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <th>密码</th>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="检查" style="111px"/>
                </td>
            </tr>
        </table>
    </form>
    
    <span></span>
    
    
    <script type="text/javascript">
        $(":button").click(function(){
            var username = $(":text").val();//哈哈
            var password = $(":password").val();//123
            var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();
            /*手工写JSON文本
            var sendData = {
                "username" : username,
                "password" : password
            };
            */
            var sendData = $("form").serialize();
            $.post(url,sendData,function(backDate){
                //backDate：
                //如果服务器返回html，即backDate就是string，不要解析
                //如果服务器返回json，即backDate就是object，要解析    
                //如果服务器返回xml，即backDate就是object，要解析    
                var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");
                $("span").text("");
                $("span").append($img);
            });
        });
    </script>
    
  </body>
</html>

package loaderman.user;

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;

/**
 * 检查注册用户名和密码是否存在
 * @author AdminTC
 */
public class UserServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");//哈哈
        String password = request.getParameter("password");//123
        String tip = "images/MsgSent.gif";
        if("哈哈".equals(username) && "123".equals(password)){
            tip = "images/MsgError.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}