真正的ajax

发布时间：2020-12-16 00:46:31 所属栏目：百科来源：网络整理

导读：尽管在Garrett的文章最后加了一些经常被问到的问题，但对于"Ajax到底是什么"仍然存在一些争议。简单地说，Ajax只不过是一种Web交互的方法。这种方法只是在客户端和服务器之间传输少量的信息，从而给用户提供响应最及时的体验。在传统的Web应用程序模型中，

尽管在Garrett的文章最后加了一些经常被问到的问题，但对于"Ajax到底是什么"仍然存在一些争议。简单地说，Ajax只不过是一种Web交互的方法。这种方法只是在客户端和服务器之间传输少量的信息，从而给用户提供响应最及时的体验。

在传统的Web应用程序模型中，浏览器本身负责初始化到服务器的请求，并处理来自服务器的响应，而Ajax模型不同，它提供了一个中间层（Garrett称之为Ajax引擎）来处理这种通信。Ajax引擎（Ajax engine）实际上只是一个JavaScript对象或函数，只有当信息必须从服务器上获得的时候才调用它。与传统的模型不同，不再需要为其他资源（诸如其他网页）提供链接，而是当需要调度和执行这些请求时，向Ajax引擎发出一个函数调用。这些请求都是异步完成的，这就意味着不必等收到响应之后就可以继续执行后续的代码。

服务器（传统模式中，它提供HTML、图像、CSS或JavaScript）配置为向Ajax引擎返回其可用的数据，这些数据可以是纯文本、XML或者需要的任何格式，唯一的要求就是Ajax引擎能够理解和翻译这种数据。

当Ajax引擎收到服务器响应时，它会进行一些动作，通常是完成数据解析，以及基于其所提供的数据对用户界面做一些修改。由于这个过程中传送的信息比传统的Web应用程序模型少得多，因此用户界面的更新速度将更快，用户也就能够更快地进行他们的工作。图1-1是在Garrett文章的原图的基础上进行了修改而得到的，它说明了传统Web应用程序模型和Ajax模型之间的区别。

（点击查看大图）图　1-1

原则：

作为一种新的Web应用程序模型，Ajax仍处于幼年时期。不过，一些Web开发人员却已将这种新的开发方法视为一个挑战。其挑战在于定义什么样的应用程序是好的Ajax Web应用程序，什么样的是不好的或平庸的。软件开发及可用性专家Michael Mahemoff（http://mahemoff. com）指出了一个好的Ajax应用程序应遵循的关键原则，值得在此重述一遍：

尽量减少通信量。Ajax应用程序向服务器发送的信息量以及从服务器接收的信息量应尽可能地少。简单地说，Ajax应尽量减少客户端和服务器端之间的通信流量。确保Ajax应用程序不发送和接收不需要的信息，以增强其可靠性。

没有意外。Ajax应用程序通常会引入与传统Web应用程序不同的用户交互模式。与Web标准的"点击-等待"模型相反，一些Ajax应用程序将使用诸如拖放、双击等其他用户界面风格。不管选择什么样的用户交互模型，一定要确保用户知道下一步该如何操作。

遵循常规。不要在发明用户不熟悉的交互模型上浪费时间。直接借鉴传统的Web应用程序和桌面应用程序，这样可以使用户学起来更快捷。

无干扰。避免采用不必要的干扰性页面元素（诸如循环式动画、闪烁的页面部分）。这些小伎俩将会使用户无法专心于所要完成的工作。

可访问性。考虑谁是主要用户、谁是次要用户，他们通常喜欢如何访问Ajax应用程序。不要闭门造车，以免将没有预料到的新用户关在门外。你的用户是否会使用老版本的浏览器或特定的软件？务必及早了解这些并制定相应的计划。

避免下载整个页面。当最初的页面下载之后，所有与服务器的通信都将由Ajax引擎管理。不要在一个地方下载少量的数据，而在另外的地方重新下载整个页面，这会破坏用户体验。

用户第一。以用户为本设计Ajax应用程序比其他任何东西都重要。尽量使常见的使用场景易于实现，而不要过于追求引人注意或很酷的效果。

以上这些原则的共同出发点都是可用性。Ajax最根本的是要提高用户的Web体验，其后面的技术只是完成这一目标的手段而已。只要坚持上述原则，完全可以保证你的Ajax应用程序是有效且可用的。

Garrett的文章中提到了几个他认为是Ajax解决方案的组成部分的技术。它们包括：

HTML/XHTML，主要的内容表示语言；

CSS，为XHTML提供文本格式定义；

DOM，对已载入的页面进行动态更新；

XML，数据交换格式；

XSLT，将XML转换为XHTML（用CSS修饰其样式）；

XMLHttp，主要的通信代理；

JavaScript，用来编写Ajax引擎的脚本语言。

实际上，在Ajax解决方案中这些技术都是可用的，不过只有三种是必需的：HTML/XHTML、DOM以及JavaScript。XHTML显然是显示信息所必需的，而DOM则是在不重新载入XHTML页面的前提下修改其部分内容所必需的，最后的JavaScript则是初始化客户端-服务器端通信、操作DOM来更新网页所必需的。列表中的其他技术对于微调Ajax解决方案很有用，但不是必需的。

