学习ajax技术

与笑凌 — Wed, 24 May 2006 07:01:00 GMT

　　很久以前听说过ajax,一直以为它是一种和java并列的技术，因为对java的情有独钟，所以迟迟没有开始对ajax的研究，后来看了好多新闻才发现ajax只是一种用于异步处理的客户端技术，而且已经存在很久，只是最近随着google的推广才红火起来。而与此同时，ruby on rails却真正是一种可以和java抗衡的服务器端技术，但因为刚刚起步，许多地方都不是很完善（如何不完善，我就不得而知了，只是听一些前辈的意见而已），其实我对ruby很早就有耳闻，大约是2004年吧，当时随手下载下来看了看，觉得它似乎是一种比java还要OO的语言（在java中，int绝非对象，而在ruby中，int却具有很多自己的方法，由此可见在ruby中，int被赋予了对象的含义），而且构建系统可以非常快，我曾一度对其着迷，打算深入学习，但后来发现他的发布人是日本人，处于强烈的爱国热情（可能是自己一相情愿＃＃）最后没有如愿以尝，直到最近听说javaeye的创始人robbin打算用ruby改写该网站才意识到自己可能犯了一个错误：技术是没有国界的．
　　说了很多废话，言归正转，前几天从图书馆借了一本书«ajax基础教程»，捏着鼻子总算看完了，里面的代码很多，而且很广，但给人一个总的印象是：使用ajax意味着将编写大量的代码，而且测试很麻烦．尽管书里面罗列了很多测试工具，但因为javascript是一种弱类型语言，这就决定了，无论我们做再多了努力也无法改变这种根深蒂固的本质．如，我们可以利用java的强类型机制，使用开发工具在打出小数点后利用开发工具的帮助功能得到所使用的对象的行为（方法），而对于javascrpt，变量通过var定义，而他们的最终类型只有在运行期才能得到，所以它所具有的行为就无法通过开发工具的帮助功能得到，这对于像我们这种只能储存很少信息量的大脑而言是极其痛苦的，我们要么背会所有的api，要么开发时一边写代码，一边查看开发手册．正因为如此，我们也很难开发出针对ajax的代码自动化工具（我是一位狂热的eclipse爱好者，热衷于一切自动化代码工具）．但是，也正因为javascript的弱类型特点，才能走的这么远，html作为web交流的世界语，它是一种在极不规范的情况下仍能很好工作的语言，针对这种特点，也许注定了ajax的弱类型的特点．
　　以上仅仅是我对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=""+"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基础教程»一书就给出了一个框架，因为我没有接触过所以也就没有很深的认识，等研究之后再做点评吧．

　　我自己始终觉得，ajax技术作为一种边缘技术（页面程序员和服务器程序员都将使用的技术），处于一种很尴尬的地位，但愿我们的框架能平衡好这种带来很好视觉感受的新的开发技术！

与笑凌 2006-05-24 15:01 发表评论

BlogJava-passyt-随笔分类-编程语言之其它

学习ajax技术