前言

之前的一篇博客，對Ajax的理解Ajax核心對象
XMLHTTPRequest五步學會使用 ，對Ajax的作用和基本使用有瞭一些瞭解。

這裡做一個簡單總結，AJAX核心對象XMLHTTPRequest和服務器的交互過程：

過程：初始化→發送請求→等待服務器響應→接收響應

　　1.創建XMLHTTPRequest對象

　　2.使用open()方法設置和服務器端交互的相應參數，包括發送HTTP請求的方式(get
orpost) ，請求的URL，是否異步方式交互

　　3.使用send()方法發送HTTP請求

　　4.使用onreadystatechange事件監聽服務端反饋，根據readyState屬性判斷和服務器端的交互是否完成，還要根據status屬性判斷服務器是否正確返回瞭數據，完成後接受服務器端返回的數據。

　　這個過程是原始的AJAX的實現過程，對初學者明白這個過程是很有必要的。其實這裡有一個更簡單的實現方法——jQuery。

jQuery AJAX方法

$.load()

以之前的一篇博客為例，這裡用jQuery load() 方法來實現：（把遠程數據加載到被選的元素中）

    
        
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                //從文本框中獲取內容
                var userName = document.getElementById("UserName").value;

                //load()方法從服務器加載數據，並把返回的數據放入被選元素中。
                //GET方式
                $('#message').load("AJAX?name=" + userName);
                //POST方式
                //$('#message').load("AJAX?name=" + userName,{"Content-type":"application/x-www-form-urlencoded"});
                });
              });
        </script>
    
    
        
        
        

        

    

通過上例的實現，當我們引入jquery庫後，一切變得好簡單，隻需要一行代碼：

　　//GET方式

　　$('#message').load("AJAX?name="+ userName);

　　//POST方式

　　//$('#message').load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});

我們不需要再關心AJAX的請求和響應這些過程瞭。

jQuery load()方法是jQuery中最簡單但強大的AJAX方法，load()
方法從服務器加載數據，並把返回的數據放入被選元素中。它的語法如下：

$(selector).load(URL,data,callback);

說明：

　　 selector：存放返回的數據的元素，示例中的

　　load的三個參數：

　　　URL(必須的)：這個不用說都知道，請求的URL地址；

　　　data(可選的)：發送至服務器的key/value
數據；

　　　callback(可選的)：請求完成後想要執行的函數（不管請求成功或者失敗）。

附：服務端和XML代碼

服務端

//服務端
public class AJAX extends HttpServlet {
    //服務器端代碼
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String old = request.getParameter("name");
            if (old == null) {
                out.println("用戶名不能為空");
            }else{
                String name = new String(old.getBytes("ISO8859-1"),"gb2312");
                //String name = URLDecoder.decode(old,"utf-8");
                System.out.println(name);
                if (name.equals("j")) {
                    out.println("用戶名[" + name +"]已經存在，請使用其他用戶名");
                }else{
                    out.println("用戶名[" + name +"]尚未存在，可以使用");
                }
                //out.println("返回校驗頁面");
            }
            
        } finally {
            out.close();
        }
    }

XML

    
        AJAX
        AJAX
        1
    

        AJAX
        /AJAX
    

        
            30
        
    

前端顯示

vcD4KPGgxPs60zeq94S4uLjwvaDE+CjxwPjwvcD4KPHA+ICAgINX9yOfJz8Pmy/nLtbXEo6wkLmxvYWQoKcrHalF1ZXJ51tDX7rzytaW1xEFKQVi3vbeoo6zWrrrztPjAtMbky/y1xGpRdWVyeQogQUpBWLe9t6ihozwvcD4KPHA+Cjx0YWJsZSBhbGlnbj0=”center” border=”1″ cellpadding=”1″ cellspacing=”1″ width=”600″>

$(selector).load(url,data,callback) 把遠程數據加載到被選的元素中 $.ajax(options) 把遠程數據加載到XMLHttpRequest 對象中 $.get(url,data,callback,type)
$.post(url,data,callback,type) 使用HTTP GET 來加載遠程數據 $.getJSON(url,data,callback) 使用HTTP GET 來加載遠程 JSON 數據 $.getScript(url,callback) 加載並執行遠程的JavaScript 文件