iT邦幫忙

DAY 27
9

XML系列 第 27

[XML]27-建置Client端之XMLHttpReqeust

前面介紹了 Server 端的處理,接著來介紹 Client 端的建置,首先就先看一下最基本也最重要的 XMLHttpRequest 的使用。
最常使用的由 Server 端取得 XML 的方式就是 HTTP,例如在[XML]06-使用網站案例(台北市政府)中提到的,只要用一個 URL 就可以取得 XML 資料(如:http://www.taipei.gov.tw/public/ogdi/blob/hotel.xml),然後接著看要如何使用。

在此篇要介紹的,則是著重在像[XML]08-使用網站案例(AJAX)提到的使用方式,要如何應用於 Browser 的 client 端,達到在「背景」(非同步) load 資料的功能。在這裡只介紹以 javascript 一種程式語言來實作。

底下提供幾個 W3C 的範例程式供參考
例子一:由 Server 下載 XML 供使用

function test(data) {
 // taking care of data
}

function handler() {
 if(this.readyState == 4 && this.status == 200) {
  // so far so good
  if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data)
     // success!
   test(this.responseXML.getElementById('test').firstChild.data);
  else
   test(null);
 } else if (this.readyState == 4 && this.status != 200) {
  // fetched the wrong page or network error...
  test(null);
 }
}

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "unicorn.xml");
client.send();

這是一個很簡單的範例,主要的程式是列 19-22
列 19 先初始一個 XMLHttpRequest 物件
列 20 指定主要負責處理 HTTP 回覆的函式(function handler)
列 21,22 是實際去取得資料的指令(使用 GET 方式)

例子二:上傳資料至 Server

function log(message) {
 var client = new XMLHttpRequest();
 client.open("POST", "/log");
 client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
 client.send(message);
}

這個例子比較像是「單向」的上傳資料,送一筆訊息給 Server,由 Server 存進Log

例子三:檢查 Server 端某一份文件的可用狀態

function fetchStatus(address) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = function() {
  // in case of network errors this might not give reliable results
  if(this.readyState == 4)
   returnStatus(this.status);
 }
 client.open("HEAD", address);
 client.send();
}

由上面三個例子,可以大略看出 XMLHttpRequest 的使用方式,以下再補充一些 XMLHttpRequest 相關的技術規格:

1.readyState
XMLHttpRequest 提供了所謂的「狀態」,供程式判斷目前 XMLHttpRequest 執行的狀態(你可以把他想像是 HTTP 的 Response code),如例一的第 6 列及例三第 5 列。而另一個重點是在例子一的指定主要負責處理 HTTP 回覆的函式也是依據這個 readyState 的變化來啟動,如例一第 20 列及例三第 3 列。
完整的 readyState 有 0 (UNSENT), 1 (OPENED), 2 (HEADERS_RECEIVED), 3 (LOADING), 4 (DONE)。

2.Request Method
XMLHttpRequest 支援 Reqeust Method,最常用的就是 GET 和 POST,如例一的第 21 列及例二的第 3 列。

3.HTTP Header
XMLHttpRequest 也支援 HTTP Header,如例二的第 4 列。除了 Content-Type 以外,其他常見的 Header 參數還包括 Referer、User-Agent……等等。

本系列文章列表
Next : [XML]28-建置 Client 端之 DOM


上一篇
[XML]26-建置之Server端
下一篇
[XML]28-建置 Client 端之 DOM
系列文
XML30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2011-10-24 00:34:43

沙發
antijava大大~~忙忙

我要留言

立即登入留言