posts - 66, comments - 40, trackbacks - 0

我认为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

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

Url:

http://www.urok.cn/blogs/1fbfd483-19df-441d-8a9b-03dbff537bde.aspx

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=645007

posted on 2006-05-11 08:25 happytian 阅读(150) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

2024年11月

日

一

二

三

四

五

六

Welcome here, my friend!

常用链接

留言簿(12)

随笔档案(66)

文章分类

人生

文章档案(63)

web

搜索

积分与排名

积分 - 88614
排名 - 646

常用链接

留言簿(12)

随笔档案(66)

文章分类

文章档案(63)

web

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