1. 程式人生 > >Jquery中Ajax處理跨域的方式

Jquery中Ajax處理跨域的方式

一、處理跨域的方式:

1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支援
只需要在服務端填上響應頭:

header("Access-Control-Allow-Origin:*");
/*星號表示所有的域都可以接受,*/
header("Access-Control-Allow-Methods:GET,POST");

3.jsonP
原理:
ajax本身是不可以跨域的,
通過產生一個script標籤來實現跨域。因為script標籤的src屬性是沒有跨域的限制的。
其實設定了dataType: ‘jsonp’後,$.ajax方法就和ajax XmlHttpRequest沒什麼關係了,取而代之的則是JSONP協議。JSONP是一個非官方的協議,它允許在伺服器端整合Script tags返回至客戶端,通過javascript callback的形式實現跨域訪問。
ajax的跨域寫法:
(其餘寫法和不跨域的一樣):
比如

/*當前網址是localhost:3000*/
js程式碼

$.ajax({
    type:"get",
    url:"http://localhost:3000/showAll",/*url寫異域的請求地址*/
    dataType:"jsonp",/*加上datatype*/
    jsonpCallback:"cb",/*設定一個回撥函式,名字隨便取,和下面的函式裡的名字相同就行*/
    success:function(){
        。。。
    }
});
/*而在異域伺服器上,*/
app.js
app.get('/showAll',students.showAll);/*這和不跨域的寫法相同*/
/*在異域伺服器的showAll函式裡,*/ var db = require("./database"); exports.showAll = function(req,res){ /*設定響應頭允許ajax跨域訪問*/ res.setHeader("Access-Control-Allow-Origin","*"); /*星號表示所有的異域請求都可以接受,*/ res.setHeader("Access-Control-Allow-Methods","GET,POST"); var con = db.getCon(); con.query("select * from t_students"
,function(error,rows){ if(error){ console.log("資料庫出錯:"+error); }else{ /*注意這裡,返回的就是jsonP的回撥函式名+資料了*/ res.send("cb("+JSON.stringify(r)+")"); } }); }

二、解決ajax跨域訪問、 JQuery 的跨域方法

JS的跨域問題,我想很多程式設計師的腦海裡面還認為JS是不能跨域的,其實這是一個錯誤的觀點;有很多人在網上找其解決方法,教其用IFRAME去解決的文章很多,真有那麼複雜嗎?其實很簡單的,如果你用JQUERY,一個GETJSON方法就搞定了,而且是一行程式碼搞定。
下面開始貼出方法。

//跨域(可跨所有域名)
$.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",function(json){ 
//要求遠端請求頁面的資料格式為: ?(json_data) //例如: //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); 
}); 

$.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",function(json){ 
//要求遠端請求頁面的資料格式為: ?(json_data) //例如: //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name); 
}); 

注意,getregion.aspx中,在輸出JSON資料時,一定要用Request.QueryString["jsoncallback"],將獲取的內容放到返回JSON資料的前面,假設實際獲取的值為42342348,那麼返回的值就是 42342348([{“_name”:”湖南省”,”_regionId”:134},{“_name”:”北京市”,”_regionId”:143}])
因為getJSON跨域的原理是把隨機變一個方法名,然後返回執行的,實現跨域響應的目的。
下面一個是跨域執行的真例項子:

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域(可跨所有域名) 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });  
 </script>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
//跨域(可跨所有域名) 
$.getJSON("http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?", { id: 0, action: 'jobcategoryjson' }, function(json) { alert(json[0].pid); alert(json[0].items[0]._name); });  
 </script> 

jQuery跨域原理:
瀏覽器會進行同源檢查,這導致了跨域問題,然而這個跨域檢查還有一個例外那就是HTML的

<script type="text/javascript" src="http://domain2.com/getjson?jsonp=parseResponse"></script> 
響應值:parseResponse({"Name": "Cheeso", "Rank": 7}) 
<script type="text/javascript" src="http://domain2.com/getjson?jsonp=parseResponse"></script> 

響應值:parseResponse({“Name”: “Cheeso”, “Rank”: 7})
這種方式被稱作JsonP;(如果連結已經失效請點選這裡:JSONP);即:JSON with padding 上面提到的字首就是所謂的“padding”。那麼jQuery裡面是怎麼實現的呢?
貌似並沒有

