您是否想構(gòu)建更具動態(tài)，響應式的，類似臺式的Web應用程序（例如Gmail和Google Map）？然後，這篇文章是給您的！它可以指導您了解Ajax基礎(chǔ)知識，並通過構(gòu)建簡單的Ajax應用程序的過程。

該應用程序被命名為WebConsole，這是一個用於執(zhí)行系統(tǒng)命令的瀏覽器接口，您通常需要shell訪問。也有使用兩個流行的JavaScript庫的AJAX功能的簡短示例-JQuery和Yui。 在2005年首次發(fā)布並最近更新的本文中，我將解釋一個簡單，可重複使用的JavaScript功能，用於製作HTTP請求。然後，我將將該功能應用於創(chuàng)建簡單的應用程序。

儘管有一些Yui和jQuery示例，但本文不是特定Ajax庫的教程。取而代之的是，它旨在為您提供有關(guān)提出HTTP請求的更多動手信息，以便在評估此類庫或決定獨自一人時處於更好的位置。

鑰匙要點

ajax允許通過處理瀏覽器中的HTTP請求來創(chuàng)建類似於Gmail和Google Maps的動態(tài)響應式Web應用程序。

>教程引入了可重複使用的JavaScript函數(shù)，用於製作HTTP請求，該功能可以在各種應用程序中使用，而無需依賴於jQuery或Yui等特定庫。
• 一個簡單的示例演示了製作http請求的基本步驟：創(chuàng)建xmlhttprequest對象，分配回調(diào)函數(shù)並發(fā)送請求。
>文章介紹了WebConsole應用程序，通過瀏覽器接口啟用服務器端命令執(zhí)行，說明了實用的AJAX使用。
• 強調(diào)了安全問題，強調(diào)了限制可執(zhí)行命令和消毒輸入以防止未經(jīng)授權(quán)的服務器訪問的重要性。
>
• >教程涵蓋了高級主題，包括處理XML和JSON等不同的數(shù)據(jù)格式，以及將AJAX與流行的JavaScript庫集成以提高功能。
• 一個簡單的http請求示例
• >讓我們首先修改在JavaScript中提出HTTP請求的流程，並處理響應。這只是刷新您的內(nèi)存的快速示例。有關(guān)所有辛辣的詳細信息，請參見Sitepoint的介紹性文章“ Ajax：與遠程腳本的可用互動”。
有三個基本步驟：

>分配回調(diào)函數(shù)以處理HTTP響應。

> make（發(fā)送）請求。
>

>讓我們來一個示例，在其中我們請求一個簡單的HTML文檔test.html，其中僅包含文本“我是測試”。然後，我們將提醒（）test.html文件的內(nèi)容：

1. 這是這個示例的工作方式：




1. 用戶單擊“製作請求”按鈕。
>以參數(shù)：同一目錄中的HTML文件的名稱調(diào)用MakereQuest（）函數(shù)。在這種情況下，它是test.html。
發(fā)送請求。
2. >
   > onreadyStateChange事件觸發(fā)，執(zhí)行將傳遞給AlertContents（）。
3. > AlertContents（）檢查是否已接收響應，如果可以的話，請werter（）s test.html文件的內(nèi)容。


4. >親自測試示例，然後查看測試文件。

問題
上面的示例效果很好，但是在準備黃金時間之前，我們需要改進一件事。改進是編碼可重複使用的請求函數(shù)，該函數(shù)處理所有無聊和重複的對象創(chuàng)建和請求/響應內(nèi)容，同時將呈現(xiàn)部分留給其他函數(shù)，這些函數(shù)是請求 - 敏銳的，並且僅處理結(jié)果，而不管其源源。
在上面的示例中，我們需要一個全局變量，http_request，這是由makerequest（）和alertcontents（）函數(shù)都可以訪問的，這在可重複使用性方面不好，並且可能會命名碰撞。理想情況下，MakereQuest（）應執(zhí)行請求，並且AlertContents（）應呈現(xiàn)結(jié)果；兩項功能都不需要知道或需要對方。
這是我們可重複使用的請求函數(shù)的代碼：

此函數(shù)接收三個參數(shù)：

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
 ? if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
 ? ? ? http_request = new XMLHttpRequest(); <br>
 ? } else if (window.ActiveXObject) { // IE6 and older <br>
 ? ? ? http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
 ? } <br>
 ? http_request.onreadystatechange = alertContents; <br>
 ? http_request.open('GET', url, true); <br>
 ? http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
 ? if (http_request.readyState == 4) { <br>
 ? ? ? if (http_request.status == 200) { <br>
 ? ? ? ? ? alert(http_request.responseText); <br>
 ? ? ? } else { <br>
 ? ? ? ? ? alert('There was a problem with the request.'); <br>
 ? ? ? } <br>
 ? } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
 ? makeRequest('test.html'); <br>
} <br>
 <br>
</script>

獲得

的URL

收到響應時要調(diào)用的功能

