文本編輯在JavaScript中也很常見(jiàn)，對(duì)于簡(jiǎn)單的標(biāo)簽，我們可以直接讀取和修改標(biāo)簽的內(nèi)容，這是在兼容性不理想的前提下進(jìn)行的，那么跨瀏覽器的設(shè)置innerHTML方法大家了解嗎？一起跟著錯(cuò)新技術(shù)頻道小編來(lái)了解吧！

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è)置一行頭部，字符串末尾不可以帶回車(chē)換行。?
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ì)象用于訪(fǎng)問(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è)跨瀏覽器使用的基類(lèi)：Connection?和?Request

Connection?類(lèi)
這是一個(gè)靜態(tài)類(lè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?類(lèi)
這是對(duì)?XMLHTTPRequest?對(duì)象的封裝，提供更加易用的接口并解決瀏覽器對(duì)響應(yīng)緩存的問(wèn)題，但不具備跨域獲取功能。Request?提供的屬性和方法如下：

/*?*?類(lèi)的路徑?*/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]);?/*?*?查詢(xún)當(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()?{};/*
?*?類(lèi)的路徑
?*/
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]);

/*
?*?查詢(xún)當(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è)置，不用依賴(lài)具體的服務(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'

通過(guò)錯(cuò)新技術(shù)頻道小編介紹的跨瀏覽器的設(shè)置innerHTML方法，相信大家都有了一定的了解，想要了解更多的技術(shù)內(nèi)容，請(qǐng)繼續(xù)關(guān)注錯(cuò)新技術(shù)頻道吧！