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

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

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

// 設(shè)置跨域中轉(zhuǎn) proxy 路徑Define('URLGET_PROXY', '/jsproxy.php'); // 強(qiáng)大的 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è)置請(qǐng)求頭部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 對(duì)象if (response.getStatus() == 200) {    alert(response.getText());}// 設(shè)置跨域中轉(zhuǎn) proxy 路徑
Define('URLGET_PROXY', '/jsproxy.php');

// 強(qiáng)大的 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è)置請(qǐng)求頭部
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 對(duì)象
if (response.getStatus() == 200) {
    alert(response.getText());
}

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

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

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

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

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

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 對(duì)象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 對(duì)象

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

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

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

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

/* * 類的路徑 */var Request = Class.get('modello.ajax.Request'); /* * 創(chuàng)建實(shí)例 * 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è)置請(qǐng)求頭部 */request.setHeader(key, value); /* * 增加請(qǐng)求頭部 */request.addHeader(header); /* * 發(fā)送請(qǐng)求 * async 為 true，使用異步方式 * 默認(rèn)使用同步方式 * 調(diào)用成功，同步方式返回 response 對(duì)象，異步方式返回 true * 調(diào)用失敗，統(tǒng)一返回 false */request.open([async]); /* * 查詢當(dāng)前請(qǐng)求的狀態(tài) * 返回一個(gè)字符串描述，可能為： * Uninitialized：未初始化 * Loading：初始化 * Loaded：發(fā)送數(shù)據(jù) * Interactive：數(shù)據(jù)傳送中 * Complete：完成 */request.getState(); /* * 返回當(dāng)前使用的 Connection 對(duì)象 */request.getConnection(); /* * 返回 Response 對(duì)象 * 如果當(dāng)前的請(qǐng)求狀態(tài)不為 Complete，返回 null */request.getResponse(); /* * 中止當(dāng)前請(qǐng)求 */request.abort(); /* * 清理所有請(qǐng)求頭部 */request.reset(); /* * 除了上面的方法，還可以對(duì) Request 對(duì)象設(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)建實(shí)例
 * 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è)置請(qǐng)求頭部
 */
request.setHeader(key, value);

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

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

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

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

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

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

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

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

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

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

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

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

/* * urlparse：URL 分析函數(shù) */var url = 'http://user:pass@host:port/path?query#flagment';var ret = Class.get('modello.ajax.Urllib').urlparse(url);// 這時(shí)候// ret.user == 'user'// ret.pass == 'pass'// ret.host == 'host'// ret.post == 'post'，默認(rèn)為 80// ret.path == 'path'，以 '/' 開(kāi)頭// ret.query == 'query'// ret.flagment == 'flagment' /* * urljoin：合并兩個(gè) URL */var url1 = 'http://www.example.com/about/about.html';var url2 = '/index.html';var url = Class.get('modello.ajax.Urllib').urljoin(url1, url2);// 這時(shí)候// 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);
// 這時(shí)候
// ret.user == 'user'
// ret.pass == 'pass'
// ret.host == 'host'
// ret.post == 'post'，默認(rèn)為 80
// ret.path == 'path'，以 '/' 開(kāi)頭
// ret.query == 'query'
// ret.flagment == 'flagment'

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

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

最新評(píng)論