这段时间在学习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
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
http://www.urok.cn/blogs/1fbfd483-19df-441d-8a9b-03dbff537bde.aspx