get: function( url, data, callback, type ) {
// shift arguments if data argument was omited
if ( jQuery.isFunction( data ) ) {
 type = type || callback;
 callback = data;
 data = null;
}
return jQuery.ajax({
 type: "GET",
 url: url,
 data: data,
 success: callback,
 dataType: type
});

跟進jQuery.ajax,下面是ajax方法的程式碼片段:

// Build temporary JSONP function
if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) {
jsonp = s.jsonpCallback || ("jsonp" + jsc++);

// Replace the =? sequence both in the query string and the data
if ( s.data ) {
s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
}

s.url = s.url.replace(jsre, "=" + jsonp + "$1");

// We need to make sure
// that a JSONP style response is executed properly
s.dataType = "script";

// Handle JSONP-style loading
window[ jsonp ] = window[ jsonp ] || function( tmp ) {
data = tmp;
success();
complete();
// Garbage collect
window[ jsonp ] = undefined;

try {
 delete window[ jsonp ];
} catch(e) {}

if ( head ) {
 head.removeChild( script );
}
};
}

if ( s.dataType === "script" && s.cache === null ) {
s.cache = false;
}

if ( s.cache === false && type === "GET" ) {
var ts = now();

// try replacing _= if it is there
var ret = s.url.replace(rts, "$1_=" + ts + "$2");

// if nothing was replaced, add timestamp to the end
s.url = ret + ((ret === s.url) ? (rquery.test(s.url) ? "&" : "?") + "_=" + ts : "");
}

// If data is available, append data to url for get requests
if ( s.data && type === "GET" ) {
s.url += (rquery.test(s.url) ? "&" : "?") + s.data;
}

// Watch for a new set of requests
if ( s.global && ! jQuery.active++ ) {
jQuery.event.trigger( "ajaxStart" );
}

// Matches an absolute URL, and saves the domain
var parts = rurl.exec( s.url ),
remote = parts && (parts[1] && parts[1] !== location.protocol || parts[2] !== location.host);

// If we're requesting a remote document
// and trying to load JSON or Script with a GET
if ( s.dataType === "script" && type === "GET" && remote ) {
var head = document.getElementsByTagName("head")[0] || document.documentElement;
var script = document.createElement("script");
script.src = s.url;
if ( s.scriptCharset ) {
script.charset = s.scriptCharset;
}

// Handle Script loading
if ( !jsonp ) {
var done = false;

// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
 if ( !done && (!this.readyState ||
 this.readyState === "loaded" || this.readyState === "complete") ) {
 done = true;
 success();
 complete();

 // Handle memory leak in IE
 script.onload = script.onreadystatechange = null;
 if ( head && script.parentNode ) {
 head.removeChild( script );
 }
 }
};
}

// Use insertBefore instead of appendChild to circumvent an IE6 bug.
// This arises when a base node is used (#2709 and #4378).
head.insertBefore( script, head.firstChild );

// We handle everything using the script element injection
return undefined;
}

上面的程式碼第1行到第10行:判斷是JSON型別呼叫,為本次呼叫建立臨時的JsonP方法,並且添加了一個隨機數字,這個數字源於用日期值;
關注第14行,這一行相當關鍵,註定了我們的結果最終是

相關推薦

jqueryajax處理的三大方式

代碼 new .ajax abs port ole ren make and 一、處理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支持 只需要在服務端填上響應頭:

JqueryAjax處理方式

