JavaScript 用戶端JavaScript之指令碼化HTTP(通過XMLHttpRequest)

標籤：

XMLHttpRequest對象的設計目的是為了處理由普通文本或XML組成的響應；但是，一個響應也可能是另外一種類型，如果使用者代理程式(UA)支援這種內容類型的話。 

大多數瀏覽的用戶端JavaScript都包含此功能。

HTTP協議 規定了Web瀏覽器如何從Web服務要求文檔，如何向Web伺服器傳送表單內容，以及如何響應這些請求和傳遞。Web瀏覽器處理了很多HTTP（通常HTTP並不在指令碼的控制之下）1、使用者點擊一個連結2、提交一個表單3、輸入一個URL 通常JavaScript代碼可能指令碼化HTTP，但並不總是如此。如設定一個對象的Window.Location 下載映像                <img>下載文檔                <iframe>下載指令碼執行         <script> src屬性 當指令碼把這些屬性設定為一個URL，就會啟動一個HTTP GET 請求來下載該URL的內容。因此可以將資訊編碼到一個映像的URL查詢字串部分，並設定一個src屬性，從而把資訊傳送給Web伺服器。(註：web伺服器必須實際返回一個映像(任意大小 如：1px*1px 透明圖)所以使用以上方法，對HTTP進行指令碼化是可能的，但可移植性差。    在現代瀏覽器中，XMLHttpRequest對象得到很好的支援，並且提供對HTTP協議的完全的訪問，    包括做出POST和HEDAD請求以及普通的GET請求的能力。可同步或非同步地返回Web伺服器的請求，並且能夠以文本或者一個DOM文檔的形式返回內容。（可接收任何形式的文字文件）XMLHttpRequest對象是名為Ajax的Web應用程式架構的一項關鍵功能。 20.1 使用XMLHttpRequest(新版本為XMLHttpRequest 2）使用其指令碼化HTTP有3個步驟1、建立一個XMLHttpRequest對象2、指定HTTP請求並向一個Web伺服器提交3、同步地或非同步地獲得伺服器的響應 如：var request=new XMLHttpRequest();使用open()方法來指定該請求的方法和URLrequest.open("GET",url,false);方式中有 GET POST HEAD URL    web伺服器的URL  最後一個參數是指定是否為非同步，true 非同步 （預設值）,false 同步   除了以上3個選擇性參數，還有第4個和第5個參數 選擇性參數，名字和密碼當從一個需要授權的伺服器擷取一個URL的時候需要用到這兩個參數。 open()     並不實際地向Web伺服器發送請求，它只是儲存自己的參數，等到稍後實際發送請求的時候再使用。在發送請求之前，必須設定所有所需的要求標頭部。如：request.setRequestHeader("user-Agent","XMLHttpRequest");              setRequestHeader("Accept-language","en");              setRequestHeader(‘‘‘‘);註：Web瀏覽器自動為建立的請求添加相關的cookie，只有當想要向伺服器發送一個假的cookie的時候，才需要顯式地設定 "cookie" 頭部 最後，把請求發送給伺服器。request.send(null)send()函數的參數是請求體。對於 HTTP Get請求，參數一般總是null(是否可有不為null參數體） 註：XMLHttpRequest是一個用戶端對象，它的方法不允許像核心JavaScript函數那樣省略參數(至少Firefox是如此） 20.1.3 擷取一個同步響應    send()並不返回一個狀態碼。一旦它返回，可以使用請求對象的status屬性來檢查伺服器返回的HTTP狀態碼。這個代碼可能值在HTTP協議中定義了狀態200:請求成功狀態404：請求的URL不存在等。可查閱相關文檔。以下代碼緊接在send()函數後。if(request.status==200){    alert(request.responseText);}else{}註：XMLHttpRequest對象也提供了對返回的HTTP頭部的訪問getResponseHeader() 20.1.4 處理一個同步響應 來自伺服器的非同步響應就像是來自使用者的非同步滑鼠點擊：當它發生時，需要被通知。這通過一個事件控制代碼來實現在onreadystatechange屬性上控制，只要readyState改變，事件控制代碼函數就被調用。readyState是指定一個HTTP請求的狀態的整數值。 表20-1  XMLHttpRequest的readyState的值readyState                        含義0                                    open()還沒調用1                                    open()已經調用，但是send()還沒有調用2                                    send()已經調用，但伺服器還沒有響應3                                    正在從伺服器接收資料。readyState  3 在Firefox和Internet Explorer中略有不同。 註：和用戶端JavaScript中的大多數事件相反，沒有事件對象傳遞給onreadystatechange控制代碼，且XMLHttpRequest對象也不會作為參數傳遞給事件控制代碼，因此要在控制代碼函數內部直接存取XMLHttpRequest聲明的對象(在其有效範圍內） 如：request.onreadystatechange=function(){    if(request.readyState==4)        {            if(request.status==200                {                    alert(requst.responseText);                }        }} 註：1、Firefox在較大 的下載過程中，會在readyState==3中多次調用onreadystatechange控制代碼，以提供下載過程反饋2、IE只有當readyState實際變化時才調用，且responseText在這一狀態中查詢不到。 20.1.5 XMLHttpRequest 的安全性作為同源安全性原則的一部分， XMLHttpRequest對象可以只向某些伺服器發布HTTP請求。而使用該對象的文檔是通過這些伺服器下載，但是如果需要也可以繞過它，通過使用一個伺服器端的指令碼作為代理來接收某些異地URL的內容。註：XMLHttpRequest安全限制有一個非常重要的意義：做出HTTP請求且不會與其他的URL樣式一起工作。如不會和使用file://協議的URL一起工作。這意味著不能從自己的本地檔案系統測試 XMLHttpRequest指令碼。（必須放入Web伺服器中） HTTP POST使用POST請求，資料在請求體中傳遞給伺服器，而不是編碼到URL之中request.send();疑問：1 用戶端請求體的格式  2、伺服器返回的資料格式   20.2.5XMLHttpRequest對象的一個缺點就是沒有提供指定的一個請求的到期值的方法，對於 同步的請求來說，如果伺服器掛起，Web瀏覽器在send()方法中，保持阻塞，並且所有處理都被凍結起來。（但非同步請求一般不會，但還是設定到期較好)解決辦法：使用setTimeout()來設定到期值在setTimeout指定的處理函數中調用XMLHttpRequest.abort()方法來取消請求。  20.3 AJAXAjax應用程式的關鍵特徵就是，它使用指令碼化的HTTP來與一個Web伺服器通訊而沒有導致頁面重載。 20.3.2 單頁面應用程式     只需要一個頁面載入的JavaScript驅動的Web應用程式。    使用XMLHttpRequest對象和Ajax架構實現。 註：沿著這種思路設計的Web應用程式可能含有少量的JavaScript啟動代碼。（如只是一個開始啟動的動畫螢幕）    一旦開始，啟動代碼會使用一個XMLHttpReuqest對象來下載應用程式的實際的代碼，然後這些代碼和eval()方法一起執行。這樣JavaScript代碼就能接管控制，載入XMLHttpRequest所需的資料並使用DOM將這些資料以DHTML的形式提交以顯示給使用者。 20.3.3 遠程指令碼調用 RPC    比Ajax早4年出現，基本思想相同，設定iframe的src=如果Web伺服器返回一個其中包含<script>標記的HTML文檔，該標記包含的JavaScript會被瀏覽器執行。並且可以調用在包含在該iframe的視窗中定義的方法 。通過這種形式，伺服器可以以JavaScript的形式把非常直接的命令發送給它的客戶機 iframe跨越訪問以及window.parent的訪問 變數的尋找方式 獨立的全域執行環境 20.3.4 關於Ajax的警告 在設計Ajax應用程式時需要注意的3個問題1、可視化反饋2、URL有關3、使用Ajax載入，內容變化後，地址工具列中的URL始終不變（前進、後退按鈕失效） 這是合理的，因為是單頁面應用程式。 20.4 使用<script>標記指令碼 化HTTP設定src 並設定src值中?後的參數動態。 

JavaScript 用戶端JavaScript之指令碼化HTTP(通過XMLHttpRequest)