Java Web基礎：第二十講 Ajax概述

本文內容摘自：《Java Web開發教程——入門與提高篇（JSP+Servlet）》

AJAX是Asynchronous JavaScript and XML的縮寫，涉及JavaScript指令碼、XHTML和CSS、DOM、XML和XSTL等技術。l         XHTML與CSS實現資料資訊的統一化和標準化顯示；l         使用DOM實現瀏覽器端豐富的動態顯示效果以及與伺服器的互動；l         使用XML和XSTL進行瀏覽器和伺服器端資料資訊交換和處理；l         使用XMLHttpRequest對象進行瀏覽器和伺服器端非同步資料讀取；l         使用JavaScript指令碼實現對所有資料進一步處理。AJAX的核心工作過程如下：1.         對象初始化，主要是建立XMLHttpRequest對象，XMLHttpRequest對象是AJAX技術中非常核心的一個對象，負責請求的設定、發送。2.         發送請求，設定回應程式法、請求所需要的資料，然後發送請求。3.         伺服器接收請求並進行處理，通常由Servlet接收請求，然後調用相應的業務方法來處理，之後對使用者響應。4.         用戶端接響應，接收到響應之後調用之前設定的回應程式法。5.         回應程式法根據響應資料修改用戶端頁面內容。採用AJAX技術之後，用戶端與伺服器端的互動過程發送了變化。在沒有採用AJAX技術之前，使用者通過設定<form>表單的action屬性，然後通過提交按鈕來提交請求，或者在JavaScript代碼中通過表單的submit方法來提交。AJAX基本上就是在Web 表單和伺服器之間增加了 JavaScript 技術和 XMLHttpRequest 對象。當使用者填寫表單時，資料發送給一些 JavaScript 代碼然後通過XMLHttpRequest對象發送，而不是直接發送給伺服器。在這個過程中，使用者螢幕上的表單不會閃爍、消失或延遲。JavaScript 代碼在幕後發送請求，使用者甚至不知道請求的發出。更好的是，請求是非同步發送的，就是說 JavaScript 代碼（和使用者）不用等待伺服器的響應。因此使用者可以繼續輸入資料、滾動螢幕和使用應用程式。然後，伺服器將資料返回 ，會調用請求時候定義的接收方法，該方法對這些資料進行處理，可以更新表單資料，讓人感覺應用程式是在本地執行的，表單沒有提交，頁面只是局部重新整理。響應代碼還可以對接收到的資料執行某種計算，或者再次發送請求。處理代碼主要採用JavaScript技術，而與伺服器的互動主要是通過XMLHttpRequest對象完成的。XMLHttpRequest對象的屬性以及作用如表4.2所示。表4.2  XMLHttpRequest屬性

屬性	作用
Onreadystatechange	狀態改變的事件觸發程序
readyState	對象狀態0表示未初始化1表示讀取中2表示已讀取3表示互動中4表示完成
responseText	伺服器處理序返回資料的文本，表示為一個字串
responseXML	伺服器處理序返回資料的相容DOM的XML文檔對象
Status	伺服器返回的狀態代碼，如：404（檔案未找到）。200（成功）。
statusText	伺服器返回的狀態文本資訊（OK或者Not Found等）

XMLHttpRequest對象的主要方法及作用如表4.3所示。表4.3 XMLHttpRequest對象的方法

方法	功能
abort()	停止當前請求
getAllResponseHeaders()	把HTTP請求的所有響應首部作為鍵/值對返回
getResponseHeader(“headerLabel”)	返回指定首部的字串的值
open(“method”,”URL””[,asyncFlag[,”username”[,”password”]]]	串連對伺服器的訪問。其中method參數可以使用GET、POST及PUT，URL參數既可以使用絕對位址，也可以使用相對位址，asyncFlag參數用於指定在進行調用時是採用同步方式還是非同步方式，預設值是true，即採用非同步方式。如果參數值為false，則採用同步方式實現和伺服器的互動，即等待伺服器返迴響應，username指定串連時候的使用者名稱，password指出密碼。
send(content)	向伺服器發送請求，可以使用的參數包括DOM對象、字串等等。
setRequestHeader(“label”,“value”)	設定header並和請求一起發送，即指定首部設定為提供的值，注意在設定首部前必須先使用open()方法。第一個參數為首部的名稱，第二個參數為首部中的值。

 

上一講： 第十九講 JavaScript處理（二）下一講： 第二十一講 Ajax互動的基本過程李緒成 CSDN Blog：http://blog.csdn.net/javaeeteacher邀請您為好友：http://student.csdn.net/invite.php?u=124362&c=7be8ba2b6f3b6cc5