posts - 66, comments - 40, trackbacks - 0

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

37：xmlhttp的狀態：1 裝備階段、2 發送、3 接收、4 所有數據接收完成。
40：隱藏右上角提示。
41：服務器返回的狀態：200 正常返回。 404 網頁不存在等。

45：以HTML格式顯示獲得的網頁。
46：以文本方式顯示獲得網頁源代碼。

49-53：截取部分網頁顯示。

58-60：沒有正常獲取網頁的提示。
----------------------
代碼下載：weather.zip

<HTML>
?2

<HEAD>
?3

<TITLE>?天氣預報?</TITLE>
?4

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

</HEAD>
?6

<BODY>
?7

????<!--
?8

????XMLHTTP?說明
?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">數據區域</div></center>
20

<hr?/>
21

<div?id=stext>代碼區</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>出現錯誤：</b><br?/>"+new?Date()+"<br?/>"+xmlhttp.statusText+"<br?/>"+xmlhttp.status;
59

???????document.all("stext").innerHTML="代碼區";
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 閱讀(152) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

2025年5月

日

一

二

三

四

五

六

Welcome here, my friend!

常用鏈接

留言簿(12)

隨筆檔案(66)

文章分類

人生

文章檔案(63)

web

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

常用鏈接

留言簿(12)

隨筆檔案(66)

文章分類

文章檔案(63)

web

最新隨筆

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