DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript跨域調用基於JSON的RESTful API
JavaScript跨域調用基於JSON的RESTful API
編輯:關於JavaScript     

1. 基本術語

AJAX(Asynchronous JavaScript And XML,異步JavaScript和XML):AJAX是一種用於創建快速動態網頁的技術,通過在後台與服務器進行少量數據交換,AJAX可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

JSON(JavaScript Object Notation):JSON是一種輕量級的數據交換格式,可以看成是由大括號包裹起來的多個"key/value"對,格式如下:{"firstName":"Brett", "lastName":"McLaughlin", "email":"abcdefg@gmail.com"}。

Cross Domain(跨域):跨域問題是由於JavaScript語言安全限制中的同源策略造成的,當在頁面上使用AJAX請求訪問其他服務器的數據時,客戶端就會出現跨域問題。

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

2. JavaScript跨域解決方案

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

基於iframe實現跨域:兩個頁面必須屬於一個基礎域(例如都是xxx.com,或是xxx.com.cn),使用同一協議(例如都是HTTP)和同一端口(例如都是80)。iframe方案對域名、協議、端口的限制太多,用處不大。

基於Script標簽實現跨域(JSONP方案):JSONP(JSON with Padding)是JSON的一種“使用模式”,是一種非官方的跨域數據交互協議,可用於解決主流浏覽器的跨域數據訪問的問題。JSONP方案的局限性在於:JSONP只能實現GET請求。

基於後台代理實現跨域(CORS方案):CORS(Cross-Origin Resource Sharing,跨域資源共享)是一個W3C標准,它允許浏覽器向跨源服務器發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。

3. 基於後台代理實現跨域(CORS方案)

具體解決方案如下:

① 服務器端

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

我的服務器端是用Python寫的,HTTP請求調用的webob.Request。

修改辦法是,在“res = req.get_response(self.app)”這行代碼之後,需要增加如下幾行內容:

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最好限制為前端的訪問地址,這樣才相對安全,例如:

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

另外,Access-Control-Max-Age可以設置CORS相關配置的緩存時間,這樣客戶端就不必每次都先進行一次預檢請求(Preflight Request)。

預檢請求會先向服務器端發出一個OPTIONS方法、包含“Origin”頭的請求。只有該請求獲得允許以後,才會發起真實的跨域請求。

所以,服務器端在對X-Auth-Token進行鑒權時還需要放過預檢請求,例如:

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

② 客戶端

HTTP請求需要注意到幾個地方:

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

contentType規定了編碼格式是UTF8;

dataType規定了返回內容是JSON格式。

具體的調用代碼如下:

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跨域調用基於JSON的RESTful API的全部敘述,希望對大家有所幫助,如果大家想了解更多內容,敬請關注網站,謝謝!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved