什麼是ajax？關於ajax的具體介紹

Ajax 本身本來不是一門技術，而是在2005年由Jesse James Garrett首創的描述為一個「新」途徑來應用許多已存在的技術，包括：HTML 或 XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 和最重要的 XMLHttpRequest object。

當把這些技術結合到ajax模型裡的時候，web app可以快速地，逐漸地更新用戶界面來取代以前的刷新整個瀏覽界面，這使得應用更快和用戶使用體驗更好。

 

儘管x在ajax裡面代表xml，json由於其更輕和是javascript的一部分等優點而被更多的使用。 ajax模型裡面的json和xml都是用來包裝資料資訊的。

 

什麼是AJAX?

AJAX 代表 Asynchronous JavaScript And XML. 簡而言之, 他是用 XMLHttpRequestobject 來和伺服器交流的方式. 它可以以不同的方式. 它可以以不同的方式方式傳送和接收訊息, 包括JSON, XML, HTML, 和text檔案. AJAX最有吸引力的特性是"非同步", 這意味著它可以在不刷新頁面的情況下同伺服器交流，交換資料更新頁面。

 

ajax的主要兩個主要功能:

• #不刷新頁面請求資料

• ##從伺服器取得資料

 

Step 1 – 如何請求

為了用javascript請求伺服器，我們要實例化一個有必要功能的物件。這是XMLHttpRequest的來源。起初Internet Explorer實作了一個被稱為XMLHTTP的ActiveX物件。 之後，Mozilla， Safari，和其他瀏覽器廠商陸續實作了XMLHttpRequest物件來支援這個方法和類似Microsof的ActiveX物件功能。同時，Microsoft也實作了XMLHttpRequest。

 

 

// Old compatibility code, no longer needed.

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ .. .

    httpRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE 6 and older

    httpRequest = new ActiveXObject("Microsoft.XMLObject("Microsoft.XMLMTP ");

}

 

注意：上述程式碼只做解釋作用，只是建立了XMLHttp的實例。可以跳到step 3去看更實用的範例。

 

請求之後，我們需要接收請求結果。在這個階段，我們需要告訴XMLHttp請求物件來處理回應的JavaScript方法，透過配置他的onreadystatechangeproperty方法，如下：

httpRequest.onreadystatechange = nameOfTheFunction;

或

