1. 基本術(shù)語

AJAX（Asynchronous JavaScript And XML，異步JavaScript和XML）：AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

JSON（JavaScript Object Notation）：JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，可以看成是由大括號(hào)包裹起來的多個(gè)"key/value"對(duì)，格式如下：{"firstName":"Brett", "lastName":"McLaughlin", "email":"abcdefg@gmail.com"}。

Cross Domain（跨域）：跨域問題是由于JavaScript語言安全限制中的同源策略造成的，當(dāng)在頁面上使用AJAX請(qǐng)求訪問其他服務(wù)器的數(shù)據(jù)時(shí)，客戶端就會(huì)出現(xiàn)跨域問題。

Same Origin Policy（同源策略）：同源策略是指一段腳本只能讀取來自同一來源的窗口和文檔的屬性，域名、協(xié)議、端口均相同，即是同源。

2. JavaScript跨域解決方案

目前主要有三種JavaScript跨域解決方案：

基于iframe實(shí)現(xiàn)跨域：兩個(gè)頁面必須屬于一個(gè)基礎(chǔ)域（例如都是xxx.com，或是xxx.com.cn），使用同一協(xié)議（例如都是HTTP）和同一端口（例如都是80）。iframe方案對(duì)域名、協(xié)議、端口的限制太多，用處不大。

基于Script標(biāo)簽實(shí)現(xiàn)跨域（JSONP方案）：JSONP（JSON with Padding）是JSON的一種“使用模式”，是一種非官方的跨域數(shù)據(jù)交互協(xié)議，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。JSONP方案的局限性在于：JSONP只能實(shí)現(xiàn)GET請(qǐng)求。

基于后臺(tái)代理實(shí)現(xiàn)跨域（CORS方案）：CORS（Cross-Origin Resource Sharing，跨域資源共享）是一個(gè)W3C標(biāo)準(zhǔn)，它允許瀏覽器向跨源服務(wù)器發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

3. 基于后臺(tái)代理實(shí)現(xiàn)跨域（CORS方案）

具體解決方案如下：

① 服務(wù)器端

服務(wù)器端需要在正常的HTTP回應(yīng)中增加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等字段。

我的服務(wù)器端是用Python寫的，HTTP請(qǐng)求調(diào)用的webob.Request。

修改辦法是，在“res = req.get_response(self.app)”這行代碼之后，需要增加如下幾行內(nèi)容：

res.headerlist.append(('Access-Control-Allow-Origin', '*')) 
res.headerlist.append(('Access-Control-Allow-Methods', 'GET, POST')) 
res.headerlist.append(('Access-Control-Max-Age', '3600')) 
res.headerlist.append(('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Max-Age, X-Auth-Token, Content-Type, Accept')) 

其中，Access-Control-Allow-Origin最好限制為前端的訪問地址，這樣才相對(duì)安全，例如：

res.headerlist.append(('Access-Control-Allow-Origin', 'http://10.111.121.26:8080')) 

另外，Access-Control-Max-Age可以設(shè)置CORS相關(guān)配置的緩存時(shí)間，這樣客戶端就不必每次都先進(jìn)行一次預(yù)檢請(qǐng)求（Preflight Request）。

預(yù)檢請(qǐng)求會(huì)先向服務(wù)器端發(fā)出一個(gè)OPTIONS方法、包含“Origin”頭的請(qǐng)求。只有該請(qǐng)求獲得允許以后，才會(huì)發(fā)起真實(shí)的跨域請(qǐng)求。

所以，服務(wù)器端在對(duì)X-Auth-Token進(jìn)行鑒權(quán)時(shí)還需要放過預(yù)檢請(qǐng)求，例如：

def process_request(self, req): 
if (req.headers.get('X-Auth-Token') != 'open-sesame') and (req.method != 'OPTIONS'): 
return exc.HTTPForbidden() 

② 客戶端

HTTP請(qǐng)求需要注意到幾個(gè)地方：

data需要保證是JSON格式的字符串；

contentType規(guī)定了編碼格式是UTF8；

dataType規(guī)定了返回內(nèi)容是JSON格式。

具體的調(diào)用代碼如下：

data_param = {"timeType":"LAST_7_DAYS", "hostType":"ALL_HOSTS"} 
$.ajax({ 
url:"http://172.16.17.11:41128/dpi/webApp/eventRetrieve", 
type: "POST", 
data:JSON.stringify(data_param), 
headers:{ 
"X-Auth-Token":"open-sesame", 
"Content-Type":"application/json" 
}, 
contentType: 'text/html; charset=UTF-8', 
dataType: "json", 
success: function(data) { 
alert(data); // Object 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown) { 
alert(XMLHttpRequest.status); 
alert(XMLHttpRequest.readyState); 
alert(textStatus); 
}, 
complete: function(XMLHttpRequest, textStatus) { 
} 
}); 

以上所述是小編給大家介紹的JavaScript跨域調(diào)用基于JSON的RESTful API的全部敘述，希望對(duì)大家有所幫助，如果大家想了解更多內(nèi)容，敬請(qǐng)關(guān)注腳本之家網(wǎng)站，謝謝！

最新評(píng)論