Ajax技术源码和运行图,ajax原理图

什么叫AJAX技术？

什么是Ajax

· 2005-09-08 17:36:55 ·

Ajax的定义

Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括：

XHTML和CSS

使用文档对象模型(Document Object Model)作动态显示和交互

使用XML和XSLT做数据交互和操作

使用XMLHttpRequest进行异步数据接收

使用JavaScript将它们绑定在一起

传统的web应用模型工作起来就象这样：大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据，处理计算，再访问其它的数据库系统，最后返回一个HTML页面到客户端。这是一个老套的模式，自采用超文本作为web使用以来，一直都这样用， 但看过《The Elements of User Experience》的读者一定知道，是什么限制了Web界面没有桌面软件那么好用。

图1: 传统Web应用模型(左)与Ajax模型的比较(右).

这种旧的途径让我们认识到了许多技术，但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候，用户在做什么？没错，等待。每一个动作，用户都要等待。

很明显，如果我们按桌面程序的思维设计Web应用，我们不愿意让用户总是等待。当界面加载后，为什么还要让用户每次再花一半的时间从服务取数据？实际上，为什么老是让用户看到程序去服务器取数据呢？ Ajax如何不同凡响

通过在用户和服务器之间引入一个Ajax引擎，可以消除Web的开始－停止－开始－停止这样的交互过程. 它就像增加了一层机制到程序中，使它响应更灵敏，而它的确做到了这一点。

不像加载一个页面一样，在会话的开始，浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互－－不用等待服务器的通讯。所以用户再不不用打开一个空白窗口，看到等待光标不断的转，等待服务器完成后再响应。

图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).

通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验，内存中的数据编辑，甚至一些页面导航---引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据，载入另外的界面代码，或者接收新的数据---引擎让这些工作异步进行，通常使用XML， 不用再担误用户界面的交互。

什么是Ajax风格，要求比较专业的解说和举个详细的例子。

归纳来看，AJAX风格的Web应用程序展示了下列特征：

·到Web服务器的异步请求-在用户等待来自于Web服务器的响应时，浏览器用户接口不会被堵塞，而是可以继续响应用户的交互。

·高度依赖于用JavaScript编写的基于浏览器的逻辑-W3CDOM的最新改进和标准化为实现动态的客户端UI更新提供了支持。

·在浏览器和Web服务器之间的基于XML数据的交换-XMLHttp对象使得与Web服务器进行通讯而不需要重载页面成为可能。

一个AJAX应用程序和传统型Web应用程序之间的最大差别是，每次用户交互不会导致每一个HTTP请求都被发送到Web服务器；而是，用JavaScript实现的基于浏览器的逻辑掌握着控制权，之后再由该控制决定是局部处理请求还是向服务器作异步调用。一旦到服务器的异步调用结束，客户端逻辑立即适当更新UI的相关部分。这种方式具有下列优点：

·用户体验更为丰富。例如，当一个Google地图用户沿一个方向拖动地图时，系统就会在后台向服务器发出一个异步请求，结果是他能够在超出屏幕边界后继续拖动。这样以来，当用户进一步拖动地图时，新的图像已经可用了。这导致一种响应更快的感觉。

·既然跨越基于XMLHttp的到服务器的调用状态并没有丢失，那么，AJAX应用程序就可以避免每次都重新生成UI界面。

·更多的逻辑位于浏览器端，从而减少了到Web服务器的来回请求的数量，进而全面改进系统的潜力。

尽管存在这么多的优点，然而AJAX风格的应用程序还是存在一些不足之处。例如，AJAX风格应用程序的开发是比较困难的，因为缺乏相应的框架（一组类似于WindowsMFC工具包的UI类）和IDE（调试，可视化设计，等等）支持。另外，基于AJAX进行开发要求一个人必须至少掌握两种语言（DHTML和JavaScript）。而且，AJAX风格应用程序的编码需要更长的时间，因为它需要另外的测试以使其支持多浏览器版本和类型。最后，由于基于JavaScript的源码为终端用户可存取，所以开发过程中的安全分析也变得非常重要。

幸好，例如Atlas，AJAX.NET和GoogleMapsAPI等工具的出现为将来构建AJAX风格的应用程序提供了更好的支持。接下来，我们将讨论一下，对于构建AJAX风格应用程序的支持技术的发展历程以及我们能够从最新发布的工具集Atlas得到怎样的期望。

让我们首先讨论XMLHttp对象。这个对象最初为微软所引入，以后在其它平台（包括Mozilla和苹果公司的Safari浏览器）上也得到实现。XMLHttp支持到Web服务器的异步请求，这样可以允许客户端基于JavaScript逻辑调用Web服务器而不需要重载整个页面。

换句话说，在后台与Web服务器的交互而不引起整个页面重载是完全有可能的。

至于XMLHttp对象的使用则相当直接。为简单起见，让我们仅考虑IE特定的语法。其实，XMLHttp在其它浏览器上的实现语法与这里的讨论也很类似。

request=newActiveXObject("Microsoft.XMLHTTP");

if(request){request.onreadystatechange=CallbackHandler;

request.open("GET"，URL，true);

request.send();

}

functionCallbackHandler(){

if((request.readyState==4)(request.status==200){

}

谁能够帮我详细的介绍一下ajax啊？

这个是我自己在学习的时候的笔记，给你看看。或许能理解。。。 AJAX是异步交互，在客户端与服务器只加引入一个媒介，从改变了同步交互过程中“处理--等待--处理--等待”的模式。

浏览器在执行任务时即装载了Ajax引擎。该引擎室js编写的，通常位于页面的框架中，负责转发客户端和服务器之间的交互。另外，

通过js调用AJAX引擎，可以使得页面不在被整体刷新，而仅仅更新用户需要的部分，不但避免了“白屏”现象，还大大节省了带快，加快了

web浏览的速度。

好处可以归纳为几点：

1.减轻服务器的负担，加快浏览速度。

2.带来更好的用户体验。

3.基于标准化并被广泛支持的技术，不需要下载插件或小程序。目前主流的浏览器都支持AJAX技术，使得它的推广十分顺畅。

4.进一步促进页面呈现书数据分离。AJAX获取服务器可以完全利用单独的模块进行操作，从而使得技术人员和美工人员能够更好的分工与配合。

AJAX的组成部分：是由4中技术组成的。

JAVAScript:是通用的脚本语言，用来嵌入在某种应用之中。AJAX应用程序是用JAVASCRIPT编写的。

CSS:CSS为WEB页面元素提供了可视化样式的定义方法。AJAX应用中，用户界面的样式可以通过CSS独立修改。

DOM:通过JS修改DOM，AJAX应用程序可以再运行时改变用户界面，或者局部更新页面中的某个节点

XMLHttpRequest:XMLHttpRequest对象允许Web程序员从WEB服务器以后台的方式获取数据。数据的格式通常是XML，或者是文本。

什么叫异步交互： 异步交互可以使页面同事处理多件事物，而传统的同步交互必须一件一件事情按顺序完成。

不太严谨的说，异步交互就是一个简单的多线程，它能够使用户同事进行多项操作而不间断。AJAX的的异步交互在后台默默地工作着，呈现给用户一个无刷新的页面。