Ajax經典交互講解

資料：

　　 

XMLHttpRequest 對象

XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。

盡管名為 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。

XMLHttpRequest 對象是名為 AJAX 的 Web 應用程序架構的一項關鍵功能。

瀏覽器支持

XMLHttpRequest 得到了所有現代瀏覽器較好的支持。唯一的瀏覽器依賴性涉及 XMLHttpRequest 對象的創建。在 IE 5 和 IE 6 中，必須使用特定於 IE 的 ActiveXObject() 構造函數。正如在 XMLHttpRequest 對象 這一節所介紹的。

W3C 標准化

XMLHttpRequest 對象還沒有標准化，但是 W3C 已經開始了標准化的工作，本手冊介紹的內容都是基於標准化的工作草案。

當前的 XMLHttpRequest 實現已經相當一致。但是和標准有細微的不同。例如，一個實現可能返回 null，而標准要求是空字符串，或者實現可能把 readyState 設置為 3 而不保證所有的響應頭部都可用。

屬性

readyState

HTTP 請求的狀態.當一個 XMLHttpRequest 初次創建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應，這個值增加到 4。

5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

狀態	名稱	描述
0	Uninitialized	初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。
1	Open	open() 方法已調用，但是 send() 方法未調用。請求還沒有被發送。
2	Sent	Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經完全接收。

readyState 的值不會遞減，除非當一個請求在處理過程中的時候調用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件句柄。

responseText

目前為止為服務器接收到的響應體（不包括頭部），或者如果還沒有接收到數據的話，就是空字符串。

如果 readyState 小於 3，這個屬性就是一個空字符串。當 readyState 為 3，這個屬性返回目前已經接收的響應部分。如果 readyState 為 4，這個屬性保存了完整的響應體。

如果響應包含了為響應體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8。

responseXML

對請求的響應，解析為 XML 並作為 Document 對象返回。

status

由服務器返回的 HTTP 狀態代碼，如 200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

statusText

這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。也就是說，當狀態為 200 的時候它是 "OK"，當狀態為 404 的時候它是 "Not Found"。和 status 屬性一樣，當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

事件句柄

onreadystatechange

每次 readyState 屬性改變的時候調用的事件句柄函數。當 readyState 為 3 時，它也可能調用多次。

方法

abort()

取消當前響應，關閉連接並且結束任何未決的網絡活動。

這個方法把 XMLHttpRequest 對象重置為 readyState 為 0 的狀態，並且取消所有未決的網絡活動。例如，如果請求用了太長時間，而且響應不再必要的時候，可以調用這個方法。

getAllResponseHeaders()

把 HTTP 響應頭部作為未解析的字符串返回。

如果 readyState 小於 3，這個方法返回 null。否則，它返回服務器發送的所有 HTTP 響應的頭部。頭部作為單個的字符串返回，一行一個頭部。每行用換行符 "\r\n" 隔開。

getResponseHeader()

返回指定的 HTTP 響應頭部的值。其參數是要返回的 HTTP 響應頭部的名稱。可以使用任何大小寫來制定這個頭部名字，和響應頭部的比較是不區分大小寫的。

該方法的返回值是指定的 HTTP 響應頭部的值，如果沒有接收到這個頭部或者 readyState 小於 3 則為空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來並返回，使用逗號和空格分隔開各個頭部的值。

open()

初始化 HTTP 請求參數，例如 URL 和 HTTP 方法，但是並不發送請求。

send()

發送 HTTP 請求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求體。

setRequestHeader()

向一個打開但未發送的請求設置或添加一個 HTTP 請求。

 

XMLHttpRequest.open()

初始化 HTTP 請求參數

語法

open(method, url, async, username, password)

method 參數是用於請求的 HTTP 方法。值包括 GET、POST 和 HEAD。

url 參數是請求的主體。大多數瀏覽器實施了一個同源安全策略，並且要求這個 URL 與包含腳本的文本具有相同的主機名和端口。

async 參數指示請求使用應該異步地執行。如果這個參數是 false，請求是同步的，后續對 send() 的調用將阻塞，直到響應完全接收。如果這個參數是 true 或省略，請求是異步的，且通常需要一個 onreadystatechange 事件句柄。

username 和 password 參數是可選的，為 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。

說明

這個方法初始化請求參數以供 send() 方法稍后使用。它把 readyState 設置為 1，刪除之前指定的所有請求頭部，以及之前接收的所有響應頭部，並且把 responseText、responseXML、status 以及 statusText 參數設置為它們的默認值。當 readyState 為 0 的時候（當 XMLHttpRequest 對象剛創建或者 abort() 方法調用后）以及當 readyState 為 4 時（已經接收響應時），調用這個方法是安全的。當針對任何其他狀態調用的時候，open() 方法的行為是為指定的。

