ajax(Asynchronous JavaScript + XML) 技術學習

什麼是AJAX?

• 不刷新頁面請求數據
• 從伺服器獲取數據

Step 1 – 如何請求

httpRequest.onreadystatechange = nameOfTheFunction;

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

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

•  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。

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

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

Step 2 – 處理伺服器響應

httpRequest.onreadystatechange = nameOfTheFunction;

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

• 0 (uninitialized) or (請求未初始化)
• 1 (loading) or (伺服器建立連接)
• 2 (loaded) or (請求被接收)
• 3 (interactive) or (執行請求)
• 4 (complete) or (request finished and response is ready請求完成響應到位)

• Value	State	Description
  0	UNSENT	Client has 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.

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

• httpRequest.responseText – 返回伺服器響應字元串
• httpRequest.responseXML – 返回伺服器響應XMLDocument 對象 可以傳遞給JavaScript DOM 方法

Step 3 – 一個簡單的例子

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>

• 用戶點擊"Make a request” 按鈕；
• 事件調用 makeRequest() 方法；
• 請求發出，然後 (onreadystatechange)執行傳遞給 alertContents()；
• alertContents() 檢查響應是否 OK, 然後 alert() test.html 文件內容。

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

Step 4 – 使用 XML 響應

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

...
onclick="makeRequest('test.xml')">
...

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

Step 5 – 使用數據返回

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

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

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));
  }

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

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