ajax 介绍 - WEB三国 - 设计与修改 - 轩辕春秋文化论坛 20周年


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#1

发表于 2005-12-27 20:45 资料文集短消息只看该作者

先介绍一段动态服务网页的入门知识：

考虑一下如何在网页上实现聊天室。用 asp.net 的朋友，可能会情不自禁的拉两个文本框+一个按钮。小的文本框投到大的里。

如果实做的话，会发现这样根本不行。甲用户在小文本框写的东西的确可以跑到他自己的大文本框里，但是不会跑到乙用户的文本框。甚至他在自己的机器打开两个浏览器，这个浏览器也看不到另一个浏览器里的发言。

这是因为在 asp 里，每个用户对应一个 session 会话，他们的内容并不相同，不然你就可以偷窥别人的密码啦。所以参加聊天的人会无法共用这两个文本框。

有了这段教训之后，你终于找到一个叫全局对象的东东，它对所有用户都一样，它的名字叫 application。所以，这样说来似乎可以用 application 变量作为中介，大家都投到 application 的某个变量。

那么浏览器会不会在 application 变量变化后，自动更新呢。答案是否定的。

bs 是基于请求响应的。浏览器不请求，服务器就不会相应。所以要想在 application 变量变化的时候，让大文本框更新，就需要由浏览器定时不定时重新发请求。每个聊天室都是这样实现的。这叫做轮询。其实就是个 window.setTimeout 方法。

好了。现在你的聊天室可以动了。
但不久之后，你会发现，你的聊天室有问题。什么问题呢，每点一下按钮，页面就会闪一下。

解决这个问题的办法是无刷新技术。

正题：

这个技术早很多年就出来了。它的原理是这样：
浏览器之所以会刷新，是因为每次都要提交小文本框的内容时，浏览器都会转向这个服务器网页，虽然是同一个页面，由于要重新生成，就会发生刷新。

解决这个问题的办法是这样的。不让浏览器去提交，而是找个义工，一个看不见的浏览器，让它提交小文本框，然后把它取回的内容装到大文本框。

在不同的浏览器有不同的义工，通常写网页的人要兼顾。

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#2

发表于 2005-12-27 21:17 资料文集短消息只看该作者

写了半天却丢了。。。。

下面一段是最简单的 ajax 代码：
<html>
<script language=javascript>
// 同步的方式
function syncSendRequest(word)
{
var request = new ActiveXObject("Microsoft.XMLHTTP");
request.open("GET","http://www.alexa.com/search?q=" + word,false);
request.send();
return request.responseText;
}
</script>
<body>
<input id=word>
<button onclick="result.innerHTML=syncSendRequest(word.value)">搜索</button>
<div id=result>
</div>

</body>
</html>

将它保存为一个 html 文件。
写入搜索单词，点按钮，它会返回 alexa 的搜索结果，没有任何刷新。
代码很简单，分析关键几行：
// 创建一个“不可见的浏览器”，xml request 对象
// 虽然姓 xml，和 xml 并不相干
var request = new ActiveXObject("Microsoft.XMLHTTP");
// 设置目标为 alexa 的叶面， false 表示同步。
request.open("GET","http://www.alexa.com/search?q=" + word,false);
// 发出请求
request.send();
// 返回结果
return request.responseText;

细心的人会发现一个问题，就是当鼠标按下之后，叶面便不动了。按钮也弹不起来。
这是因为同步方式一直要等到出查询结果返回后，才会进行下一步。也就是说，send 这个调用，一直到查询成功或失败后才会结束。
这个方式叫做同步。适合做小量数据。如果是数据较长，可以采用异步方式。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#3

发表于 2005-12-27 21:29 资料文集短消息只看该作者

异步的 ajax 调用：
<html>
<script language=javascript>
// 异步的方式
function asyncSendRequest(word)
{
var request = new ActiveXObject("Microsoft.XMLHTTP");
request.onReadystateChange = function(){
if(request.readyState == 4 && request.status==200)
{
result.innerHTML= request.responseText;
}
}
request.open("GET","http://www.alexa.com/search?q=" + word,true);
request.send();
}
</script>
<body>
<input id=word>
<button onclick="asyncSendRequest(word.value)">搜索</button>
<div id=result>
</div>