除了保存供 send() 方法使用的請求參數，以及重置 XMLHttpRequest 對象以便復用，open() 方法沒有其他的行為。要特別注意，當這個方法調用的時候，實現通常不會打開一個到 Web 服務器的網絡連接。

XMLHttpRequest.send()

發送一個 HTTP 請求

語法

send(body)

如果通過調用 open() 指定的 HTTP 方法是 POST 或 PUT，body 參數指定了請求體，作為一個字符串或者 Document 對象。如果請求體不適必須的話，這個參數就為 null。對於任何其他方法，這個參數是不可用的，應該為 null（有些實現不允許省略該參數）。

說明

這個方法導致一個 HTTP 請求發送。如果之前沒有調用 open()，或者更具體地說，如果 readyState 不是 1，send() 拋出一個異常。否則，它發送一個 HTTP 請求，該請求由以下幾部分組成：

• 之前調用 open() 時指定的 HTTP 方法、URL 以及認證資格（如果有的話）。
• 之前調用 setRequestHeader() 時指定的請求頭部（如果有的話）。
• 傳遞給這個方法的 body 參數。

一旦請求發布了，send() 把 readyState 設置為 2，並觸發 onreadystatechange 事件句柄。

如果之前調用的 open() 參數 async 為 false，這個方法會阻塞並不會返回，直到 readyState 為 4 並且服務器的響應被完全接收。否則，如果 async 參數為 true，或者這個參數省略了，send() 立即返回，並且正如后面所介紹的，服務器響應將在一個后台線程中處理。

如果服務器響應帶有一個 HTTP 重定向，send() 方法或后台線程自動遵從重定向。當所有的 HTTP 響應頭部已經接收，send() 或后台線程把 readyState 設置為 3 並觸發 onreadystatechange 事件句柄。如果響應較長，send() 或后台線程可能在狀態 3 中觸發 onreadystatechange 事件句柄：這可以作為一個下載進度指示器。最后，當響應完成，send() 或后台線程把 readyState 設置為 4，並最后一次觸發事件句柄。

XMLHttpRequest.setRequestHeader()

語法

setRequestHeader(name, value)

name 參數是要設置的頭部的名稱。這個參數不應該包括空白、冒號或換行。

value 參數是頭部的值。這個參數不應該包括換行。

說明

setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應該包含在通過后續 send() 調用而發布的請求中。這個方法只有當 readyState 為 1 的時候才能調用，例如，在調用了 open() 之后，但在調用 send() 之前。

如果帶有指定名稱的頭部已經被指定了，這個頭部的新值就是：之前指定的值，加上逗號、空白以及這個調用指定的值。

如果 open() 調用指定了認證資格，XMLHttpRequest 自動發送一個適當的 Authorization 請求頭部。但是，你可以使用 setRequestHeader() 來添加這個頭部。類似地，如果 Web 服務器已經保存了和傳遞給 open() 的 URL 相關聯的 cookie，適當的 Cookie 或 Cookie2 頭部也自動地包含到請求中。可以通過調用 setRequestHeader() 來把這些 cookie 添加到頭部。XMLHttpRequest 也可以為 User-Agent 頭部提供一個默認值。如果它這么做，你為該頭部指定的任何值都會添加到這個默認值后面。

有些請求頭部由 XMLHttpRequest 自動設置而不是由這個方法設置，以符合 HTTP 協議。這包括如下和代理相關的頭部：

• Host
• Connection
• Keep-Alive
• Accept-charset
• Accept-Encoding
• If-Modified-Since
• If-None-Match
• If-Range
• Range

 

以上資料來自 W3C

 

一 、AJAX 是什么？

　　

AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是一種創建互動式網頁應用的網頁開發技術。

使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地回應用戶動作，並避免了在網絡上發送那些沒有改變過的信息。

Ajax不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣，Ajax應用程序必須在眾多不同的瀏覽器和平台上經過嚴格的測試。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現了另一種輔助程序設計的技術，為那些不支持JavaScript的用戶提供替代功能。

二、核心代碼：

 

 

所謂核心代碼就是提供一個能夠跨瀏覽器的Ajax調用代碼，這部分代碼是后面擴展代碼的必備部分，在這部分代碼中我們提供了一個創建XMLHttpRequest對象並能夠與Web服務器進行異步數據交換。 

 

下面開始：

