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

< 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

< input id =wurl style ="width:500px" value ="http://appnews.qq.com/cgi-bin/news_qq_search?city=重庆" >
14

< button onclick ="GetWeather();" > 加载 </ button >
15

< hr />
17

< div id =city > 片断 </ div >
18

< hr />
19

< center >< div id ="wuhan_weather" > 数据区域 </ div ></ center >
20

< hr />
21

< div id =stext > 代码区 </ div >
22

< script language ="javascript" >
24

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

document.all( " wuhan_weather " ).innerHTML = xmlReturn;
46

document.all( " stext " ).innerText = xmlReturn;
47

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

}
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

}
63

xmlhttp = null ;
64

}
65

}
67

</ script >
69

</ BODY >
70

</ HTML >
71

posted on 2006-03-23 22:51 汪杰阅读(221) 评论(0) 编辑收藏引用

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

积分与排名

最新随笔

最新评论

阅读排行榜

评论排行榜