Ajax如何使用？本篇文章就跟大家介紹Ajax操作，讓大家了解Ajax的操作步驟。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來總結Ajax的操作步驟，然後在詳細介紹一下每步具體是如何操作的。
1、呼叫客戶端事件
2、建立XMLHttpRequest物件
3、設定XMLHttpRequest物件。
4、XMLHttpRequest物件向Web伺服器發出非同步請求。
5、Web伺服器傳回包含XML文件的結果。
6、XMLHttpRequest物件呼叫callback（）函數並處理結果。
7、更新HTML DOM。
下面我們來一步步實作這些步驟實作Ajax的操作。
呼叫客戶端事件
JavaScript函數作為事件的結果被呼叫。
範例 ：
<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId（）;”>
說明：
JavaScript函數validateUserId（）作為事件處理程序對應到輸入表單欄位上的onkeyup事件，其id設定為「userid」。
建立XMLHttpRequest物件
var ajaxRequest; // 使Ajax成为可能的变量！
function ajaxFunction() {
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer浏览器
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");
return false;
}
}
}}設定XMLHttpRequest物件
在這一步驟中，我們將編寫一個將由客戶端事件觸發的函數，並將註冊一個回呼函數processRequest（）。 function 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(null);
}登入後複製
對Web伺服器進行非同步請求
#原始程式碼可在上面的程式碼中找到。以粗體字體編寫的程式碼負責向Web伺服器發出請求。這都是使用XMLHttpRequest物件ajaxRequest完成的。
function 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(null);
}假設在使用者ID框中輸入了“Zara”，然後在上述請求中，URL將會設為“validate？id = Zara”。
Webserver傳回包含XML文件的結果
#可以使用任何語言實作伺服器端腳本，但其邏輯應如下所示。 1、從客戶端取得請求。
2、解析客戶端的輸入。
3、需要處理。 4、將輸出傳送到客戶端。 如果我們假設你要寫一個servlet，那麼這是一段程式碼。
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}回呼函數呼叫processRequest（）
XMLHttpRequest物件配置為在XMLHttpRequest物件的readyState狀態發生變更時呼叫processRequest（）函數。現在，此函數將從伺服器接收結果，並將執行所需的處理。如下例所示，它根據Webserver的回傳值設定變數訊息的true或false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}更新HTML DOM
1、JavaScript使用DOM API來取得頁面中任何元素的參考。 2、取得元素來引用的建議方法是呼叫。
document.getElementById("userIdMessage"), <!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// 如果消息体元素已简单创建
// 需要替换它，否则追加新元素
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
--><div id = "userIdMessage"><div>
以上是Ajax如何使用？ Ajax的操作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
