Ajax基本原理講解

2024-07-21 02:29:30

字體：大中小

供稿：網(wǎng)友

這段時(shí)間在學(xué)習(xí)ajax，前今天給公司同事講解了一下基本原理，也隨便放在網(wǎng)上給大家參考一下。
我認(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

1<html>
2<head>
3<title> 天氣預(yù)報(bào) </title>
4<meta name="author" content="http://pharaoh.cnblogs.com">
5</head>
6<body>
7    
11<div id=load >正在加載</div>
12
13<input id=wurl value="http://appnews.qq.com/cgi-bin/news_qq_search?city=重慶">
14<button >加載</button>
15
16<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
23<script language="javascript">
24
25 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}
35function 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
45        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
55     }
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
66}
67
68</script>
69</body>
70</html>
71