<code>httpRequest.onreadystatechange = function(){<br>    // Process the server response here.<br>};</code>

在宣告怎麼接受回應之後，我們需要發起請求，透過呼叫HTTP請求物件的 open() 和 send() 方法，如下:

<code>httpRequest.open('GET', 'http://www.example.org/some.file', true);<br>httpRequest.send();</code>

•  open() 的第一個參數是HTTP 請求的方法– GET, POST , HEAD, 或其他伺服器支援的方法。方法名稱全部大寫是http標準，不然有些瀏覽器（例如​​：Firefox）可能會不發器請求。 點選 W3C specs 取得更多關於http請求方法的資訊。

• 第二個參數是要請求的url。從安全性方面考慮，預設不能跨域請求url。確保所有頁面在同一個網域下，不然呼叫open()方法，你會得到 "permission denied」 錯誤。 一個常見的跨域是你網站的網域是 domain.tld,但是嘗試用 www.domain.tld存取頁面。如果真的想跨域請求，請參閱 HTTP access control。

• 可選的第三個參數設定這個請求是同步還是非同步的。如果是true (預設值), JavaScript 會繼續執行，使用者操作頁面的同時，伺服器回傳資料。這是 AJAX的A。

send()方法的參數可以是你想傳送到伺服器的任意資料（POST）。表單資料必須是伺服器能解析的形式，例如查詢字串：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或其他形式，例如 multipart/form-data，JSON， XML， 等等。

注意如果你想POST數據，你可能要設定請求的MIME type。例如我們把下面程式碼放在呼叫send()之前，來把表單資料當查詢資料發送：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Step 2 – 處理伺服器回應

請求的時候，我們已經提供了處理回應的JavaScript方法：

httpRequest.onreadystatechange = nameOfTheFunction;

這個方法做什麼？首先，我們需要檢查請求狀態。如果張台值為XMLHttpRequest.DONE (4)，表示已經接受了所有伺服器的響。

<code>if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>    // Everything is good, the response was received.<br>} else {<br>    // Not ready yet.<br>}</code>

 readyState 全部可能的值，可以在 XMLHTTPRequest.readyState 查看，如下:

• 0 (uninitialized) 或 (請求未初始化)

• #1 (loading) 或 (伺服器建立連線)

• 2 (loaded) or (請求被接收)

• 3 (interactive) or (執行請求)

• 4 (complete)或 (request finished and response is ready請求完成回應到位)

• Value		#Description
  0	UNSENT	Client 有 been created. open() not called yet.
  ##1	OPENED	open() has been called.
  2	HEADERS_RECEIVED	#send() has been called, and headers and status are available.
  #3	LOADING	Downloading; responseText holds partial data.

  ############################################################################################################################################ #####4######DONE######The operation is complete.############

(Source)

接下来，检查HTTP响应的 response code 。查看 W3C看到可能的值。下面例子我们用response code是不是等于200来判断ajax请求是否成功。

<code>if (httpRequest.status === 200) {<br>    // Perfect!<br>} else {<br>    // There was a problem with the request.<br>    // For example, the response may have a 404 (Not Found)<br>    // or 500 (Internal Server Error) response code.<br>}</code>

检查完响应值后。我们可以随意处理服务器返回的数据，有两个选择获得这些数据：

• httpRequest.responseText – 返回服务器响应字符串

• httpRequest.responseXML – 返回服务器响应XMLDocument 对象 可以传递给JavaScript DOM 方法

上面的代码只有在异步的情况下有效（open() 的第三个参数设置为true）。如果你用同步请求，就没必要指定一个方法。但是我们不鼓励使用同步请求，因为同步会导致极差的用户体验。

Step 3 – 一个简单的例子

我们把上面的放在一起合成一个简单的HTTP请求。我们的JavaScript 将请求一个HTML 文档， test.html, 包含一个字符串 "I'm a test."然后我们alert()响应内容。这个例子使用普通的JavaScript — 没有引入jQuery， HTML, XML 和 PHP 文件应该放在同一级目录下。

<code><button id="ajaxButton" type="button">Make a request</button><br><br><script><br>(function() {<br>  var httpRequest;<br>  document.getElementById("ajaxButton").addEventListener('click', makeRequest);<br><br>  function makeRequest() {<br>    httpRequest = new XMLHttpRequest();<br><br>    if (!httpRequest) {<br>      alert('Giving up :( Cannot create an XMLHTTP instance');<br>      return false;<br>    }<br>    httpRequest.onreadystatechange = alertContents;<br>    httpRequest.open('GET', 'test.html');<br>    httpRequest.send();<br>  }<br><br>  function alertContents() {<br>    if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>      if (httpRequest.status === 200) {<br>        alert(httpRequest.responseText);<br>      } else {<br>        alert('There was a problem with the request.');<br>      }<br>    }<br>  }<br>})();<br></script></code>

在这个例子里：

• 用户点击"Make a request” 按钮；

• 事件调用 makeRequest() 方法；

• 请求发出，然后 (onreadystatechange)执行传递给 alertContents()；

• alertContents() 检查响应是否 OK, 然后 alert() test.html 文件内容。

 

 

注意 1: 如果服务器返回XML，而不是静态XML文件，你必须设置response headers 来兼容i.e.。如果你不设置headerContent-Type: application/xml, IE 将会在你尝试获取 XML 元素之后抛出一个JavaScript "Object Expected" 错误 。

 

 

注意 2: 如果你不设置header Cache-Control: no-cache 浏览器将会缓存响应不再次提交请求，很难debug。你可以添加永远不一样的GET 参数，例如 timestamp 或者 随机数 (查看 bypassing the cache)

 

注意 3: 如果 httpRequest 变量是全局的，混杂调用 makeRequest()会覆盖各自的请求,导致一个竞争的状态。在一个closure 里声明 httpRequest 本地变量 来避免这个问题。

在发生通信错误(如服务器崩溃)、onreadystatechange方法会抛出一个异常,当访问响应状态。为了缓解这个问题,你可以用ry…catch包装你的if...then 语句:

<code>function alertContents() {<br>  try {<br>    if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>      if (httpRequest.status === 200) {<br>        alert(httpRequest.responseText);<br>      } else {<br>        alert('There was a problem with the request.');<br>      }<br>    }<br>  }<br>  catch( e ) {<br>    alert('Caught Exception: ' + e.description);<br>  }<br>}</code>

