用ajax命令

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

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

>

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

鑰匙要點

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

>

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

創建一個xmlhttprequest對象。

>分配回調函數以處理HTTP響應。

>

> make（發送）請求。
>

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

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




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


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

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

此函數接收三個參數：

<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

收到響應時要調用的功能

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



請注意如何傳遞回調函數的名稱，而無需任何引號。

>

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

>該功能的另一個功能是處理200以外的響應代碼，如果您想更具體並根據返回的成功/錯誤代碼的類型採取適當的操作，則可以方便。

簡單的示例重新訪問

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

>

<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（）只是介紹：沒有任何狀態，ReadyStates或HTTP請求在任何地方飛來。

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

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

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的基礎知識，並採用可重複使用的要求的方式，讓我們更深入地創建一些可以在現實生活中使用的東西。

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

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

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

以上是用ajax命令的詳細內容。更多資訊請關注PHP中文網其他相關文章！