ajax技术原理深入解析

《ajax技术原理深入解析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、Ajax技术原理深入解析老技术，新技巧在谈到Ajax时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术(本系列的头几篇文章将分别讨论这些技术)。好消息是您可能已经非常熟悉其中的大部分技术，更好的是这些技术都很容易学习，并不像完整的编程语言(如Java或Ruby)那样困难。Ajax的定义：Ajax是AsynchronousJavaScriptandXML(以及DHTML等)的缩写。这个短语是AdaptivePath的JesseJamesGarrett发明的(请参阅参考资料)，按照Jesse的解释，这不是个首字母缩写词。下面是Ajax应用程序所用到的

2、基本技术：HTML用于建立Web表单并确定应用程序其他部分使用的字段。JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。DHTML或DynamicHTML，用于动态更新表单。我们将使用div、span和其他动态HTML元素来标记HTML。文档对象模型DOM用于(通过JavaScript代码)处理HTML结构和(某些情况下)服务器返回的XML。我们来进一步分析这些技术的职责。以后的文章中我将深入讨论这些技术，目前只要熟悉这些组件和技术就可以了。对这些代码越熟悉，就越容易从对这些技术的零散了解转变到真正把握这些技术(同时也真正

3、打开了Web应用程序开发的大门)。XMLHttpRequest对象要了解的一个对象可能对您来说也是最陌生的，即XMLHttpRequest。这是一个JavaScript对象，创建该对象很简单，如清单1所示。清单1.创建新的XMLHttpRequest对象varxmlHttp=newXMLHttpRequest();现在要知道这是处理所有服务器通信的对象。继续阅读之前，先停下来想一想：通过XMLHttpRequest对象与服务器进行对话的是Jav

4、aScript技术。这不是一般的应用程序流，这恰恰是Ajax的强大功能的来源。在一般的Web应用程序中，用户填写表单字段并单击Submit按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本(通常是PHP或Java，也可能是CGI进程或者类似的东西)，脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反

5、馈，因此感觉不同于桌面应用程序。Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说JavaScript代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。然后，服务器将数据返回Jav

6、aScript代码(仍然在Web表单中)，后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预!这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。加入一些JavaScript得到XMLHttpRequest的句柄后，其他的JavaScript

7、代码就非常简单了。事实上，我们将使用JavaScript代码完成非常基本的任务：获取表单数据：JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。解析HTML和XML：使用JavaScript代码操纵DOM(请参阅下一节)，处理HTML表单服务器返回的XML数据的结构。对于前两点，需要非常熟悉getElementById()方法，如清单2所示。清单2.用JavaScript代码捕获和设置字段值//Getthevalueofthe"phone"fieldandstuffitinava

8、riablecalled