ajax跨域,這個是面試的時候常被問到,也是在做項目的時候會遇到的問題,在之前的項目中就有遇到過,這里根據經驗寫了三種分享下
1.使用中間層過渡的方式
簡單來說就是"后臺代理",把跨域請求交給后臺去執行,然后在前端用ajax訪問后臺獲取數據便可,這種比較簡單,就不多說了。
2.使用script標簽
對于 script 來講,沒有所謂的跨域限制,所以一般可以用來實現跨域請求,請求方式(這里用jquery,也可以直接用<script>標簽)
$(function () { $.getScript("http://localhost:14412/ajaxTest.aspx", function () { alert(responseVal); }) })
后臺對應代碼
public partial class ajaxTest : System.Web.UI.Page{ PRotected void Page_Load(object sender, EventArgs e) { Response.Write("var responseVal='Dylan'"); }}
3.使用"jsonp"來實現 jsonp方式其實就是在url后面多加一個callback=?的參數,這里給大家看下前端的調用方式:
使用$.getJSON來實現
$(function () { $.getJSON("http://localhost:14412/ajaxTest.aspx?callback=?", function (data) { alert(data.name); }); })
要注意的是在url的后面必須添加一個callback參數,這樣getJSON方法才會知道是用JSONP方式去訪問服務,callback后面的那個問號是內部自動生成的一個回調函數名
使用$.ajax來實現
<script type="text/javascript"> $.ajax({ url:"http://localhost:14412/ajaxTest.aspx?callback=?", dataType:"jsonp", jsonpCallback:"my_callback", success:function(data){ alert(data.name + " is a a" + data.sex); } }); </script>
這里jsonpCallback就是可以指定我們自己的回調方法名my_callback,遠程服務接受callback參數的值就不再是自動生成的回調名,而是my_callback。dataType是指定按照JSOPN方式訪問遠程服務。
后臺對應代碼:
public partial class ajaxTest : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { //獲取回調函數名 string callback = Request.QueryString["callback"]; //json數據 string json = "{/"name/":/"chopper/",/"sex/":/"man/"}"; Response.ContentType = "application/json"; //輸出:回調函數名(json數據) Response.Write(callback + "(" + json + ")"); }}
好了,大概就這三種了。希望朋友們批評指正,也希望有其他更好的一起分享下。
新聞熱點
疑難解答