Ajax基本原理讲解

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

这段时间在学习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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航