Ajax

XMLHttpRequest

AJAX引擎只是一個JavaScript的物件而以，也就是XMLHttpRequest物件。

微軟IE5最先支援這個物件，Mozilla 1.0(Netscape 7)，Safari 1.2及Opera都開始支援相容的物件。 值得注意的是XMLHttpRequest物件並不是標準，只是知名的瀏覽器都相繼支援。

Adaptive Path公司的Jesse James Garrett所發表的Ajax:A New Approach to Web Applications，這篇文章替AJAX正名，也揭示了整個AJAX背後的精神與意義。

[範例]

下方程式按照流程 1.按下按鈕觸發事件 2.ajaxSendRequest() 　a.取得XMLHttpRequest物件 　b.設定非同步傳輸完成函式 　c.使用open()函式初始設定

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<script language="Javascript">

// AJAX 物件
var ajax;

// 依據不同的瀏覽器，取得 XMLHttpRequest 物件
function createAJAX() {
　if (window.ActiveXObject) {
　　try {
　　　return new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (e) {
　　　try {
　　　　return new ActiveXObject("Microsoft.XMLHTTP");
　　　} catch (e2) {
　　　　return null;
　　　}
　　}
　} else if (window.XMLHttpRequest) {
　　return new XMLHttpRequest();
　} else {
　　return null;
　}
}

// 非同步傳輸的回應函式，用來處理伺服器回傳的資料
function onRcvData () {
　if (ajax.readyState == 4) {
　　if (ajax.status == 200) {
　　　var content = document.getElementById ('content');
　　　content.innerHTML = ajax.responseText;
　　} else {
　　　alert ("伺服器處理錯誤");
　　}
　} 
}

// 非同步送出資料
function ajaxSendRequest(uri) {
　ajax = createAJAX() ;
　if (!ajax) {
　　alert ('使用不相容 XMLHttpRequest 的瀏覽器');
　　return 0;
　}

　ajax.onreadystatechange = onRcvData;
　ajax.open ("GET", uri, true);
　ajax.send ("");
}

</script>
</head>
<body>
<div id="content"></div><br>
<input type="button" value="查詢" onclick="ajaxSendRequest('hello.php')" >
</body>
</html>

設定非同步傳輸完成函式

ajax.onreadystatechange = onRcvData;
　ajax.open ("GET", uri, true);
　ajax.send ("");

AJAX的精神在於非同步傳輸，固AJAX在送出請求後，並不會去等待回應，因而必須指定一個特定的函式讓XMLHttpRequest物件在接到到伺服器回應時通知JavaScript程式。

在XMLHttpRequest物件中，是透過onreadystatechange來指定這個函式。 當XMLHttpRequest物件收到回應時，會自動呼叫onreadystatechange所指定的函式去處理。

使用open()函式初始設定

open()函式原型如下：

open("method","URL"[,"asyncFlag"[,"userName"[,"password"]]])
  • method參數：POST, GET
  • URL參數：指定所要存取檔案的位置
  • asyncFlag參數：決定採用非同步傳輸或不採用

使用send()傳輸

XMLHttpRequest的open()函式只是用來做初始化及設定參數，真正的資料傳遞是由send()負責。

取得伺服器的回應

function onRcvData () {
　if (ajax.readyState == 4) {
　　if (ajax.status == 200) {
　　　var content = document.getElementById ('content');
　　　content.innerHTML = ajax.responseText;
　　} else {
　　　alert ("伺服器處理錯誤");
　　}
　} 
}

當XMLHttpRequest物件收到伺服器的回應後，會設定下列屬性：

  • readyState:
type desc
0 尚未讀取
1 讀取中
2 已下載完畢
3 資訊交換中
4 處理完畢
  • Status:即HTTP協定的狀態碼
  • responseText:回應內容
  • responseXML:回應內容XML格式

Url編碼

ajax注意編碼轉換

URL有中文或特殊字元請自行encodeURIComponent()，不要依賴瀏覽器自動轉換，以免因XHR處理邏輯不同產生非預期結果。

[解決方法]

var url = "/_api/Query('執行緒')/items?$filter=Category eq  '黑暗'";
var oReq = new XMLHttpRequest();
oReq.open("get", url, true);
oReq.send();

參考

results matching ""

    No results matching ""