您正使用訪客身分瀏覽 (登入)
頁面路徑

Lesson7：JavaScript與伺服器的HTTP要求


第一步：建立可以和伺服器溝通的 HTTP 要求的物件

Internet Explorer 以 ActiveX 物件方式提供 XMLHTTP 類別，Mozilla、Safari 及其他瀏覽器以 XMLHttpRequest 類別支援此 ActiveX 物件中的類別及屬性。

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}


第二步：決定伺服器傳回資料後的處理方式

以 onreadystatechange 這個屬性，處理傳回值，用 Javascript 即時定義函式的方法來定一個新的處理函式

　

http_request.onreadystatechange = function(){
// 做些事
};

傳出 request 時必須提供處理傳回值的函式名稱
0 (還沒開始)
1 (讀取中)
2 (已讀取)
3 (資訊交換中)
4 (一切完成)

if (http_request.readyState == 4) {
// 一切 ok, 繼續解析
} else {
// 還沒完成
}

檢查伺服器傳回的 HTTP 狀態碼

if (http_request.status == 200) {
// 萬事具備
} else {
// 似乎有點問題，或許伺服器傳回了 404 (查無此頁) 或者 500 (內部錯誤) 什麼的
}

 
第三步：決定處理方式之後確實發出 request，需叫用 HTTP request 類別的 open() 及 send() 方法

open() 的第一個參數是 HTTP request 的GET、POST、HEAD 方法。第二個參數是目標 URL，基於安全考量，你不能叫用同網域以外的網頁，如果網域不同，則叫用 open() 時會出現「權限不足，拒絕存取」那類的錯誤。第三個參數決定此 request 是否不同步進行，如果設定為 TRUE 則即使伺服器尚未傳回資料也會繼續執行其餘的程式。

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


send() 的參數在以 POST 發出 request 時可以是任何想傳給伺服器的東西，而資料則以查詢字串的方式列出。

name=value&anothername=othervalue&so=on


如果你想要以 POST 方式傳送資料，則必須先將 MIME 型態改好，否則伺服器不會理你傳過來的資料。

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

　

第四步：簡單範例
sample23.htm這段 JavaScript 會向伺服器要一份裡頭有「I'm a test.」字樣的 XML 文件(sample23.xml)，而後以 alert() 將文件內容列出。 使用者按下Make a request，就會呼叫 makeRequest() 函式，亦傳入參數值 sample23.xml，接著發出 request，而後會將主導權交給 onreadystatechange 指定的 alertContents() 函式 ，alertContents() 檢查回應是否正常。

<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest('sample23.xml')">
Make a request
</span>

簡單範例(續)：檔案載入並與Gmap結合範例
http://gis.nhlue.edu.tw/gmap/sample24.htm  sample24.xml

最後修改: 2013年 12月 18日(三.) 16:49