asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
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 }

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       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
posted on 2006-03-23 22:51 汪杰 阅读(165) 评论(0)  编辑 收藏 引用
只有注册用户登录后才能发表评论。

<2020年7月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 392440
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