Sunspl

理論上說 ,Ajax 由 HTML 、 JavaScript ™ 技術、 DHTML 和 DOM 組成 .

 

一 ,XMLHttpRequest 物件   是 ajax 的主要工作對象是

一個完整的聲明一個相容各流覽器的 XMLHttpRequest 的 js 代碼如下

<script  language =" javascript "  type =" text/javascript ">
var  request;
function  createRequest() {
try  {
request = new XMLHttpRequest();
}   catch  (trymicrosoft) {
try  {
request = new  ActiveXObject (" Msxml2.XMLHTTP ");
}   catch  (othermicrosoft) {
try  {
request = new  ActiveXObject (" Microsoft.XMLHTTP ");
}   catch  (failed) {
request = false;
}
}
}
if  (!request)
alert (" Error initializing XMLHttpRequest!, 此流覽器不支持 ");
}
</script>

 

在 ajax 編程中 , 還會常用到的一個語句是

document.getElementById(" phone ").value , 取得值

調用 request 物件來向伺服器發請求時 ,js 代碼如下 ,

function  getCustomerInfo() {
var  phone =  document .getElementById(" phone ").value;
var  url = " getCustomer.asp?phone= " +  escape (phone); //getCustomer.asp 為請求的頁面
request. open (" GET ", url,  true );  // 這個地方已將資訊發到緩存
request.onreadystatechange = updatePage; // 這個表示 , 請求發出到伺服器的狀態回饋 ,updatePage 事件為自定義錯誤處理
request.send( null ); // 發送
}
function  updatePage() {
 if (xmlHttp.readyState == 1) 
{
document .getElementById("flag").innerHTML = " 正在載入連接物件 ...... ";
}
if  (xmlHttp.readyState == 2) 
{
document .getElementById("flag").innerHTML = " 連接物件載入完畢。 ";
}
if  (xmlHttp.readyState == 3)  {
document .getElementById("flag").innerHTML = " 資料獲取中 ...... ";}
if  (request. readyState  == 4)
        if  (request. status  == 200)
      alert (" Server is done! 伺服器已收到 , ");
     else   if  (request. status  == 404)
     alert (" Request URL does not exist, 發送的位址錯了 , 沒有此頁面 ");
     else   if  (request. status  == 403) {
     alert (" Access denied. 無權訪問 ");
     else
     alert (" Error: status code is  " + request. status );
}

附一 :XMLHttpRequest 物件的 open() 方法來完成。該方法有五個參數 ：

XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

request-type ： 發送請求的類型。典型的值是 GET 或 POST ， 但也可以發送 HEAD 請求。

url ： 要連接的 URL 。

asynch ： 如果希望使用非同步連接則為 true ， 否則為 false 。該參數是可選的，默認為 true 。

username ：如果需要身份驗證，則可以在此指定用戶名。該可選參數沒有預設值。

password ：如果需要身份驗證，則可以在此指定口令。該可選參數沒有預設值。

附二 : 關於 request.readyState 的狀態 , 有

0 ：請求沒有發出（在調用 open() 之前）。

1 ：請求已經建立但還沒有發出（調用 send() 之前）。 一般用不著這之前

2 ：請求已經發出正在處理之中（這裏通常可以從回應得到內容頭部）。

3 ：請求已經處理，回應中通常有部分資料可用，但是伺服器還沒有完成回應。

4 ：回應已完成，可以訪問伺服器回應並使用它。

 

若請求正常 , 且頁面有反回的輸出資訊時 , 將 updatePage 方法處理再改成

 

function   updatePage() {
if   (request.readyState   == 4) {
if   (request.status   == 200) {
var   response = request.responseText.split("|");   // 切割字串
document .getElementById("order").value   = response[0];
document .getElementById("address").innerHTML   =response[1].replace(/ \ n /g, "");
}  else
alert ("status is " + request.status);
}
}

 

 

附三 :

XMLHttpRequest 成員 , 對象

屬性有

onreadystatechange * 指定當 readyState 屬性改變時的事件處理控制碼。只寫

readyState  返回當前請求的狀態 ， 唯讀 .

responseBody  將回應資訊正文以 unsigned byte 陣列形式返回 . 唯讀

responseStream 以 Ado Stream 物件的形式返回回應資訊。唯讀

responseText 將回應資訊作為字串返回 . 唯讀

responseXML 將回應資訊格式化為 Xml Document 物件並返回 ， 唯讀

status 返回當前請求的 http 狀態碼 . 唯讀

statusText  返回當前請求的回應行狀態 ， 唯讀

方法

abort 取消當前請求

getAllResponseHeaders 獲取回應的所有 http 頭

getResponseHeader 從回應資訊中獲取指定的 http 頭

open 創建一個新的 http 請求 ， 並指定此請求的方法、 URL 以及驗證資訊 ( 用戶名 / 密碼 )

send 發送請求到 http 伺服器並接收回應

setRequestHeader 單獨指定請求的某個 http 頭 ()

事件

無

 

二 , document.createElement("html 標籤 "), 創建頁面元素

取得了值了 , 就要顯示出來了 , 通常都是用 js 動態創建元素 , 插入到當前頁元素了

2.1 在一個 table 表格內增加行內容 , 控制項

var   row = document.createElement("tr");
row.setAttribute("id", name);
var