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 編程的主要操作對象 .