posts - 66, comments - 40, trackbacks - 0

??????我認(rèn)為ajax簡(jiǎn)單的講就是客戶端通過(guò)javascript腳本獲取服務(wù)器端的文本，通過(guò)解析返回值，更新部分的網(wǎng)頁(yè)內(nèi)容。
下面結(jié)合一個(gè)獲取QQ天氣預(yù)報(bào)網(wǎng)頁(yè)，并且對(duì)返回值進(jìn)行處理的例子進(jìn)行一下講解。
行數(shù)：解釋。
14：點(diǎn)擊按鈕開(kāi)始獲取。
29：顯示右上角的“正在加載...”的小區(qū)域（仿造gmail）。
30：創(chuàng)建XMLHTTP，IE的方式，其它的瀏覽器創(chuàng)建方式不同。
31：XMLHTTP狀態(tài)發(fā)生變化時(shí)調(diào)用的回調(diào)函數(shù)，實(shí)現(xiàn)異步調(diào)用。
32：指定調(diào)用的URL。
33：開(kāi)始調(diào)用（可以發(fā)送一段XML到服務(wù)器端，例子可以查看：用javascript通過(guò)MetaWeblog獲取Blog ）。

37：xmlhttp的狀態(tài)：1 裝備階段、2 發(fā)送、3 接收、4 所有數(shù)據(jù)接收完成。
40：隱藏右上角提示。
41：服務(wù)器返回的狀態(tài)：200 正常返回。 404 網(wǎng)頁(yè)不存在等。

45：以HTML格式顯示獲得的網(wǎng)頁(yè)。
46：以文本方式顯示獲得網(wǎng)頁(yè)源代碼。

49-53：截取部分網(wǎng)頁(yè)顯示。

58-60：沒(méi)有正常獲取網(wǎng)頁(yè)的提示。
----------------------
代碼下載：weather.zip

<HTML>
?2

<HEAD>
?3

<TITLE>?天氣預(yù)報(bào)?</TITLE>
?4

<META?NAME="Author"?CONTENT="http://pharaoh.cnblogs.com">
?5

</HEAD>
?6

<BODY>
?7

????<!--
?8

????XMLHTTP?說(shuō)明
?9

????http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/7924f6be-c035-411f-acd2-79de7a711b38.asp????
10

????-->
11

<div?id=load?style="display:none;?position:absolute;right:0px;top:0px;background:#FF5B5B;border:1px?solid">正在加載

</div>?
12

<input?id=wurl?style="width:500px"?value="http://appnews.qq.com/cgi-bin/news_qq_search?city=重慶">
14

<button?onclick="GetWeather();">加載</button>
15

<hr?/>
17

<div?id=city>片斷</div>
18

<hr?/>
19

<center><div?id="wuhan_weather">數(shù)據(jù)區(qū)域</div></center>
20

<hr?/>
21

<div?id=stext>代碼區(qū)</div>
22

?var?xmlhttp?;
26

?function?GetWeather()
27

?{
28

?????????window.status?=?'';
29

?????????document.all("load").style.display='';
30

?????xmlhttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
31

?????xmlhttp.onreadystatechange?=?getReady;
32

?????xmlhttp.Open("GET",document.getElementById('wurl').value,true);
33

?????xmlhttp.Send(null);
34

}
35

function?getReady()
36

{
37

????window.status?+=?xmlhttp.readyState+'?';
38

???if(xmlhttp.readyState?==?4)
39

???{
40

???????document.all("load").style.display='none';
41

?????if(xmlhttp.status?==?200)
42

?????{
43

????????var?xmlReturn?=?xmlhttp.responseText;
44

????????document.all("wuhan_weather").innerHTML=xmlReturn;
46

????????document.all("stext").innerText=xmlReturn;
47

????????
48

????????
49

????????var?newText?=?xmlReturn.replace(/\n+/g,'?');
50

????????//document.all("stext").innerText=newText;
51

????????var?re?=?/<table?.+?table>/ig;
52

????????var?cityText?=?newText.match(re);
53

????????document.all("city").innerHTML=cityText[2];
54

?????}
56

?????else
57

?????{
58

???????document.all("wuhan_weather").innerHTML="<b>出現(xiàn)錯(cuò)誤：</b><br?/>"+new?Date()+"<br?/>"+xmlhttp.statusText+"<br?/>"+xmlhttp.status;
59

???????document.all("stext").innerHTML="代碼區(qū)";
60

???????document.all("city").innerHTML="片斷";
61

???????
62

?????}
63

?????xmlhttp?=?null;
64

???}
65

}
67

</script>
69

</BODY>
70

</HTML>
71

Url:

http://www.urok.cn/blogs/1fbfd483-19df-441d-8a9b-03dbff537bde.aspx

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=645007

posted on 2006-05-11 08:25 happytian 閱讀(153) 評(píng)論(0) 編輯收藏

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理

2025年7月

日

一

二

三

四

五

六

Welcome here, my friend!

常用鏈接

留言簿(12)

隨筆檔案(66)

文章分類

人生

文章檔案(63)

web

Ajax forum
java.csdn
javafan
Mrs Hu's blog
sohu

常用鏈接

留言簿(12)

隨筆檔案(66)

文章分類

文章檔案(63)

web

最新隨筆

搜索

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