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 这个调用，一直到查询成功或失败后才会结束。
这个方式叫做同步。适合做小量数据。如果是数据较长，可以采用异步方式。

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


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	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 的所有内容。

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

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


	浮生宛若寄


	忠信伯宁武军节度使

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

#4

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

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

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

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


	浮生宛若寄


	忠信伯宁武军节度使

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

#5

发表于 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 页面用的。

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


	浮生宛若寄


	忠信伯宁武军节度使

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

#6

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

这么说来 python 也很牛嘛

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


	浮生宛若寄


	忠信伯宁武军节度使

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

#7

发表于 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 的代码。无翼兄很善于钻研。

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