</body>
</html>
将上面的内容保存为网页。可以看到异步的效果。
这里和刚才变化最大的就是函数 async。
request.onReadystateChange = function(){
if(request.readyState == 4 && request.status==200)
{
result.innerHTML= request.responseText;
}
}
这是一段匿名函数，处理 onReadystateChange 事件，这个事件和浏览器装载网页时的状态变化一样。
状态 4 表示装载完成。
这些状态可以到网上查资料。
将 open 方法的同异步参数设置为 true，表示要启用异步模式。

现在这个网页在查询时不会干扰界面，因为异步模式下 send 调用很快，只发出请求，不等待结果。当查询结果到达时，发生 onReadystateChange 事件，调用匿名事件处理函数，显示返回的结果。

以上几乎是 ajax 的所有内容。

讲的较粗糙。朋友们如有疑难，敬请提出。

[广告] 真诚支持说岳，携手共创辉煌


	金圭子


	白衣伯爵中大夫 ★

组别	白衣卿相
级别	征西将军
好贴	4
功绩	265
帖子	4926
编号	27961
注册	2004-12-16

#4

发表于 2005-12-28 15:39 资料文集短消息只看该作者

不错的东西，问一下。

所谓ajax，需要安装什么底层环境呢？
还是只要html环境就可以的？
我看代码都是js的，好像也没用到jsp、php或者asp啊……这样就可以的话，是不是只要有html环境就可以的？

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	有事烧纸

组别	百姓
级别	破贼校尉
功绩	1
帖子	66
编号	32727
注册	2005-2-14

#5

发表于 2005-12-28 15:43 资料短消息只看该作者

apache服务器行不行？xmlRequest支持要额外安装么？

[广告] 《精忠报国岳飞传完整版》火热发布


	东方无翼


	燕王

组别	诸侯
级别	卫将军
好贴	6
功绩	849
帖子	6143
编号	1704
注册	2003-10-27

#6

发表于 2005-12-28 17:30 资料主页个人空间短消息只看该作者

咱也搬个板凳来上课。查了些资料，跟大家讨论讨论。

to柜子：如果牵扯到与服务器数据的交互（增、删、改，复杂查询），还是需要通过PHP、Jsp等跟数据库交互的。

to有事烧纸：前端就是Javascript，只要浏览器支持就行了。作为WEB服务器，apache当然可以。xmlRequest也是需要浏览器支持。

今天尝试了浮生兄的几段代码，在IE下运行正常。
使用下列代码创建XMLHttpRequest对象
if(window.XMLHttpRequest)  //Firefox和Opera等用这个
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)  //就ie特别，需要使用这个
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
结果在firefox里面不好用  ，查看Javascript控制台，发现XMLHttpRequest.Open调用异常
后来查找了半天才知道，原来firefox等不允许跨域名调用，而IE就可以。。。又是一个安全性vs易用性的问题。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	轩辕苍龙 (大膜法师)


	太常丞 ★

组别	轩辕公主
级别	大将军
好贴	2
功绩	278
帖子	15262
编号	21958
注册	2004-11-3
来自	扬州

#7

发表于 2005-12-28 18:10 资料个人空间短消息只看该作者

…………可不可以将代码写入笔记本保存然后再用浏览器的方式打开？……

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	aklin

组别	百姓
级别	在野武将
功绩	0
帖子	29
编号	52170
注册	2005-11-1

#8

发表于 2005-12-28 19:29 资料短消息只看该作者

ajax 就是这些内容么？

我以前是用框架网页，主页面的FRAME1高度为100%，另一个FRAME2高度为0，看不见。
然后把主页面frame1的数据传给那个看不见的FRAME2去提交，譬如：
parent.frame2.form1.text1="姓名"
parent.frame2.form1.submit()
......之类

然后，那个看不见的frame2提交,得到数据后再返回给主页面frame1，虽然代码的实现比较起来是麻烦了一点，但好象也一样可以解决问题的呀。

[广告] 真诚支持说岳，携手共创辉煌


	东方无翼


	燕王

组别	诸侯
级别	卫将军
好贴	6
功绩	849
帖子	6143
编号	1704
注册	2003-10-27

#9

发表于 2005-12-28 19:45 资料主页个人空间短消息只看该作者

提交是一方面，反馈回来的内容的无刷新显示用frame这种方法也能完成么对反馈结果的处理呢？

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	aklin

组别	百姓
级别	在野武将
功绩	0
帖子	29
编号	52170
注册	2005-11-1

#10

发表于 2005-12-28 19:59 资料短消息只看该作者

QUOTE:

原帖由东方无翼于2005-12-28, 19:45:51发表
提交是一方面，反馈回来的内容的无刷新显示用frame这种方法也能完成么对反馈结果的处理呢？

当然要刷新，但刷新的是那个看不见的frame2,主页面frame1就不需要刷新
frame2提交并刷新后就得到反馈结果
然后在frame2页面中写个代码
这个代码大致就是parent.frame1.div1.innerHTML= ......（和上面的那个ajax没有什么区别）

那就传送到了主页面frame1

我以前从来没有接触过ajax，但一直都用这个方法，也可以应付。当然，上面介绍的ajax方法代码简洁，倒是比较好用。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	东方无翼


	燕王

组别	诸侯
级别	卫将军
好贴	6
功绩	849
帖子	6143
编号	1704
注册	2003-10-27

#11

发表于 2005-12-28 20:24 资料主页个人空间短消息只看该作者

哦，原理是类似的。

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#12

发表于 2005-12-28 20:47 资料文集短消息只看该作者

ajax 是一种客户端技术，也就是 js 啦。不需要服务器的额外支持。我现在都不清楚 google 是 cgi 还是 php。

上面的代码用记事本保存为 xxxxx.htm 网页，双击打开就可以了。注意后缀不能是 txt。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#13

发表于 2005-12-28 20:55 资料文集短消息只看该作者

QUOTE:

原帖由东方无翼于2005-12-28, 19:45:51发表
提交是一方面，反馈回来的内容的无刷新显示用frame这种方法也能完成么对反馈结果的处理呢？

对，相当于看不见的 iframe 嘛。但是 iframe 是不安全的，也不做不到模拟表单的 POST 方式，用的人不多。

大部分情况，request 访问的服务器页面所返回的结果大部分都是数据，而不是 html 内容。既然是数据，大部分应用都会使用 xml 将它们打包。客户端使用 xml 解析器进行数据还原。

例如，一个论坛的帖子页面，如果采用 ajax，可以这样制作：静态页面上有一个空的 div，以显示文章的正文。用户阅读某个 id 的文章时，xml request 联系服务器页面读取所选文章 id 的内容，这时因为 div 自己有样式，文字格式都定好了，服务器页面只要返回正文填充 div 就可以，不需要把整个 html 重新生成一次——服务器页面是生成 html 页面用的。

[广告] 真诚支持说岳，携手共创辉煌


	凝雪幻


	白衣公主谏议大夫

组别	白衣卿相
级别	左将军
好贴	1
功绩	244
帖子	1374
编号	3870
注册	2003-12-29

#14

发表于 2005-12-28 20:57 资料主页文集短消息只看该作者

google听说是用python的，算它cgi啦～～

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#15

发表于 2005-12-28 21:04 资料文集短消息只看该作者

这么说来 python 也很牛嘛

[广告] 《精忠报国岳飞传完整版》火热发布


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#16

发表于 2005-12-28 21:22 资料文集短消息只看该作者

QUOTE:

原帖由东方无翼于2005-12-28, 17:30:42发表
  咱也搬个板凳来上课。查了些资料，跟大家讨论讨论。

to柜子：如果牵扯到与服务器数据的交互（增、删、改，复杂查询），还是需要通过PHP、Jsp等跟数据库交互的。

to有事烧纸：前端就是Javascript，只要浏览器支持就行了。作为WEB服务器，apache当然可以。xmlRequest也是需要浏览器支持。

今天尝试了浮生兄的几段代码，在IE下运行正常。
使用下列代码创建XMLHttpRequest对象
if(window.XMLHttpRequest)  //Firefox和Opera等用这个
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)  //就ie特别，需要使用这个
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
结果在firefox里面不好用  ，查看Javascript控制台，发现XMLHttpRequest.Open调用异常
后来查找了半天才知道，原来firefox等不允许跨域名调用，而IE就可以。。。又是一个安全性vs易用性的问题。

是的，为了理解方便，我只写了 ie 的代码。无翼兄很善于钻研。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	东方无翼


	燕王

组别	诸侯
级别	卫将军
好贴	6
功绩	849
帖子	6143
编号	1704
注册	2003-10-27

#17

发表于 2005-12-28 22:45 资料主页个人空间短消息只看该作者

哪里哪里，只不过用的是Firefox，运行不起来，所以自然要考虑一些兼容性问题。

[广告] 《精忠报国岳飞传完整版》火热发布


	dollbean

组别	士兵
级别	裨将军
功绩	3
帖子	304
编号	30176
注册	2005-1-13

#18

发表于 2005-12-31 09:45 资料短消息只看该作者

QUOTE:

原帖由aklin于2005-12-28, 19:29:05发表
ajax 就是这些内容么？

我以前是用框架网页，主页面的FRAME1高度为100%，另一个FRAME2高度为0，看不见。
然后把主页面frame1的数据传给那个看不见的FRAME2去提交，譬如：
parent.frame2.form1.text1="姓名"
parent.frame2.form1.submit()
......之类

然后，那个看不见的frame2提交,得到数据后再返回给主页面frame1，虽然代码的实现比较起来是麻烦了一点，但好象也一样可以解决问题的呀。

查看你的源文件后，直接访问或是下载FRAME2页面，就可以直接看你的数据了。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	深蓝蝴蝶


	朗陵侯太中大夫

组别	翰林学士
级别	安北将军
好贴	4
功绩	383
帖子	2721
编号	1751
注册	2003-10-30
来自	青岛

#19

发表于 2006-1-30 00:41 资料主页文集短消息只看该作者

ajax 对我而言超级陌生，好好研究一下吧。谢谢楼主给我带入一个全新的领域

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	Maxwell


	代王监管使枢密直学士山南西道节度使 ★

组别	诸侯
级别	征东将军
好贴	4
功绩	1845
帖子	5799
编号	622
注册	2004-7-7

#20

发表于 2006-1-30 20:32 资料文集短消息只看该作者

QUOTE:

原帖由aklin于2005-12-28, 19:29:05发表
ajax 就是这些内容么？

我以前是用框架网页，主页面的FRAME1高度为100%，另一个FRAME2高度为0，看不见。
然后把主页面frame1的数据传给那个看不见的FRAME2去提交，譬如：
parent.frame2.form1.text1="姓名"
parent.frame2.form1.submit()
......之类

然后，那个看不见的frame2提交,得到数据后再返回给主页面frame1，虽然代码的实现比较起来是麻烦了一点，但好象也一样可以解决问题的呀。

所谓的无刷新只是说没有把整个页面重新读一遍而已，把需要刷新的内容局部化，并且搞规范了，起个名字。只是ajax有更多的功能有明确的规范，你的办法不成体系而已，在无刷新显示问题上两种方法的本质是一样的。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	星颖

组别	百姓
级别	在野武将
功绩	0
帖子	47
编号	49502
注册	2005-9-22
家族	轩辕学院

#21

发表于 2006-2-2 11:56 资料短消息只看该作者

应该可以用记事本实现吧

[广告] 《精忠报国岳飞传完整版》火热发布