[原创]Ajax基本原理讲解
这段时间在学习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 onclick="GetWeather();">加载</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
<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 onclick="GetWeather();">加载</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
}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
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
else57
{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
