摘要:而中引入一個名為的對象實現與相同的功能,和其他瀏覽器則使用。如果是默認值,表示是異步請求。下面的例子中,通過是否為的狀態碼來判斷調用是否是成功的。在檢查了請求的狀態和響應的狀態碼后,就可以接收服務器端發送的數據并處理。
什么是AJAX?
AJAX的意思就是異步的JavaScript和XML。簡而言之,它是使用XMLHttpRequest對象與服務器端通信的腳本語言。它可以發送及接收各種格式的信息,包括JSON、XML、HTML和文本文件。AJAX最為吸引人的就是它的“異步”特性,這意味著AJAX可以無需刷新頁面而與服務器端進行通信。允許你根據用戶事件來更新部分頁面內容。
可以考慮的兩個特性:
向服務器端發送請求,而不用重新加載頁面。
從服務器端接收數據并處理。
第一步:如何發送一個HTTP請求需要通過XMLHttpRequest實現使用JavaScript向服務器端發送一個HTTP請求。而Internet Explorer(IE)中引入一個名為XMLHTTP的ActiveX對象實現與XMLHttpRequest相同的功能,Mozilla、Safari和其他瀏覽器則使用XMLHttpRequest。
如果要兼容各個瀏覽器的話,可以這樣來做:
var httpRequest; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 and older httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
注意:出于演示目的,上面創建XMLHTTP實例是簡化了的代碼。關于更加真實的例子,請參閱本文的第三步。
接下來,當接收到服務器端響應時,需要告訴HTTP請求對象使用JavaScript函數來處理響應。將XMLHttpRequest對象的onreadystatechange屬性設置為該函數的名稱,當請求的狀態變化時,該函數會被調用。
httpRequest.onreadystatechange = nameOfTheFunction;
注意:該函數名沒有傳遞參數的括號和參數,這表示只是分配了一個函數的引用,而不是真正調用該函數。當然,也可以動態定義一個匿名函數,這樣可以實時地處理響應。
httpRequest.onreadystatechange = function(){ // process the server response };
在處理完服務器端的響應之后,我們就可以調用XMLHttpRequest對象的open()和send()方法向服務器端發送請求了。
httpRequest.open("GET", "http://www.example.org/some.file", true); httpRequest.send(null);
open()方法的第一個參數:HTTP請求方法 - GET、POST、HEAD及任何服務器端支持的方法。根據HTTP標準保持大寫,否則一些瀏覽器(例如火狐)可能無法處理請求。關于HTTP請求方法的更多信息,你可以查看W3C規范
open()方法的第二個參數:請求的URL。出于安全考慮,不能調用第三方域的頁面內容。當調用open()方法時,一定確認使用相同域名內的頁面,否則會得到“permission denied”的錯誤提示。常見的錯誤是使用domain.tld訪問網站,卻使用www.domain.tld來請求頁面。如果真的需要發送一個請求到另一個域的話,可以查看HTTP訪問控制
open()方法的第三個參數:可選,是否是異步請求。如果是true(默認值),表示是異步請求。
send()方法的參數表示當請求為POST時,向服務器端發送請求的數據內容。如果發送的是表單數據格式的話,服務器端可以向字符串一樣地解析。
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
向服務器端發送的數據格式也可以是JSON、SOAP等格式。
注意:如果使用POST方式發送數據的話,在調用send()方法前,需要設置請求的MIME類型。:
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");第二步:處理服務器端的響應
當發送請求時,已經定義了一個函數來處理響應。
httpRequest.onreadystatechange = nameOfTheFunction;
這個函數可以做什么呢?首先,該函數需要檢查請求的狀態。如果狀態值為4的話,這表示接收到完成的服務器端響應,可以繼續處理。
if (httpRequest.readyState === 4) { // everything is good, the response is received } else { // still not ready }
readyState的值列表如下:
0 - 未初始化
1 - 正在加載
2 - 加載完畢
3 - 交互中
4 - 完成
接下來需要檢查HTTP服務器端響應的狀態代碼,W3C網站 列出了所有的狀態代碼。下面的例子中,通過是否為200 OK的狀態碼來判斷AJAX調用是否是成功的。
if (httpRequest.status === 200) { // perfect! } else { // there was a problem with the request, // for example the response may contain a 404 (Not Found) // or 500 (Internal Server Error) response code }
在檢查了請求的狀態和響應的狀態碼后,就可以接收服務器端發送的數據并處理。有兩種選項訪問這些數據:
httpRequest.responseText - 將服務器端響應作為文本字符串返回
httpRequest.responseXML - 將響應作為一個XMLDocument對象返回,該對象可以使用JavaScript DOM函數進行遍歷。
注意,上述步驟只有異步請求(open()方法的第三個參數設置為true)時才是有效的。如果使用同步請求的話,是不需要指定函數的。在調用send()方法后就可以訪問到服務器端返回的數據,因為腳本會停止并等待服務器端的響應。
第三步:一個簡單的例子下面來做一個簡單的HTTP請求。JavaScript將請求一個包含“I"m a test.”文本的“test.html”HTML文檔,然后使用alert()方法打印test.html文件的內容。
Make a request
在這個例子中:
在瀏覽器中用戶單擊“Make a request”鏈接;
事件處理器調用makeRequest()方法,通過向該函數傳遞的參數,請求一個處在同一目錄中的“test.html”HTML文件;
請求后,(onreadystatechange)執行 alertContents()方法;
alertContents()方法用于檢查如果正確地接收到響應,利用alert()方法打印“test.html”文件包含的內容。
注意:如果你發送一個請求后返回的是一段XML代碼,而不是一個靜態的XML文件的話,在Internet Explorer中必須設置一些響應頭。如果沒有設置響應頭“Content-Type: application/xml”的話,當試圖訪問XML元素時IE將拋出一個"Object Expected"的JavaScript錯誤。
注意:如果沒有設置頭“Cache-Control: no-cache”的話,瀏覽器將緩存響應并不會重新提交請求。可以添加像時間戳或一個隨機數的不同GET請求參數(參考 bypassing the cache)。
注意:如果httpRequest變量是全局的,makeRequest()方法因為沖突可能會被重寫。將httpRequest變量定義在一個閉包中的話,可以避免AJAX函數的沖突。
注意:如果出現通信錯誤(如服務器端被關閉),當試圖訪問狀態字段時在onreadystatechange的方法中將會拋出一個異常。確保if語句聲明在try..catch語句中。
function alertContents() { try { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { alert(httpRequest.responseText); } else { alert("There was a problem with the request."); } } } catch( e ) { alert("Caught Exception: " + e.description); } }第四步:使用XML進行響應
在前面的例子中,當接收到響應后使用XMLHttpRequest對象的responseText屬性訪問“test.html”文件包含的內容。現在嘗試一下responseXML屬性。
首先,創建一個用于請求的名為“test.xml”的有效XML文檔,代碼如下:
I"m a test.
在腳本中,只需要修改請求行:
onclick="makeRequest("test.xml")">
然后在alertContents()方法中,需要使用如下代碼替換alert(httpRequest.responseText);這一行代碼:
var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName("root").item(0); alert(root_node.firstChild.data);
這段代碼需要由responseXML給予的XMLDocument對象,然后使用DOM方法來訪問XML文檔中的數據。
第五步:處理數據最后,向服務器端發送一些數據并接收響應。這次JavaScript腳本請求一個動態頁面“test.php”,該頁面將根據發送的數據返回一個“computedString”-“Hello, [user data]!”,并使用alert()方法進行打印。
首先,向HTML頁面中添加一個文本框,用戶可以通過該文本框輸入他們的名字:
Make a request
還需要添加一行事件處理器用于從文本框獲取用戶的數據,并將該數據隨著URL傳遞給makeRequest()方法:
document.getElementById("ajaxButton").onclick = function() { var userName = document.getElementById("ajaxTextbox").value; makeRequest("test.php",userName); };
修改makeRequest()方法用于接收用戶數據并發送給服務器端。將請求方式從GET修改為POST,用戶數據作為參數傳遞給httpRequest.send()方法:
function makeRequest(url, userName) { ... httpRequest.onreadystatechange = alertContents; httpRequest.open("POST", url); httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); httpRequest.send("userName=" + encodeURIComponent(userName)); }
alertContents()方法可以向第三步一樣利用alert()方法打印服務器端返回的數據。假設服務器端返回的是computedString和用戶數據的話,如果用戶在文本框中輸入“Jane”服務器端響應的內容會像是這樣:
{"userData":"Jane","computedString":"Hi, Jane!"}
在alertContents()方法中使用這些數據,不僅可以使用alert()方法打印responseText的內容,還可以將其解析并打印computedString屬性內容:
function alertContents() { if (httpRequest.readyState === 4) { if (httpRequest.status === 200) { var response = JSON.parse(httpRequest.responseText); alert(response.computedString); } else { alert("There was a problem with the request."); } } }
注明:
本文翻譯于Mozilla Developer Network
翻譯者:金云龍
原文地址:https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85748.html
摘要:我們將采用方式完成,在提交保存視頻之前,通過方式實現提前于保存視頻之前,保存演員信息。我們再在數據庫中確認一下下面,我們對輸入的用戶姓名進行分離。 我們試著直接在Select中輸入新的演員showImg(https://segmentfault.com/img/bVbcqpZ?w=386&h=276); 點擊保存 showImg(https://segmentfault.com/img...
引 如今,各種互聯網的Web應用程序層出不窮,那么如何快速入門,成長為一個優秀的Web開發工作者呢? 這個問題不容易回答,幾乎所有的培訓機構都不能清晰地解答?! ∷詫τ赪eb開發剛剛入門的菜鳥們,我覺得只有通過去做,去實驗,學會Web開發,可能是學著學著,實驗著實驗著就會了?! ]有人告訴你如何去做。我學習的時候,我的導師只是給了我一堆視頻,一堆文檔。我們從明確一個目標開始:哦,這個階段...
引 如今,各種互聯網的Web應用程序層出不窮,那么如何快速入門,成長為一個優秀的Web開發工作者呢? 這個問題不容易回答,幾乎所有的培訓機構都不能清晰地解答?! ∷詫τ赪eb開發剛剛入門的菜鳥們,我覺得只有通過去做,去實驗,學會Web開發,可能是學著學著,實驗著實驗著就會了?! ]有人告訴你如何去做。我學習的時候,我的導師只是給了我一堆視頻,一堆文檔。我們從明確一個目標開始:哦,這個階段...
閱讀 1289·2023-04-25 19:33
閱讀 1171·2021-10-21 09:39
閱讀 3644·2021-09-09 09:32
閱讀 2614·2019-08-30 10:58
閱讀 1599·2019-08-29 16:17
閱讀 873·2019-08-29 15:29
閱讀 2885·2019-08-26 11:55
閱讀 2657·2019-08-26 10:33