圖 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 對象:該對象受限于同源安全模型;