在AJAX工作流程中，XMLHttpRequest對象扮演著關鍵角色。下麵是AJAX操作的步驟-
- 用戶通過單擊按鈕在web頁麵上提示一個事件。這將創建一個JavaScript函數。例如，JavaScript函數validateUserId()在客戶端觸發事件後被映射為事件處理程序。
- JavaScript調用創建XMLHttpRequest對象。創建XMLHttpRequest對象的語法如下所示—
var ajaxRequest;//使Ajax成為可能的變量!function ajaxFunction() {try {// Opera 8.0+， Firefox, Safari ajaxRequest = new XMLHttpRequest();} catch (e) {// Internet Explorer瀏覽器嚐試{ajaxRequest =新ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){//出錯警報("你的瀏覽器壞了!");返回錯誤;} } } }配置XMLHttpRequest Object的函數processRequest()，然後向服務器發送HTTP請求。語法是這樣的-
validateUserId() {
ajaxFunction ();//這裏processRequest()是回調函數。ajaxRequest。onreadystatechange = processRequest;if (!target) target = document.getElementById("userid");Var url = "validate? "Id =" + escape(target.value);ajaxRequest。open("GET"， url, true);ajaxRequest.send(空); }- 使用PHP, ASP。網, etc., the server interacts with the database and then returns the asynchronous request. For example, let us assume that you enter - Rainbow in the user id box, then the URL will be set to "validate?id = Rainbow"
- 返回的請求包含XML文檔。但是，用戶可以用自己選擇的語言執行服務器端腳本。下麵是處理請求的servlet -
HttpServletRequest請求
拋出IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {response.setContentType("text/xml");響應。setHeader(“cache - control”、“no - cache”);response.getWriter () .write(“真正有效< > < / >有效”);} else {response.setContentType("text/xml");響應。setHeader(“cache - control”、“no - cache”);response.getWriter () .write(“< >有效假> < /有效”);}}調用processRequest()函數從服務器獲取結果並進行處理。根據從web服務器返回的值，它將把變量消息設置為true或false -
函數processRequest() {if (req。readyState == 4) {if (req。狀態== 200){var消息=…;．.．｝HTML DOM得到更新，結果以CSS數據的形式顯示。DOM API通知JavaScript引用頁麵中的某個或多個元素。
其中“userIdMessage”是HTML文檔中出現的元素的ID屬性。JavaScript可以修改元素的屬性，或者改變它的樣式、屬性等。然後在CSS中顯示結果。語法是這樣的-