在Garrett的文章中忽略了一个很重要的组件--必要的服务器端处理逻辑。前面列出的所有技术都与客户端的Ajax引擎直接相关，但如果没有一个稳定的、响应及时的服务器来向引擎发送内容，也就不会有Ajax的存在。为了实现这一目标，可以使用你所选择的应用服务器。不管你将服务器端组件编写为PHP页面、Java servlet还是.NET组件，只需要保证向Ajax引擎发送的数据格式是正确的即可。

google suggest：

当开发人员讨论Ajax时，引用的第一个例子往往是Google Suggest（www.google.com/webhp? complete=1），其界面是Google主界面的一个简单克隆，有一个突出的文本框用来输入搜索关键字。当你在这个文本框中输入内容时，所有可能相匹配的内容都将显示出来。当你输入时，Google Suggest将从服务器上获取一些提示，以下拉列表的形式将你可能感兴趣的搜索关键字都显示出来。而且对于显示出的每个提示都会列出可能匹配的结果总数，来帮助你做出选择（参见图1-2）。

（点击查看大图）图　1-2

这个简单的客户端-服务器端交互功能强大且有效，并且不会让用户感到厌烦。其界面所能做出的反应超出了对于一个Web应用程序的预期的反应；不管你输入有多快它都能做出相应的更新，就像桌面软件中的自动填充功能一样，可以通过上下箭头来在提示列表中突出显示并选择任何一项。尽管它还是beta版，不过可以肯定这个方法将会应用于Google的主页面上。

HTTP请求的格式如下所示：

在HTTP请求中，第一行必须是一个请求行（request line），用来说明请求类型、要访问的资源以及所使用的HTTP版本。紧接着是一个首部（header）小节，用来说明服务器要使用的附加信息。在首部之后是一个空行，再此之后可以添加任意的其他数据[称之为主体（body）]。

在HTTP中，定义了大量的请求类型，不过Ajax开发人员关心的只有GET请求和POST请求。只要在Web浏览器上输入一个URL，浏览器就基于该URL向服务器发送一个GET请求，告诉服务器获取并返回资源。以下是一个对www.wrox.com的GET请求：

请求行的第一部分说明了该请求是GET请求。该行的第二部分是一个斜杠（/），用来说明请求的是该域名的根目录。该行的最后一部分说明使用的是HTTP 1.1版本（另一个可选项是1.0）。那么请求发到哪里去呢？这就是第二行的内容。

第2行是请求的第一个首部，HOST。首部HOST将指出请求的目的地。HOST和上一行中的斜杠（/）告知服务器请求的是www.wrox.com/（HTTP 1.1需要使用首部HOST，而原来的1.0版本不需要使用）。第三行中包含的是首部User-Agent，服务器端和客户端脚本都能够访问它，它是浏览器类型检测逻辑的重要基础。该信息由你使用的浏览器来定义（在本例中是Firefox 1.0.1），并且在每个请求中将自动发送。最后一行是首部Connection，通常将浏览器操作设置为Keep-Alive（当然也可以设置为其他值，但这已经超出了本书讨论的范围）。注意，在最后一个首部之后有一个空行。即使不存在请求主体，这个空行也是必需的。

如果要获取一个诸如http://www.wrox.com/books的www.wrox.com域内的页面，那么该请求可能如下所示：

注意只有第一行的内容发生了变化，它只包含URL中www.wrox.com后面的部分。

要发送GET请求的参数，则必须将这些额外的信息附在URL的后面。其格式类似于：

该信息称之为查询字符串（query string），被复制到HTTP请求的请求行中，如下所示：

注意，为了将文本"Professional Ajax"作为URL的参数，需要编码处理其内容，将空格替换成%20，这称为URL编码（URL encoding），用于HTTP的许多方面（JavaScript提供了内建的函数来处理URL编码和解码，这些将在本章中的后续部分中说明）。"名称-值"对用 & 隔开。绝大部分的服务器端技术能够自动对请求主体进行解码，并为这些值的访问提供一些逻辑方式。当然，如何使用这些数据还是由服务器决定的。

浏览器发送的首部，通常比本节中所讨论的要多得多。为了简单起见，这里的例子尽可能简短。

另一方面，POST请求在请求主体中为服务器提供了一些附加的信息。通常，当填写一个在线表单并提交时，这些填入的数据将以POST请求的方式发送给服务器。

以下就是一个典型的POST请求：

从上面可以发现， POST请求和GET请求之间有一些区别。首先，请求行开始处的GET改为了POST，以表示不同的请求类型。你会发现首部Host和User-Agent仍然存在，在后面有两个新行。其中首部Content-Type说明了请求主体的内容是如何编码的。浏览器始终以application/ x-www-form- urlencoded的格式编码来传送数据，这是针对简单URL编码的MIME类型。首部Content-Length说明了请求主体的字节数。在首部Connection后是一个空行，再后面就是请求主体。与大多数浏览器的POST请求一样，这是以简单的"名称-值"对的形式给出的，其中name是Professional Ajax，publisher是Wiley。你可以以同样的格式来组织URL的查询字符串参数。

和大多数浏览器的POST请求一样，这是以简单的"名称-值"对的形式给出的，name是Professional Ajax，publisher是Wiley。你可以以同样的格式来组织URL的查询字符串参数。

正如前面所提到的，还有其他的HTTP请求类型，它们遵从的基本格式与GET请求和POST请求相同。下一步我们来看看服务器将对HTTP请求会发回什么响应。

基于安全方面的考虑，GET请求通常只用于查询信息。如果需要添加、更新或删除数据，则需要使用POST请求。

来自：http://book.51cto.com/art/200812/99622.htm

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!