這段時間在學習ajax，前今天給公司同事講解了一下基本原理，也隨便放在網上給大家參考一下。
我認為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
1<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
13<input id=wurl style="width:500px" 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">資料區域</div></center>
20<hr />
21<div id=stext>代碼區</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>出現錯誤：</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
66}
67
68</script>
69</BODY>
70</HTML>
71
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
