理論上說
,Ajax
由
HTML
、
JavaScript
?
技術(shù)、
DHTML
和
DOM
組成
.
?
一
,XMLHttpRequest
物件
?
是
ajax
的主要工作對(duì)象是
一個(gè)完整的聲明一個(gè)相容各流覽器的
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
編程中
,
還會(huì)常用到的一個(gè)語句是
document.getElementById("
phone
").value ,
取得值
調(diào)用
request
物件來向伺服器發(fā)請(qǐng)求時(shí)
,js
代碼如下
,
function
?getCustomerInfo()?{
var
?phone?=?
document
.getElementById("
phone
").value;
var
?url?=?"
getCustomer.asp?phone=
"?+?
escape
(phone);
//getCustomer.asp
為請(qǐng)求的頁面
request.
open
("
GET
",?url,?
true
);?
//
這個(gè)地方已將資訊發(fā)到緩存
request.onreadystatechange?=?updatePage;
//
這個(gè)表示
,
請(qǐng)求發(fā)出到伺服器的狀態(tài)回饋
,updatePage
事件為自定義錯(cuò)誤處理
request.send(
null
);
//
發(fā)送
}
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,
發(fā)送的位址錯(cuò)了
,
沒有此頁面
");
????
else
?
if
?(request.
status
?==?403)?{
????
alert
("
Access?denied.
無權(quán)訪問
");
????
else
????
alert
("
Error:?status?code?is?
"?+?request.
status
);
}
附一
:XMLHttpRequest
物件的
open()
方法來完成。該方法有五個(gè)參數(shù)
：
XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
request-type
：
發(fā)送請(qǐng)求的類型。典型的值是
GET
或
POST
，
但也可以發(fā)送
HEAD
請(qǐng)求。
url
：
要連接的
URL
。
asynch
：
如果希望使用非同步連接則為
true
，
否則為
false
。該參數(shù)是可選的，默認(rèn)為
true
。
username
：如果需要身份驗(yàn)證，則可以在此指定用戶名。該可選參數(shù)沒有預(yù)設(shè)值。
password
：如果需要身份驗(yàn)證，則可以在此指定口令。該可選參數(shù)沒有預(yù)設(shè)值。
附二
:
關(guān)於
request.readyState
的狀態(tài)
,
有
0
：請(qǐng)求沒有發(fā)出（在調(diào)用
open()
之前）。
1
：請(qǐng)求已經(jīng)建立但還沒有發(fā)出（調(diào)用
send()
之前）。
一般用不著這之前
2
：請(qǐng)求已經(jīng)發(fā)出正在處理之中（這裏通常可以從回應(yīng)得到內(nèi)容頭部）。
3
：請(qǐng)求已經(jīng)處理，回應(yīng)中通常有部分資料可用，但是伺服器還沒有完成回應(yīng)。
4
：回應(yīng)已完成，可以訪問伺服器回應(yīng)並使用它。
?
若請(qǐng)求正常
,
且頁面有反回的輸出資訊時(shí)
,
將
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
成員
,
對(duì)象
屬性有
onreadystatechange
*
指定當(dāng)
readyState
屬性改變時(shí)的事件處理控制碼。只寫
readyState?
返回當(dāng)前請(qǐng)求的狀態(tài)
，
唯讀
.
responseBody?
將回應(yīng)資訊正文以
unsigned byte
陣列形式返回
.
唯讀
responseStream
以
Ado Stream
物件的形式返回回應(yīng)資訊。唯讀
responseText
將回應(yīng)資訊作為字串返回
.
唯讀
responseXML
將回應(yīng)資訊格式化為
Xml Document
物件並返回
，
唯讀
status
返回當(dāng)前請(qǐng)求的
http
狀態(tài)碼
.
唯讀
statusText?
返回當(dāng)前請(qǐng)求的回應(yīng)行狀態(tài)
，
唯讀
方法
abort
取消當(dāng)前請(qǐng)求
getAllResponseHeaders
獲取回應(yīng)的所有
http
頭
getResponseHeader
從回應(yīng)資訊中獲取指定的
http
頭
open
創(chuàng)建一個(gè)新的
http
請(qǐng)求
，
並指定此請(qǐng)求的方法、
URL
以及驗(yàn)證資訊
(
用戶名
/
密碼
)
send
發(fā)送請(qǐng)求到
http
伺服器並接收回應(yīng)
setRequestHeader
單獨(dú)指定請(qǐng)求的某個(gè)
http
頭
()
事件
無
?
二
, document.createElement("html
標(biāo)籤
"),
創(chuàng)建頁面元素
取得了值了
,
就要顯示出來了
,
通常都是用
js
動(dòng)態(tài)創(chuàng)建元素
,
插入到當(dāng)前頁元素了
2.1
在一個(gè)
table
表格內(nèi)增加行內(nèi)容
,
控制項(xiàng)
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
相應(yīng)增加行的位置
,
放一句
<tbody id="sortList"></tbody>
2.2
相應(yīng)的刪除表行
js
如下
:
function
?deleteSort(id)?{
if
?(id!=null){
var
?rowToDelete?=?document.getElementById(id);
var
?sortList?=?document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
2.3
一個(gè)完整的讀取標(biāo)準(zhǔn)和
RSS
訂閱
xml
文檔的代碼
<script?language="javascript">
var
?XML_Http_Request?=?false;
function
?createXMLHttpRequest(){
//
創(chuàng)建
XMLHttpRequest
對(duì)象
,
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){
//
讀取標(biāo)準(zhǔn)
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)?{
/***********************
處理內(nèi)容部分
*****************************/
//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
竊取動(dòng)態(tài)網(wǎng)頁的某一部分
(
網(wǎng)頁有規(guī)律
).
代碼目標(biāo)是取得證券交易公司網(wǎng)站的交易報(bào)表部分
.
目標(biāo)頁是
:
http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate=2006-10-20
這一部分是
jsp
動(dòng)態(tài)生成的
,
正好表頭以
? <td class="info-head" width="400" valign="top">
開始
,
表尾以
</td></tr>
結(jié)速
,
<script?language="javascript">
window
.onload?=?function()
{
CreateDateSelect();
}
var
?xmlHttp?=?false;
var
?e; //
創(chuàng)建
XMLHTTP
對(duì)象
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;
}
//
調(diào)用遠(yuǎn)程方法
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; //
獲取查詢?nèi)掌?/span>
document
.getElementById("date").innerHTML?=?dateSele?+?"?
開放式基金淨(jìng)值
";
var
?url?=?"http://www.cc168.com.cn/service/FundNetValue.jsp?newEndDate="?+?dateSele; //
構(gòu)造查詢連接字串
xmlHttp.open("GET",?url,?true); //
打開連接
xmlHttp.onreadystatechange?=?updatePage; //
設(shè)置回調(diào)函數(shù)
xmlHttp.send(null); //
發(fā)送請(qǐng)求
??
}
else
{
document
.getElementById("flag").innerHTML?=?"XMLHTTP
對(duì)象創(chuàng)建失敗
";?? }
}
catch
?(e) {
document
.getElementById("flag").innerHTML?=?"
查詢錯(cuò)誤
:
"?+?e;}
}
//
回調(diào)處理函數(shù)
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?=?"
查詢結(jié)束
";
document
.getElementById("outgroup").style.display?=?""; //
送顯
} }
catch
?(e)? {
document
.getElementById("flag").innerHTML?=?"
回調(diào)處理錯(cuò)誤
:
"?+?e;
} }
//
創(chuàng)建日期選擇下拉清單
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>
請(qǐng)選擇交易日期
:</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
編程的主要操作對(duì)象
.
?