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 ? cell?=?document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
var ? deleteButton?=?document.createElement("input");
deleteButton.setAttribute("type",?"button");
deleteButton.setAttribute("value",?" 刪除 ");
deleteButton.onclick ? =?function ? ()?{
deleteSort(name);
} ;
cell?=?document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document .getElementById("sortList").appendChild(row);

在 html 頁的 table 相應增加行的位置 , 放一句 <tbody id="sortList"></tbody>

2.2 相應的刪除表行 js 如下 :
function ?deleteSort(id)?{
if ?(id!=null){
var ?rowToDelete?=?document.getElementById(id);
var ?sortList?=?document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}

2.3 一個完整的讀取標準和 RSS 訂閱 xml 文檔的代碼
<script?language="javascript">
var ?XML_Http_Request?=?false;
function ?createXMLHttpRequest(){
// 創建 XMLHttpRequest 對象 ,
XML_Http_Request?=?false;
if (window.XMLHttpRequest){
//for?Mozilla
?XML_Http_Request?=?new?XMLHttpRequest();
if (XML_Http_Request.overrideMimeType){
XML_Http_Request.overrideMimeType("text/xml");
}
}
else ?if(window.ActiveXObject){
?//for?IE
try{
XML_Http_Request?=?new?ActiveXObject("Msxml2.XMLHTTP");
} catch(e){
try{
XML_Http_Request?=?new?ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
}
function ?send_Request(url){
// 讀取標準 xml 訂閱
createXMLHttpRequest();
if (!XML_Http_Request){
window .alert("Cannot?create?XMLHttpRequest?instance!");
return ?false;
}
XML_Http_Request.onreadystatechange?=?processRequest;
XML_Http_Request.open("GET",url,true);
//true--- 非同步 ;false--- 同步
XML_Http_Request.send(null);
}
function ?processRequest(){
if (XML_Http_Request.readyState?==?4)?{
if (XML_Http_Request.status?==?200)?{
/*********************** 處理內容部分 *****************************/
//statements??
?var?results?=?XML_Http_Request.responseXML;
var ?title?=?null;
var ?item?=?null;
var ?link?=?null;
var ?description?=?null;
var ?ccc?=?results.getElementsByTagName("channel");
var ?headtitle?=?ccc[0].getElementsByTagName("title")[0].firstChild.nodeValue;
var ?headlink?=?ccc[0].getElementsByTagName("link")[0].firstChild.nodeValue;
var ?cell?=?document.createElement("div");
cell.innerHTML?=?"<h1><a?href="+headlink+"?target=_blank>"+headtitle+"</a></h1><br>";
document .getElementById("result").appendChild(cell);
var ?items?=?results.getElementsByTagName("item");
for (var?i?=?0;?i?<?items.length;?i++)?{
item?=?items[i];
link =item.getElementsByTagName("link")[0].firstChild.nodeValue;
title ?=?item.getElementsByTagName("title")[0].firstChild.nodeValue;
var ?cell?=?document.createElement("div");
cell.innerHTML?=?"<li><a?href="+link+"?target=_blank>"+title+"</a></li><br>";
document .getElementById("result").appendChild(cell);
}
/*******************************************************************************/
} } }
</script>
</head>
<body?onLoad="javascript:send_Request('http://www.cnblogs.com/jxghost/Rss.aspx');">
<div?id="result"></div>

2.34 利用 XMLHttpRequest 竊取動態網頁的某一部分 ( 網頁有規律 ).

代碼目標是取得證券交易公司網站的交易報表部分 . 目標頁是 : http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=2006-10-20

這一部分是 jsp 動態生成的 , 正好表頭以 ? <td class="info-head" width="400" valign="top"> 開始 , 表尾以 </td></tr> 結速 ,
<script?language="javascript">
window .onload?=?function()
{
CreateDateSelect();
}
var ?xmlHttp?=?false;
var ?e; // 創建 XMLHTTP 對象
function ?getXMLHTTPObj()
{
var ?C?=?null;
try {
C?=?new?ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
C?=?new?ActiveXObject("Microsoft.XMLHTTP");
}
catch (sc) {
????? C?=?null;}
}
if (?!C?&&?typeof?XMLHttpRequest?!=?"undefined"?) { C?=?new?XMLHttpRequest();}
return ?C;
}
// 調用遠程方法
function ?callServer(e)? {
try {
if (?xmlHttp?&&?xmlHttp?.readyState?!=?0?) { xmlHttp.abort();}
xmlHttp?=?getXMLHTTPObj();
if (?xmlHttp?) ?{
document .getElementById("outgroup").style.display?=?"none";
var ?dateSele?=?e.options[e.selectedIndex].value; // 獲取查詢日期
document .getElementById("date").innerHTML?=?dateSele?+?"? 開放式基金淨值 ";
var ?url?=?"http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate="?+?dateSele; // 構造查詢連接字串
xmlHttp.open("GET",?url,?true); // 打開連接
xmlHttp.onreadystatechange?=?updatePage; // 設置回調函數
xmlHttp.send(null); // 發送請求 ?? }
else {
document .getElementById("flag").innerHTML?=?"XMLHTTP 對象創建失敗 ";?? }
}
catch ?(e) {
document .getElementById("flag").innerHTML?=?" 查詢錯誤 : "?+?e;}
}
// 回調處理函數
function ?updatePage()? {
try ?{
? 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 ?(xmlHttp.readyState?==?4)?
?{?? // 以下切割頁面 , 取得所要的部分 html 代碼
var ?response?=?xmlHttp.responseText;
var ?OpenValue?=?response.split("<td?class=\"info-head\"?width=\"400\"?valign=\"top\">")[1];
var ?OpenValue?=?OpenValue.split("</td></tr>")[0];
//alert(OpenValue);
?document.getElementById("out").innerHTML?=?OpenValue;
var ?OpenValue1?=?response.split("<td?class=\"info-head\"?width=\"400\"?valign=\"top\">")[2];
var ?OpenValue1?=?OpenValue1.split("</td></tr>")[0];
document .getElementById("out1").innerHTML?=?OpenValue1;
var ?OpenValue2?=?response.split("<td?class=\"info-head\"?width=\"400\"?valign=\"top\">")[3];
var ?OpenValue2?=?OpenValue2.split("</td></tr>")[0];
document .getElementById("out2").innerHTML?=?OpenValue2;
var ?OpenValue3?=?response.split("<td?class=\"info-head\"?width=\"400\"?valign=\"top\">")[4];
var ?OpenValue3?=?OpenValue3.split("</td></tr>")[0];
document .getElementById("out3").innerHTML?=?OpenValue3;
document .getElementById("flag").innerHTML?=?" 查詢結束 ";
document .getElementById("outgroup").style.display?=?""; // 送顯
} }
catch ?(e)? {
document .getElementById("flag").innerHTML?=?" 回調處理錯誤 : "?+?e;
} }
// 創建日期選擇下拉清單
function ?CreateDateSelect()
{
var ?html?=?[];
for (var?iYear=2005;?iYear<=2006;?iYear?++) ?{
for (?var?iMonth=1;?iMonth<=12;?iMonth?++?) {
for (?var?iDay=1;?iDay<=31;?iDay?++?) {
html[html.length]?=?"<option?value=\""?+?iYear?+?"\-"?+?iMonth?+?"\-"?+?iDay?+?"\">"?+?iYear?+?" 年
?+?iMonth?+?" 月 "?+?iDay?+?" 日 "?+?"</option>";
} }}
document .getElementById("dateSele").innerHTML?=?"<select?name=\"dateSele\"?id=\"dateSele\"?onchange
\"callServer(this);\"> "?+?html.join("")?+?"</select>";
} ?
</script>
</head>
<body>
<form>
<div> 請選擇交易日期 :</div>
<div>
<div?id="dateSele"?align=left>
</div>
<div?id="flag"?align=right></div>
</div>
<div?id="date"></div>
<div?id="outgroup"?style="display:None">
?<div?id="out"></div>
<div?id="out1"></div>
<div?id="out2"></div>
<div?id="out3"></div>
</div>
</form>
</body>

DOM 物件是 Ajax 編程的主要操作對象 .

?