1. 程式人生 > >異步的javascript和XML-AJAX

異步的javascript和XML-AJAX

css 部分 sta response html range 動態性 我們 參考

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 不是新的編程語言,而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下,可以與服務器交換數據並更新部分網頁內容。
AJAX 不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。
。。。。。。。。。。
AJAX 應用
運用XHTML+CSS來表達資訊;
運用JavaScript操作DOM(Document Object Model)來執行動態效果;
運用XML和XSLT操作資料;
運用XMLHttpRequest或新的Fetch API與網頁服務器進行異步資料交換;
註意:AJAX與Flash、Silverlight和Java Applet等RIA技術是有區分的。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX 簡介
AJAX 是一種在無需重新加載整個網頁的情況下,能夠更新部分網頁的技術。
。。。。。。。。。。。
什麽是 AJAX ?
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
http:/ /www.iis7.com/
通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例:新浪微博、Google 地圖、開心網等等。
。。。。。。。。。。。
AJAX是基於現有的Internet標準
AJAX是基於現有的Internet標準,並且聯合使用它們:
XMLHttpRequest 對象 (異步的與服務器交換數據)
JavaScript/DOM (信息顯示/交互)
CSS (給數據定義樣式)
XML (作為轉換數據的格式)
AJAX應用程序與瀏覽器和平臺無關的!
。。。。。。。。。。
Google Suggest
在 2005 年,Google 通過其 Google Suggest 使 AJAX 變得流行起來。
Google Suggest 使用 AJAX 創造出動態性極強的 web 界面:當您在谷歌的搜索框輸入關鍵字時,JavaScript 會把這些字符發送到服務器,然後服務器會返回一個搜索建議的列表。
。。。。。。。。。。
今天就開始使用 AJAX
AJAX 基於已有的標準。這些標準已被大多數開發者使用多年。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX - 創建 XMLHttpRequest 對象
(可擴展超文本傳輸請求(計算機術語))XMLHttpRequest 是 AJAX 的基礎。
所有現代瀏覽器均支持 XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用於在後臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
。。。。。。。。。。。。
創建 XMLHttpRequest 對象
所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法:variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 對象:variable=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器,包括 IE5 和 IE6,請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持,則創建 XMLHttpRequest 對象。如果不支持,則創建 ActiveXObject
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX - 向服務器發送請求請求
XMLHttpRequest 對象用於和服務器交換數據。
。。。。。。。。。。。
向服務器發送請求
如需將請求發送到服務器,我們使用 XMLHttpRequest 對象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。
method:請求的類型;GET 或 POST
url:文件在服務器上的位置
async:true(異步)或 false(同步)
send(string) 將請求發送到服務器。
string:僅用於 POST 請求
。。。。。。。。。。。。。。。。
GET 還是 POST?
與 POST 相比,GET 更簡單也更快,並且在大部分情況下都能用。
然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫)
向服務器發送大量數據(POST 沒有數據量限制)
發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠
。。。。。。。。。。。。
GET 請求
。。。。。。。。。。。。
POST 請求
如果需要像 HTML 表單那樣 POST 數據,請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據
方法 描述
setRequestHeader(header,value) 向請求添加 HTTP 頭。
header: 規定頭的名稱
value: 規定頭的值
。。。。。。。。。。。。。。。。。。。
url - 服務器上的文件
open() 方法的 url 參數是服務器上文件的地址:
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件,比如 .txt 和 .xml,或者服務器腳本文件,比如 .asp 和 .php (在傳回響應之前,能夠在服務器上執行任務)。
。。。。。。。。。。。。。。。。。。
異步 - True 或 False?
AJAX 指的是異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 對象如果要用於 AJAX 的話,其 open() 方法的 async 參數必須設置為 true:
xmlhttp.open("GET","ajax_test.html",true);
對於 web 開發人員來說,發送異步請求是一個巨大的進步。很多在服務器執行的任務都相當費時。AJAX 出現之前,這可能會引起應用程序掛起或停止。
通過 AJAX,JavaScript 無需等待服務器的響應,而是:
在等待服務器響應時執行其他腳本
當響應就緒後對響應進行處理
。。。。。。。。。。。。。。
Async=true
當使用 async=true 時,請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數
。。。。。。。。。。。。。。
Async = false
如需使用 async=false,請將 open() 方法中的第三個參數改為 false:
xmlhttp.open("GET","test1.txt",false);
我們不推薦使用 async=false,但是對於一些小型的請求,也是可以的。
請記住,JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢,應用程序會掛起或停止。
註意:當您使用 async=false 時,請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX - 服務器 響應
。。。。。。。。。
服務器響應
如需獲得來自服務器的響應,請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
屬性 描述
responseText 獲得字符串形式的響應數據。
responseXML 獲得 XML 形式的響應數據。
。。。。。。。。。
responseText 屬性
如果來自服務器的響應並非 XML,請使用 responseText 屬性。
responseText 屬性返回字符串形式的響應
。。。。。。。。。
responseXML 屬性
如果來自服務器的響應是 XML,而且需要作為 XML 對象進行解析,請使用 responseXML 屬性
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX - onreadystatechange 事件
onreadystatechange 事件
當請求被發送到服務器時,我們需要執行一些基於響應的任務。
每當 readyState 改變時,就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是 XMLHttpRequest 對象的三個重要的屬性:
屬性 描述
onreadystatechange 存儲函數(或函數名),每當 readyState 屬性改變時,就會調用該函數。
readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
status 200: "OK"
404: 未找到頁面
在 onreadystatechange 事件中,我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時,表示響應已就緒
註意: onreadystatechange 事件被觸發 4 次(0 - 4), 分別是: 0-1、1-2、2-3、3-4,對應著 readyState 的每個變化。
。。。。。。。。。。。。。
使用回調函數
回調函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務,那麽您應該為創建 XMLHttpRequest 對象編寫一個標準的函數,並為每個 AJAX 任務調用該函數。
該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務(每次調用可能不盡相同)
。。。。。。。。。。。。
服務器常用的狀態碼及其對應的含義如下:
200:服務器響應正常。
304:該資源在上次請求之後沒有任何修改(這通常用於瀏覽器的緩存機制,使用GET請求時尤其需要註意)。
400:無法找到請求的資源。
401:訪問資源的權限不夠。
403:沒有權限訪問資源。
404:需要訪問的資源不存在。
405:需要訪問的資源被禁止。
407:訪問的資源需要代理身份驗證。
414:請求的URL太長。
500:服務器內部錯誤。
。。。。。。。。。。。。
補全狀態碼避免再去搜:
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到,但返回信息為空
205——服務器完成了請求,用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET,但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼,現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求,如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖,請求資源不可訪問
407——類似401,用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的時間內完成請求
409——對當前資源狀態,請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段,在當前請求資源範圍內沒有range指示值,請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值,如果是代理服務器,可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用,有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載,服務器使用另一個關口或服務來響應用戶,等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX ASP/PHP 實例
AJAX 用於創造動態性更強的應用程序。
。。。。。。。。。。。。。
xmlhttp.readyState的值及解釋:
0:請求未初始化(還沒有調用 open())。
1:請求已經建立,但是還沒有發送(還沒有調用 send())。
2:請求已發送,正在處理中(通常現在可以從響應中獲取內容頭)。
3:請求在處理中;通常響應中已有部分數據可用了,但是服務器還沒有完成響應的生成。
4:響應已完成;您可以獲取並使用服務器的響應了。
。。。。。。。。。。。。
xmlhttp.status的值及解釋:
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到,但返回信息為空
205——服務器完成了請求,用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET,但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼,現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求,如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖,請求資源不可訪問
407——類似401,用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態,請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段,在當前請求資源範圍內沒有range指示值,請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值,如果是代理服務器,可能是下一級服務器不能滿足請求
合起來
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用,有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載,服務器使用另一個關口或服務來響應用戶,等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本
1xx:信息響應類,表示接收到請求並且繼續處理
2xx:處理成功響應類,表示動作被成功接收、理解和接受
3xx:重定向響應類,為了完成指定的動作,必須接受進一步處理
4xx:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行
5xx:服務端錯誤,服務器不能正確執行一個正確的請求
xmlhttp.readyState==4 && xmlhttp.status==200的解釋:請求完成並且成功返回
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX Database 實例
AJAX 可用來與數據庫進行動態通信。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
AJAX XML 實例
AJAX 可用來與 XML 文件進行交互式通信。

異步的javascript和XML-AJAX