图 3. Ajax 应用的通讯模式
由于 Ajax 良好的用户体验,被认为是 Web2.0 的典型技术特征,已经在很多成熟应用中被广泛采纳,如大家熟悉的 Google 地图、Google 搜索建议、Gmail 等。要了解更多 Ajax 信息,请访问 http://www.openajax.org/index.php
2.2 Ajax 技术特征
2.2.1 Ajax 动态特征
Ajax 是构建在 DHTML(动态 HTML)技术之上的,这包括:
JavaScript:在 Web 应用客户端广泛使用的脚本语言;
DOM:Document Object Model,文档对象模型,用来代表 HTML 或 XML 文档的标准对象模型,当前浏览器都支持 DOM 并且允许 JavaScript 代码使用 DOM 来动态修改 HTML 内容;
CSS:Cascading Style Sheets,级联样式表,是一种用来描述 HTML 文档展现的样式表语言,JavaScript 可以在访问 Web 页面时动态修改 CSS。
通过这些动态技术,在 Ajax 应用中,客户端 JavaScript 通过动态修改 DOM 树结构和 CSS,实现了动态的更新 Web 页面。
2.2.2 Ajax 异步通讯特征
前面提到,Ajax 可以和服务器交换更改过的、而非整个页面的内容。这种异步通讯,是通过如下技术实现的:
JSON:JavaScript Object Notation,是一种基于文本(类似于 XML)、轻量级的数据交换格式。在 Web 应用中,可以使用 JSON 传输字符串、数字、二进制,或是数组、对象等等。由于它格式简单、容易理解、容易解析,是目前在 Ajax 应用中最为灵活的数据交换解决方案。
XMLHttpRequest 对象:是 XMLHTTP API 函数集的一个对象。该函数集在 Web 浏览器和服务器之间收发 XML 或其它数据。一个由 XMLHttpRequest 对象发送的 HTTP 请求并不要求页面中拥有或返回一个< form >元素,这意味着该对象的 send() 方法可以立即返回,从而让 Web 页面上的其它 HTML/JavaScript 元素继续由浏览器处理,而由服务器处理该 HTTP 请求并发送响应。通过这样的机制,实现动态更新页面部分元素,而无需传递整个页面的效果。它是当今 Ajax 和 Web2.0 应用的技术基础。
2.2.3 Ajax 非同源调用特征
在介绍 Ajax 调用之前,我们先来看看浏览器的“同源安全模型”。同源模型是客户端脚本运行的重要安全度量标准,它指的是来自于同一个“源”的脚本可以互相访问其方法和属性,而拒绝非同“源”的访问。该模型的精髓是:它认为从任何站点装载的内容是不安全的,当被浏览器不太信任的脚本运行时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。这里“源”包含了 Domain、Protocol 和 Port。如表 1 所示,当采用同源策略时,来自于 http://www.example.com/dir/page.html 页面的脚本 A,可以访问和使用来自 http://www.example.com/dir2/other.html 页面的脚本 B,因为两者在 Domain(www.example.com)、Protocol(http 协议)和 Port(默认为 80)上是一样的,被认为是同源;而脚本 A 不能访问 http://www.example.com:81/dir2/other.html 页面的脚本 C,因为他们不是同一个 Port,被认为非同源。
为什么要有同源的限制呢?这是浏览器提供的最为基础的安全保障之一。如果放开同源限制,黑客就可以通过引诱用户访问嵌入在自己恶意站点上的正常应用(如用 Iframe 将银行登录页面嵌入到黑客的恶意应用中),当用户访问该应用时,攻击脚本就可以在不同源之间互访,窃取用户登录信息,或者跟踪用户的各种操作。
表 1 浏览器的同源模型举例
用来比较的URL | 结果 | 原因 |
http://www.example.com/dir/page.html | 成功 | 相同的协议和主机 |
http://www.example.com/dir2/other.html | 成功 | 相同的协议和主机 |
http://www.example.com:81/dir2/other.html | 失败 | 相同的协议和主机,端口不同 |
https://www.example.com/dir2/other.html | 失败 | 不同的协议 |
http://en.example.com/dir2/other.html | 失败 | 不同的主机 |
http://example.com/dir2/other.html | 失败 | 不同的主机(需要精确匹配的场景) |
http://v2.www.example.com/dir2/other.html | 失败 | 不同的主机(需要精确匹配的场景) |
再回到 Ajax 调用问题上。Ajax 可以通过如下方法被调用:
XMLHttpRequest 对象:该对象受限于同源安全模型;