Ajax基础

Ajax为我们提供了以异步的方式和服务器进行交换数据的方法。实现Ajax有一个核心的对象:XMLHttpRequest。 该对象提供了open() 和send()两个核心方法用来发起对服务器的连接和数据发送。下面我们用一个Echo程序来演示基本的Ajax使用.

先准备服务端Servlet用于接收Http/Ajax请求（这里假设Ajax使用msg字段携带数据）。服务端Servlet在收到请求后，取出msg的消息，然后加上Echo前缀将消息发回给客户端。

package ajax.servlet;

import java.io.IOException;
import java.io.PrintStream;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;

import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
    
/**
 * Servlet implementation class EchoServlet
 */

@WebServlet("/EchoServlet")
public class EchoServlet extends HttpServlet
{
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public EchoServlet()
    {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
            IOException
    {
        this.doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
            IOException
    {
        this.setEncoding(request, response); 
        
        String msg = request.getParameter("msg"); 
        PrintWriter ps = response.getWriter();
        ps.println("ECHO:" + msg);
    }

    private void setEncoding(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {

        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
    }

}

在客户端用JavaScript代码实例化XMLHttpRequest对象的时候要注意IE浏览器和非IE浏览器的区别。IE浏览器用ActiveXObject("Microsoft.XMLHttp")进行实例化，而非IE浏览器直接用XMLHttpRequest()直接实例化(不得不吐槽IE真的很奇葩).

        var xmlHttpRequest ;
        if(window.XMLHttpRequest)
        {
            xmlHttpRequest  = new XMLHttpRequest();
        }
        else
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }

在建立好XMLHttpRequest对象后，就可以分一下三步完成Ajax请求了。

1 open()方法设置请求的方式和请求的URL

        var msg = document.getElementById("msg").value;
        xmlHttpRequest.open("post", "EchoServlet?msg="+msg);

2 指定请求完成后的回调函数(callback function)

        xmlHttpRequest.onreadystatechange = function()
        {
            if(xmlHttpRequest.status == 200)
            {
                if(xmlHttpRequest.readyState == 2 || xmlHttpRequest.readyState == 3)
                {
                    alert("请稍后，服务器正在处理请求....");
                }
                
                if(xmlHttpRequest.readyState == 4)
                {
                    var backMsg = xmlHttpRequest.responseText;
                    var backMsgDiv = document.getElementById("backMsgDiv");
                    var newSpan = document.createElement("span");
                    newSpan.appendChild(document.createTextNode(backMsg));
                    backMsgDiv.appendChild(newSpan);
                    backMsgDiv.appendChild(document.createElement("br"));
                }
            }
        }

3 send()方法发送请求

        xmlHttpRequest.send(null);

在上面的第二部，设置回调函数的时候要注意，http请求状态为200表示正常，所以我们只处理statu为200的结果。同时还有一个readyState状态，它一共有0 1 2 3 4 几种值，每种值分别代表Ajax不同的阶段。

　　0 代表请求没有发出（调用open()之前）

　　1 代表请求已经建立，但任然没有发出(调用open()之后)

　　2 代表请求已经发出，正在等待服务器处理(调用send之后)

　　3 代表服务器处理完成，正在接收服务器的返回信息

　　4 代表所有的服务器信息已经接收完成

下面的代码是整个JSP页面的所有代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://www.mldn.cn/c"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>

<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'template.jsp' starting page</title>
<link type="text/css" rel="stylesheet" href="css/mldn.css">
<script type="text/javascript" src="js/mldn.js"></script>
<script type="text/javascript"> 
    
    function sendRequest()
    {
        var xmlHttpRequest ;
        if(window.XMLHttpRequest)
        {
            xmlHttpRequest  = new XMLHttpRequest();
        }
        else
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
        }
        
        var msg = document.getElementById("msg").value;
        xmlHttpRequest.open("post", "EchoServlet?msg="+msg);
        xmlHttpRequest.onreadystatechange = function()
        {
            if(xmlHttpRequest.status == 200)
            {
                if(xmlHttpRequest.readyState == 2 || xmlHttpRequest.readyState == 3)
                {
                    alert("请稍后，服务器正在处理请求....");
                }
                
                if(xmlHttpRequest.readyState == 4)
                {
                    var backMsg = xmlHttpRequest.responseText;
                    var backMsgDiv = document.getElementById("backMsgDiv");
                    var newSpan = document.createElement("span");
                    newSpan.appendChild(document.createTextNode(backMsg));
                    backMsgDiv.appendChild(newSpan);
                    backMsgDiv.appendChild(document.createElement("br"));
                }
            }
        }
        xmlHttpRequest.send(null);
    }
</script>

</head>

<body>
    <input type="text" id="msg" name="msg" /><button onclick="sendRequest()">提交</button>
     <div id="backMsgDiv">
     </div>
</body>
</html>