一、處理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2(及XHR2)已經實現了跨域訪問。但ie10以下不支援 只需要在服務端填上響應頭: header("Access-Control-Allow-

webpack + vue-cil proxyTable 處理重慶幸運農場

lse 產生 cor default 通過 3.2 app tab 而且 跨域了解同源政策:所謂"同源"指的是"三個相同"。協議相同域名相同端口相同解決跨域jsonp 缺點:只能get請求 ,需要修改B網站的代碼cors 這個方案缺點

jquery的jsonp呼叫(介面)

                                            &

JqueryAJAX COOKIES請求

 在開發中,開發人員應該都知道js在操作cookie時是不允許跨域處理的,那麼怎麼辦呢?利用Jquery之AJAX 跨域請求 - 其中有一個方法 JSONP 可以實現跨域請求。     JQuery對於Ajax的跨域請求有兩類解決方案,不過都是隻支援get方式。分別是JQ

mui ajax無法問題解決方案

加入頭描述 header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST"); h

jqueryajax設定http header

本文從以下幾種情況討論ajax請求: 沒有跨域,設定http header頭部(例如authorization); 跨域,沒有設定http header頭部; 跨域,設定http header頭部; 題外,php傳送http請求,並設定http header頭部; Jsonp個人理解,參考 一.aj

jQueryAjax+Spring MVC實現請求

          專案開發中,某個可獨立、也可整合的子業務模組需要向外開放相關API介面,先說下專案本身使用了jersery來實現RESTful webservice以名詞形式釋出API。有意思的

解決jquery ajax訪問post請求的時候,ie9以下無效(包括ie9)的問題

jquery src actor div tick 屬性 dex 啟用 logs 最近在做項目的時候遇到一個問題,就是跨域請求ajax的時候ie9以下的瀏覽器不可以訪問,直接執行error裏面的代碼,但是也不報錯,就上網查了查,發現了一個很好用的方法,在這裏記錄一下,也希望

ASP.NET MVC & WebApi 實現Cors來讓Ajax可以訪問 (轉載)

詳細 簡介 part bsp bob 打印 不能 res user 什麽是Cors? CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。它允許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了

JQuery+ajax+jsonp 訪問

url .text java jquery rip getjson round show ajax <html> <head> <meta http-equiv="Content-Type" content="text/html; c

jQueryajax的4種常用請求方式

ger loaded resource media val als images 詳細 有一個 jQuery中ajax的4種常用請求方式: 1.$.ajax()返回其創建的 XMLHttpRequest 對象。 $.ajax() 只有一個參數:參數 key/va

Ajax本地問題 Cross origin requests are only supported for HTTP(針對jQuery基礎教程第四版第六章)

成功 origin port com img 步驟 -s 出現 req 出現的問題: 解決的步驟: 谷歌瀏覽器出現的效果: 針對jQuery基礎教程(第四版),第六章 成功: Ajax本地跨域問題 Cross origin re

楊老師課堂之Jquery的篩選,事件,效果,Ajax,javascript)

1 篩選[掌握]  篩選與之前“選擇器”雷同,篩選提供函式 1.1 過濾 eq(index|-index),獲取第N個元素 •index:一個整數,指示元素基於0的位置,這個元素的位置是從0算起。 •-index:一個整數,指示元素的位置,從集合中的最後一個元素開

jquery php json cookie ajax 解決的問題

javascript 做非同步請求的時候, 請求json資料,如果在不同的子域下。 例如: a.example.com 請求b.example.com 的資料,需要增加 <?php     header('Access-Control-Allow-Or

php ajax jsonp 兩種方式

第一種方式客戶端程式碼案例 第一種方法重點是服務端加header頭------》header("Access-Control-Allow-Origin: *"); 客戶端程式碼 header("Access-Control-Allow-Origin: *"); $data = $r

Java Web 學習筆記之十二:JBoss RestEasy處理OPTIONS請求方式

跨域請求問題 前提 前後端分離的B/S架構系統 前後端獨立開發,後端採用JBoss restEasy 框架搭建restful服務 後端程式碼開發完成並且部署在某一臺測試機上 前端開發過程中,需

[jQuery]Ajax實現訪問JSON

Ajax跨域訪問JSON 環境:.net4.0+jQuery+JSON.net 因為在跨域實現,所以這裡新建網站,這個網站只需要Ashx檔案 public void ProcessRequest(HttpContext context) { stringstrJs

Spring處理請求(含有SpringBoot方式

一次正常的請求 最近別人需要呼叫我們系統的某一個功能,對方希望提供一個api讓其能夠更新資料。由於該同學是客戶端開發,於是有了類似以下程式碼。 @RequestMapping(method = RequestMethod.POST, value = "/update.

JS的八種常用的方式及其具體示例的總結(最新、最完整、最詳細)

JS中的八種常用的跨域方式及其具體示例的總結   這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向一個不同的域請求資料,或者通過js獲取頁面中不同域的框架中(iframe)的資料。   跨域問題是由於javascrip