Step 4 – 使用 XML 响应

在前面的例子里，在获取到响应之后，我们用request 对象responseText 属性获得 test.html 文件内容。现在让我们尝试获取responseXML 属性。

首先，让我们创建一个有效的XML文档，留着待会我们请求。(test.xml)如下:

<code><?xml version="1.0" ?><br><root><br>    I'm a test.<br></root></code>

在这个脚本里，我们只要修改请求行为：

<code>...<br>onclick="makeRequest('test.xml')"><br>...</code>

然后在alertContents()里，我们需要把 alert(httpRequest.responseText); 换为：

<code>var xmldoc = httpRequest.responseXML;<br>var root_node = xmldoc.getElementsByTagName('root').item(0);<br>alert(root_node.firstChild.data);</code>

这里获得了responseXML的XMLDocument，然后用 DOM 方法来获得包含在XML文档里面的内容。你可以在here查看test.xml，在here查看修改后的脚本。

Step 5 – 使用数据返回

最后，让我们来发送一些数据到服务器，然后获得响应。我们的JavaScript这次将会请求一个动态页面，test.php将会获取我们发送的数据然后返回一个计算后的字符串 - "Hello, [user data]!"，然后我们alert()出来。

首先我们加一个文本框到HTML，用户可以输入他们的姓名：

<code><label>Your name: <br>  <input type="text" id="ajaxTextbox" /><br></label><br><span id="ajaxButton" style="cursor: pointer; text-decoration: underline"><br>  Make a request<br></span></code>

我们也给事件处理方法里面加一行获取文本框内容，并把它和服务器端脚本的url一起传递给 makeRequest() 方法：

<code>  document.getElementById("ajaxButton").onclick = function() { <br>      var userName = document.getElementById("ajaxTextbox").value;<br>      makeRequest('test.php',userName); <br>  };</code>

我们需要修改makeRequest()方法来接受用户数据并且传递到服务端。我们将把方法从 GET 改为 POST，把我们的数据包装成参数放到httpRequest.send()：

<code>function makeRequest(url, userName) {<br><br>    ...<br><br>    httpRequest.onreadystatechange = alertContents;<br>    httpRequest.open('POST', url);<br>    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');<br>    httpRequest.send('userName=' + encodeURIComponent(userName));<br>  }</code>

如果服务端只返回一个字符串， alertContents() 方法可以和Step 3 一样。然而，服务端不仅返回计算后的字符串，还返回了原来的用户名。所以如果我们在输入框里面输入 “Jane”，服务端的返回将会像这样：

{"userData":"Jane","computedString":"Hi, Jane!"}

要在alertContents()使用数据，我们不能直接alert responseText, 我们必须转换数据然后 alert computedString属性:

<code>function alertContents() {<br>  if (httpRequest.readyState === XMLHttpRequest.DONE) {<br>    if (httpRequest.status === 200) {<br>      var response = JSON.parse(httpRequest.responseText);<br>      alert(response.computedString);<br>    } else {<br>      alert('There was a problem with the request.');<br>    }<br>  }<br>}</code>

test.php 文件如下：

<code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';<br>$computedString = "Hi, " . $name;<br>$array = ['userName' => $name, 'computedString' => $computedString];<br>echo json_encode($array);</code>

查看更多DOM方法, 请查看 Mozilla's DOM implementation 文档。

以上是什麼是ajax？關於ajax的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！