>
標誌如果回調(diào)函數(shù)期望XML文檔（true）或純文本（false，默認）>
• 此功能依賴於兩個JavaScript功能，以便將請求對像很好地包裝和隔離。首先是可以即時定義新功能（稱為匿名函數(shù)）的能力，例如：
>
• http_request.onreadystatechange = function（）{...}
>
另一個技巧是能夠在不預先知道其名稱的情況下調(diào)用回調(diào)功能。例如：



請注意如何傳遞回調(diào)函數(shù)的名稱，而無需任何引號。

>

>您可以通過允許HTTP請求方法以及將作為參數(shù)傳遞給該功能的任何查詢字符串，然後在調(diào)用中使用以打開（）和發(fā)送（）方法來使該功能更加重複使用。這還將允許您除了獲得最初旨在執(zhí)行的郵政請求。

>該功能的另一個功能是處理200以外的響應代碼，如果您想更具體並根據(jù)返回的成功/錯誤代碼的類型採取適當?shù)牟僮鳎瑒t可以方便。

簡單的示例重新訪問

現(xiàn)在，讓我們重做上一個示例，其中test.html文件的內(nèi)容被警報（）ed。這次，通過採用我們閃亮的新可重用請求函數(shù)，所使用的兩個功能的修訂版將更加簡單：

>

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
 ? if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
 ? ? ? http_request = new XMLHttpRequest(); <br>
 ? } else if (window.ActiveXObject) { // IE6 and older <br>
 ? ? ? http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
 ? } <br>
 ? http_request.onreadystatechange = alertContents; <br>
 ? http_request.open('GET', url, true); <br>
 ? http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
 ? if (http_request.readyState == 4) { <br>
 ? ? ? if (http_request.status == 200) { <br>
 ? ? ? ? ? alert(http_request.responseText); <br>
 ? ? ? } else { <br>
 ? ? ? ? ? alert('There was a problem with the request.'); <br>
 ? ? ? } <br>
 ? } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
 ? makeRequest('test.html'); <br>
} <br>
 <br>
</script>

如您所見，AlertContents（）只是介紹：沒有任何狀態(tài)，ReadyStates或HTTP請求在任何地方飛來。

>由於這些功能現(xiàn)在只是單線，因此實際上我們可以完全擺脫它們，然後更改功能調(diào)用。因此，整個示例將成為：

是的，很容易！查看示例和完整源代碼（通過我們的老朋友查看源可用）。

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
 ?var http_request, response, i; <br>
 <br>
 ?var activex_ids = [ <br>
 ? ?'MSXML2.XMLHTTP.3.0', <br>
 ? ?'MSXML2.XMLHTTP', <br>
 ? ?'Microsoft.XMLHTTP' <br>
 ?]; <br>
 <br>
 ?if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
 ? ?http_request = new XMLHttpRequest(); <br>
 ? ?if (http_request.overrideMimeType) { <br>
 ? ? ?http_request.overrideMimeType('text/xml'); <br>
 ? ?} <br>
 ?} else if (window.ActiveXObject) { // IE6 and older <br>
 ? ?for (i = 0; i < activex_ids.length; i++) { <br>
 ? ? ?try { <br>
 ? ? ? ?http_request = new ActiveXObject(activex_ids[i]); <br>
 ? ? ?} catch (e) {} <br>
 ? ?} <br>
 ?} <br>
 <br>
 ?if (!http_request) { <br>
 ? ?alert('Unfortunately your browser doesn't support this feature.'); <br>
 ? ?return false; <br>
 ?} <br>
 <br>
 ?http_request.onreadystatechange = function() { <br>
 ? ?if (http_request.readyState !== 4) { <br>
 ? ? ? ?// not ready yet <br>
 ? ? ? ?return; <br>
 ? ?} <br>
 ? ?if (http_request.status !== 200) { <br>
 ? ? ?// ready, but not OK <br>
 ? ? ?alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
 ? ? ?return; <br>
 ? ?} <br>
 ? ?if (return_xml) { <br>
 ? ? ?response = http_request.responseXML; <br>
 ? ?} else { <br>
 ? ? ?response = http_request.responseText; <br>
 ? ?} <br>
 ? ?// invoke the callback <br>
 ? ?callback_function(response); <br>
 ?}; <br>
 <br>
 ?http_request.open('GET', url, true); <br>
 ?http_request.send(null); <br>
}

>

我們的項目：WebConsole應用程序

了解Ajax的基礎(chǔ)知識，並採用可重複使用的要求的方式，讓我們更深入地創(chuàng)建一些可以在現(xiàn)實生活中使用的東西。

我們將創(chuàng)建的應用程序允許您在Web服務器上執(zhí)行任何Shell命令，無論是基於Windows還是Linux。我們甚至會付出一些CSS的努力，以使應用程序更像是控制臺窗口。 在接口方面，我們有一個可滾動的

，其中包含到目前為止執(zhí)行的命令的結(jié)果，一個在其中鍵入要執(zhí)行的命令。他們都有黑色背景和灰色快遞字體。這是一個屏幕截圖。
html

這是應用程序的HTML部分： 就是這樣：通過執(zhí)行命令的結(jié)果以及我們可以輸入命令的
進行更新的
。這是一個不錯的，乾淨的界面，沒有

以上是用ajax命令的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！