　　案例  js + java + jsp

先寫個

　　xmlHttpRequestTest.js：

var objXMLHttp;
//進行createXMLHttpRequest對象的創建，由於不同的XMLHttpRequest的支持不同所以根據不同的瀏覽器創建
function createXMLHttpRequest(){
    //對遵守DOM2規范的瀏覽器
    if(window.XMLHttpRequest){
        objXMLHttp = new XMLHttpRequest();
    }
    else{
        //ie 太多了循環下
        var IEXML = ['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
        for(var i=0; i < IEXML.length ; i++){
            try{
                //微軟發布的Active控件
                objXMLHttp = new ActiveXObject(MSXML[i]);break;
            }catch(e){
                alert("創建xmlhttprequesst對象失敗!");
            }
        }
    }
}
//通過POST方式提交
function postSend(){
    //獲取contentvalue
    var contentvalue =  document.getElementById("content").value;
    alert(contentvalue);
    //初始化xmlhttprequest對象
    createXMLHttpRequest();
    //創建url
    var url =  "ajaxServlet";
    //打開與服務器的連接 用post
    objXMLHttp.open("POST", url, true);
    //post需要設置消息頭
    objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //回調函數
    objXMLHttp.onreadystatechange = processResponse;
    //發送設置的參數，形式： param = value
    objXMLHttp.send("value="+contentvalue);
}
//通過get方式請求
function getSend(){
    //獲取value
    var contentvalue = document.getElementById("content").value;
    alert("get:"+contentvalue);
    //初始化xmlhttprequest對象
    createXMLHttpRequest();
    //創建url,get方式采用url拼接傳參數
    var url =  "ajaxServlet?value="+contentvalue;
    //打開與服務器的連接 用post
    objXMLHttp.open("GET", url, true);
    //回調函數
    objXMLHttp.onreadystatechange = processResponse;
    //發送設置的參數，參數已經上面傳
    objXMLHttp.send(null);
}

function processResponse(){
    if(objXMLHttp.readySatae== 1){
        alert("XMLHttpRequest對象開始發送");
    }else if(objXMLHttp.readySatae== 2){
        alert("XMLHttpRequest對象發送完成");
    }else if(objXMLHttp.readySatae== 3){
        alert("XMLHttpRequest對象讀取服務器響應開始");
    }else if(objXMLHttp.readySatae== 4){
        alert("XMLHttpRequest對象讀取服務器響應結束");
        if(onjXMLHttp.status == 200){
            //信息已經成功返回，處理開始
            var headers = objXMLHttp.getAllResponseHeaders();
            aler(headers);
            //得到服務器返回的信息
            var infor = objXMLHttp.responseText;
            alert(infor);
        }else{
            alert("請求的服務器問題");
        }
    }
}

 

注意點:

　　1.creatXMLHttpRequst 對象 根據不同瀏覽器廠商

　　2.post 和 get 的傳值的不同

 

 然后

demo.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>AjaxTest.html</title>
    <script type="text/javascript" src="xmlHttpRequestTest.js" ></script>
  </head>
  <body>
       <input type = "text" name = "content" id = "content" >
     <input type = "button" name = "get" value = "GETButton" onclick = "getSend()">
     <input type = "button" name = "post" value = "POSTButton" onclick = "postSend()">
  </body>
</html>

servlet:

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

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        String value = request.getParameter("value");
        System.out.println(value);
        out.print("得到"+value);
    }

 提交后：
　　中文會亂碼

這樣我在這里說下兩個補充。

一。解決亂碼：

　　　(1).頁面端發出的數據做一次encodeURI，服務器端使用 new String(請求參數.getBytes("iso8859-1"),"utf-8")如：

　　　　　　var url= "AJAXServer?name="+encodeURI($("#userName").val() ) ;

　　　(2)頁面端發出的數據做兩次encodeURI處理， 服務器端用 URLDecoder.decode(請求參數,"utf-8");　　

二。不讓瀏覽器讀取緩存，定個時間戳騙過瀏覽器：

//給URL定個時間戳
function convertURL(url){
    var timestamp=(new Date()).valueOf();
    //接到url
    if(url.indexOf("?")>=0){
        url += "&t="+timestamp;
    }else{
        url += "?t="+timestamp;
    }
    return url;
}

來自 泥沙磚瓦工之筆。

　　夜晚球隊來敲門，只恨小生酣夢中；晨露起身校中行，至處方知賈克斯。

　　　　　　　　　　　　　　　　　　　　　　　　                         　謝謝分享，好的話，右下角輕松點下推薦！！