love fish大鹏一曰同风起，扶摇直上九万里

常用链接

统计

积分与排名

friends

link

最新评论

ajax技术基础

ajax技术是采用javascript作为客户端实现的语言，xml作为其通讯的机制，因此有人将ajax描述为：ajax=javascript+xml是很有道理的．ajax的最大优点就是异步处理，相对于以往的web技术采用的请求全刷新机制，它更加亲近于C/S结构的软件，给用户的是一种很有快感的东东．其实现的方式是采用一个叫做XMLHttpRequest的对象进行交互的，因为历史的原因，各种浏览器对javascript的处理方式不一致，使得生成XMLHttpRequest对象的方法也有差别，但大体上有两种方式：微软的ActiveX控件和XMLHttpRequest本地对象，代码如下：
 1function createXMLHttpRequest() {
 2  var xmlreq ;
 3  if (window.XMLHttpRequest) {
 4    // 在非Microsoft浏览器中创建XMLHttpRequest本地对象
 5    xmlreq = new XMLHttpRequest();
 6  } else if (window.ActiveXObject) {
 7    //通过MS ActiveX创建XMLHttpRequest
 8    try {
 9      // 尝试按新版InternetExplorer方法创建
10      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
11    } catch (e1) {
12      // 创建请求的ActiveX对象失败
13      try {
14        // 尝试按老版InternetExplorer方法创建
15        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
16      } catch (e2) {
17        // 不能通过ActiveX创建XMLHttpRequest
18      }
19    }
20  }
21  return xmlreq;
22}
23
代码中看到排除上述的两种情况，方法createXMLHttpRequest得到的结果将是null，也就是说无法得到XMLHttpRequest的实例，也就无法使用ajax技术。但书中一直没有给出此时将如何处理，难道，世界上的浏览器就他们两种？或者，对于那些第三类的用户，我们要么劝勉其使用Internet Explorer或firefox等，要么对其采取抛弃的态度（这些也许是世界规范化组织该考虑的问题）。创建了XMLHttpRequest实例之后就采用类似于java（awt）中的事件处理机制，如下代码：
 1function myFunction(){
 2    // 获取一个XMLHttpRequest实例
 3    var req = createXMLHttpRequest();
 4    // 设置用来从请求对象接收回调通知的句柄函数
 5    req.onreadystatechange =handlerFunction(req);
 6    // HTTP POST联接,第三个参数表示请求是异步的
 7    req.open("POST", "handleRequest.action", true);
 8    // 指示请求体包含form数据
 9    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
10    req.send(null);
11}
其中req.onreadystatechange引用的类似C++中的函数的指针，即handlerFunction，其代码如下：
 1function handlerFunction(req){
 2    // 如果请求的状态是“完成”
 3    if (req.readyState == 4){
 4        // 检查是否成功接收了服务器响应
 5        if (req.status == 200){
 6            // 处理事件,这里省略
 7            
 8        }
 9        else{
10            // 有HTTP问题发生
11            alert("HTTP error: "+req.status);
12        }
13    }
14}
与页面的交互，可能是这样的一个事实，用户点击某个按钮，激发myFunction方法的执行，此方法将创造一个XMLHttpRequet实例，并将处理事件的机制委托给onreadystatechange所指定的方法（本文中即为：handlerFunction）监听,handlerFunction将判断传进来的XMLHttpRequet实例的运行状态，对应其状态实现相应的业务逻辑。
　　上面没有列出ajax的xml通信机制，这里简要的说明一下：
　　发信：通过串的连接构造出一个满足xml格式的字符串，如String s="<project><person><name>"+"passyt"+"<\/name><\/person><\/project>";然后通过XMLHttpRequet实例req的send传送到服务器端，如req.send(s);
        收信：通过req.responseXML得到所谓的Dom实例然后按照标准的文档对象模型的方法取值显示到页面。
   　说明：在发信中，xml消息的构成通过字符串的连接完成，很容易因为笔误而产生错误，«ajax基础教程»一书给出了另一种基于简单通信的消息格式json，网上有其免费的版本和详细说明，这里不再敷言。
　　服务器端获取xml的信息格式后做相关的业务处理，然后生成xml消息返回给客户端，客户端利用javascript中的dom支持访问所在的xhtml，进行页面的局部刷新。这里的服务器端技术可以是java,php或者是.net，总之只要是支持xml通信机制的服务器技术都可以。
　　利用ajax技术可以创造出类似桌面软件的web页面，显得与众不同，因而显得特别酷，又加之google的推广以及几个大型网站的宣传，ajax就作为一种“新瓶装老酒”的“新技术”出现在我们的生活中，并激起了所谓的web2.0热潮。但显而易见的是，ajax的编码量很可能大大的超出了其他的页面表现技术，而作为一种弱类型语言无法得到对应的自动代码产生工具，对于我们程序员而言是极其痛苦的，另外它也带来了很大的安全隐患，因为其代码可见性，使得编写页面的javascript脚本将对程序员做出更高的要求。
　　但是，好的是，现在已经有越来越多的ajax框架来减少javascript对浏览器的依赖以及提高ajax的开发效率。«ajax基础教程»一书就给出了一个框架

posted on 2006-05-26 10:19 liaojiyong 阅读(440) 评论(1)  编辑  收藏 所属分类: Ajax

评论

# re: ajax技术基础 2006-11-15 17:31 www

good  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航: