Ajax是個好東西，但使用起來卻不是那么方便。問題總結(jié)如下：

在各種瀏覽器上的創(chuàng)建方式和使用方法不一致 
各個瀏覽器對響應(yīng)的緩存策略有所不同 
瀏覽器存在跨域獲取限制 
前兩個問題可以通過封裝 XMLHTTPRequest 對象來解決，第三個問題的解決方法有很多中，兼容性和移植性比較好的就是在本域服務(wù)器上放置一個中轉(zhuǎn) proxy 。Modello.ajax 就是提供這套解決方案的工具集。

安裝
下載 Modello 和 Mdello.ajax 
解壓并將 modello.js, modello.ajax.js, jsproxy.php 這三個文件放到你的服務(wù)器任意文檔目錄中 
在 html 頁面中包含 modello.js 和 modello.ajax.js 這兩個腳本文件 
urlget 方法
Modello.ajax 使用起來非常的簡單，請看下面例子：

// 設(shè)置跨域中轉(zhuǎn) proxy 路徑Define('URLGET_PROXY', '/jsproxy.php'); // 強大的 urlget 方法var urlget = Class.get('modello.ajax.Urllib').urlget; var url = '...'; // 同步 GET 方法獲取var response = urlget(url); // 同步 POST 方法獲取var data = '...';var response = urlget(url, data); // 異步 POST 方法獲取var callback = function (response) {    // ...}var ret = urlget(url, data, callback); // 設(shè)置請求頭部var headers = ["User-Agent: Modello.ajax's urlget"];var ret = urlget(url, data, callback, headers); // 使用命名通道var chunnel = '...';var ret = urlget(url, data, callback, headers, chunnel); // 使用 Response 對象if (response.getStatus() == 200) {    alert(response.getText());}// 設(shè)置跨域中轉(zhuǎn) proxy 路徑
Define('URLGET_PROXY', '/jsproxy.php');

// 強大的 urlget 方法
var urlget = Class.get('modello.ajax.Urllib').urlget;

var url = '...';

// 同步 GET 方法獲取
var response = urlget(url);

// 同步 POST 方法獲取
var data = '...';
var response = urlget(url, data);

// 異步 POST 方法獲取
var callback = function (response) {
    // ...
}
var ret = urlget(url, data, callback);

// 設(shè)置請求頭部
var headers = ["User-Agent: Modello.ajax's urlget"];
var ret = urlget(url, data, callback, headers);

// 使用命名通道
var chunnel = '...';
var ret = urlget(url, data, callback, headers, chunnel);

// 使用 Response 對象
if (response.getStatus() == 200) {
    alert(response.getText());
}

urlget 各個參數(shù)的解釋如下：

url：目標(biāo)資源的 URL 地址。 
data：POST 數(shù)據(jù)。如果 data 為空，則使用 GET 方法獲取。 
callback：異步獲取回調(diào)函數(shù)。如果 callback 為空，則使用同步獲取。 
headers：附加請求頭部。這是一個數(shù)組，每一項為字符串，設(shè)置一行頭部，字符串末尾不可以帶回車換行。 
chunnel：命名通道。用于重用某個連接通道。 
urlget 的返回值：

如果是同步獲取，成功返回 Response 對象，失敗返回 false。如果是異步獲取，成功返回 true，并且在獲取后調(diào)用回調(diào)函數(shù)，失敗返回 false。如果指定了命名通道，但該通道正在被其它請求占用，同步、異步都統(tǒng)一返回 false。

回調(diào)函數(shù)的參數(shù)：

response：Response 對象。 
chunnel：調(diào)用時指定的命名通道。 
Response 對象
Response 對象用于訪問響應(yīng)的各個數(shù)據(jù)項。它提供接口如下：

response.getStatus();     // HTTP 響應(yīng)碼（整數(shù)）response.getStatusText(); // 響應(yīng)碼的字面解釋response.getHeader(key);  // 由 key 指定的響應(yīng)的頭部數(shù)據(jù)response.getAllHeaders(); // 響應(yīng)的所有頭部數(shù)據(jù)（不包含狀態(tài)行）response.getRawHeader();  // 響應(yīng)的原樣頭部數(shù)據(jù)（包含狀態(tài)行）response.getText();       // 響應(yīng)的體部數(shù)據(jù)response.getXML();        // 響應(yīng)的體部數(shù)據(jù)格式化為 Xml Document 對象response.getStatus();     // HTTP 響應(yīng)碼（整數(shù)）
response.getStatusText(); // 響應(yīng)碼的字面解釋
response.getHeader(key);  // 由 key 指定的響應(yīng)的頭部數(shù)據(jù)
response.getAllHeaders(); // 響應(yīng)的所有頭部數(shù)據(jù)（不包含狀態(tài)行）
response.getRawHeader();  // 響應(yīng)的原樣頭部數(shù)據(jù)（包含狀態(tài)行）
response.getText();       // 響應(yīng)的體部數(shù)據(jù)
response.getXML();        // 響應(yīng)的體部數(shù)據(jù)格式化為 Xml Document 對象

大部分情況下，使用 urlget 函數(shù)足可以應(yīng)付，并且它是可以跨瀏覽器，跨域使用的。如果你想做一些更底層的操作，Modello.ajax 為你提供兩個跨瀏覽器使用的基類：Connection 和 Request

Connection 類
這是一個靜態(tài)類，提供跨瀏覽器的方法返回一個 XMLHTTPRequest 對象。使用方法如下：

/* * 成功返回一個跨瀏覽器版本的 XMLHTTPRequest 對象， * 失敗返回 null。 */var conn = Class.get('modello.ajax.Connection').get();/*
 * 成功返回一個跨瀏覽器版本的 XMLHTTPRequest 對象，
 * 失敗返回 null。
 */
var conn = Class.get('modello.ajax.Connection').get();

Request 類
這是對 XMLHTTPRequest 對象的封裝，提供更加易用的接口并解決瀏覽器對響應(yīng)緩存的問題，但不具備跨域獲取功能。Request 提供的屬性和方法如下：

/* * 類的路徑 */var Request = Class.get('modello.ajax.Request'); /* * 創(chuàng)建實例 * url, method, data 均為可選參數(shù) */var request = new Request([url[, method[, data]]]); /* * 設(shè)置 URL */request.setURL(url); /* * 設(shè)置獲取方法。目前支持：GET, POST, HEAD */request.setMethod(method); /* * 設(shè)置獲取方法。目前支持：GET, POST, HEAD */request.setData(data); /* * 設(shè)置回調(diào)函數(shù) * 回調(diào)函數(shù)的原型為： * var callback = function (response) {}; */request.setHandler(handler); /* * 設(shè)置請求頭部 */request.setHeader(key, value); /* * 增加請求頭部 */request.addHeader(header); /* * 發(fā)送請求 * async 為 true，使用異步方式 * 默認使用同步方式 * 調(diào)用成功，同步方式返回 response 對象，異步方式返回 true * 調(diào)用失敗，統(tǒng)一返回 false */request.open([async]); /* * 查詢當(dāng)前請求的狀態(tài) * 返回一個字符串描述，可能為： * Uninitialized：未初始化 * Loading：初始化 * Loaded：發(fā)送數(shù)據(jù) * Interactive：數(shù)據(jù)傳送中 * Complete：完成 */request.getState(); /* * 返回當(dāng)前使用的 Connection 對象 */request.getConnection(); /* * 返回 Response 對象 * 如果當(dāng)前的請求狀態(tài)不為 Complete，返回 null */request.getResponse(); /* * 中止當(dāng)前請求 */request.abort(); /* * 清理所有請求頭部 */request.reset(); /* * 除了上面的方法，還可以對 Request 對象設(shè)置事件處理函數(shù) * 總共有下面幾種事件 */ request.onException = function() {};request.onLoading = function() {};request.onLoaded = function() {};request.onInteractive = function() {};request.onComplete = function() {};/*
 * 類的路徑
 */
var Request = Class.get('modello.ajax.Request');

/*
 * 創(chuàng)建實例
 * url, method, data 均為可選參數(shù)
 */
var request = new Request([url[, method[, data]]]);

/*
 * 設(shè)置 URL
 */
request.setURL(url);

/*
 * 設(shè)置獲取方法。目前支持：GET, POST, HEAD
 */
request.setMethod(method);

/*
 * 設(shè)置獲取方法。目前支持：GET, POST, HEAD
 */
request.setData(data);

/*
 * 設(shè)置回調(diào)函數(shù)
 * 回調(diào)函數(shù)的原型為：
 * var callback = function (response) {};
 */
request.setHandler(handler);

/*
 * 設(shè)置請求頭部
 */
request.setHeader(key, value);

/*
 * 增加請求頭部
 */
request.addHeader(header);

/*
 * 發(fā)送請求
 * async 為 true，使用異步方式
 * 默認使用同步方式
 * 調(diào)用成功，同步方式返回 response 對象，異步方式返回 true
 * 調(diào)用失敗，統(tǒng)一返回 false
 */
request.open([async]);

/*
 * 查詢當(dāng)前請求的狀態(tài)
 * 返回一個字符串描述，可能為：
 * Uninitialized：未初始化
 * Loading：初始化
 * Loaded：發(fā)送數(shù)據(jù)
 * Interactive：數(shù)據(jù)傳送中
 * Complete：完成
 */
request.getState();

/*
 * 返回當(dāng)前使用的 Connection 對象
 */
request.getConnection();

/*
 * 返回 Response 對象
 * 如果當(dāng)前的請求狀態(tài)不為 Complete，返回 null
 */
request.getResponse();

/*
 * 中止當(dāng)前請求
 */
request.abort();

/*
 * 清理所有請求頭部
 */
request.reset();

/*
 * 除了上面的方法，還可以對 Request 對象設(shè)置事件處理函數(shù)
 * 總共有下面幾種事件
 */

request.onException = function() {};
request.onLoading = function() {};
request.onLoaded = function() {};
request.onInteractive = function() {};
request.onComplete = function() {};

jsproxy
對于跨域調(diào)用，Modello.ajax 采用在本域服務(wù)器設(shè)置一個中轉(zhuǎn) proxy 的方式。使用 proxy 方式可以不用對個別瀏覽器進行特殊設(shè)置，不用依賴具體的服務(wù)器，并且具備擴展能力等優(yōu)點。隨 Modello.ajax 工具集提供的 proxy 用 php 寫成，可運行 php 的服務(wù)器都可以安裝。proxy 也可以用其它語言編寫，Modello.ajax 有計劃在后續(xù)版本中提供 python 版的 jsproxy。下面來描述 jsproxy 的設(shè)計，有需要的朋友可以參考來實現(xiàn)其它語言版本的 jsproxy。

jsproxy 接收三個 POST 參數(shù)：url, data, headers。url 為目標(biāo)資源的URL地址；data 為POST數(shù)據(jù)，如果為空則使用 GET 方法獲取資源；headers 附加的請求頭部數(shù)據(jù)。jsproxy 根據(jù)這些參數(shù)去獲取目標(biāo)資源，然后將收到的響應(yīng)頭部和響應(yīng)體部全部轉(zhuǎn)發(fā)給請求者。jsproxy 收到的參數(shù)是由 Modello.ajax 發(fā)出的，字符集為 UTF-8，處理的時候要注意這點。jsproxy 獲取到的響應(yīng)的字符集有很多種可能的，在轉(zhuǎn)發(fā)響應(yīng)之前 jsproxy 應(yīng)該自動檢測出當(dāng)前響應(yīng)的字符集，并在轉(zhuǎn)發(fā)的響應(yīng)頭部指明。如果忽律這個步驟，請求者收到的響應(yīng)有可能是亂碼。

urlparse, urljoin 函數(shù)
urlparse, urljoin 這樣的 URL 處理函數(shù)在其它腳本語言中很常見，但在 JavaScript 中卻沒有。Modello.ajax 提供了這兩個函數(shù)，前面提到的 urlget 函數(shù)內(nèi)部就使用了這兩個函數(shù)。下面來解釋他們的用法：

/* * urlparse：URL 分析函數(shù) */var url = 'http://user:pass@host:port/path?query#flagment';var ret = Class.get('modello.ajax.Urllib').urlparse(url);// 這時候// ret.user == 'user'// ret.pass == 'pass'// ret.host == 'host'// ret.post == 'post'，默認為 80// ret.path == 'path'，以 '/' 開頭// ret.query == 'query'// ret.flagment == 'flagment' /* * urljoin：合并兩個 URL */var url1 = 'http://www.example.com/about/about.html';var url2 = '/index.html';var url = Class.get('modello.ajax.Urllib').urljoin(url1, url2);// 這時候// url == 'http://www.example.com/index.html'/*
 * urlparse：URL 分析函數(shù)
 */
var url = 'http://user:pass@host:port/path?query#flagment';
var ret = Class.get('modello.ajax.Urllib').urlparse(url);
// 這時候
// ret.user == 'user'
// ret.pass == 'pass'
// ret.host == 'host'
// ret.post == 'post'，默認為 80
// ret.path == 'path'，以 '/' 開頭
// ret.query == 'query'
// ret.flagment == 'flagment'

/*
 * urljoin：合并兩個 URL
 */
var url1 = 'http://www.example.com/about/about.html';
var url2 = '/index.html';
var url = Class.get('modello.ajax.Urllib').urljoin(url1, url2);
// 這時候
// url == 'http://www.example.com/index.html'

總結(jié)
Modello.ajax 提供的所有東西已經(jīng)描述完畢，希望它能幫助你加速 Ajax 應(yīng)用的開發(fā)；）

最新評論