异步技术实现ajax,Ajax技术实现异步无刷新技术

Ajax技术实现异步无刷新技术

(2010-04-27 17:48:36)

标签：

杂谈

首先声名下html代码执行顺序是从头执行到尾的，也就是说执行一句显示一句的意思

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做

法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的

响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据(而不是返回整个页面，只是把从服务器端上取出的数据填充到div或span层上去而已，实现无刷新的效果)，它使用SOAP或其它一些基于

XML的web

service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快

的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为

迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像

DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继

问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

1。在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数

据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。(也就是无刷新直接放到页面上的)

2。XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，但并不会打断用户当前的操作。使用

XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。

3。发送请求了

可以调用HTTP请求类的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true);

xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用 的方式。

按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而

不等待服务器响应。这就是"AJAX"中的"A"。

服务器的响应

这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的

onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名，注意不要写成

FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){

// JavaScript代码段

};

首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。 XMLHttpRequest

提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：

0 (未初始化)

1 (正在装载)

2 (装载完毕)

3 (交互中)

4 (完成)

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响 应。具体代码如下：

if (http_request.readyState == 4) { // 收到完整的服务器响应 }

else { // 没有收到完整的服务器响应 }

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服

务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

处理从服务器得到的数据

有两种方式可以得到这些数据：

(1) 以文本字符串的方式返回服务器的响应

(2) 以XMLDocument对象方式返回响应

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。