Ajax請求跨域問題

ajax跨域，這個是面試的時候常被問到，也是在做項目的時候會遇到的問題，在之前的項目中就有遇到過，這里根據(jù)經(jīng)驗寫了三種分享下

1.使用中間層過渡的方式

簡單來說就是"后臺代理"，把跨域請求交給后臺去執(zhí)行，然后在前端用ajax訪問后臺獲取數(shù)據(jù)便可，這種比較簡單，就不多說了。

2.使用script標(biāo)簽

對于 script 來講，沒有所謂的跨域限制，所以一般可以用來實現(xiàn)跨域請求，請求方式（這里用jquery，也可以直接用<script>標(biāo)簽）

 $(function () {            $.getScript("http://localhost:14412/ajaxTest.aspx", function () {                alert(responseVal);            })        })

后臺對應(yīng)代碼

public partial class ajaxTest : System.Web.UI.Page{    PRotected void Page_Load(object sender, EventArgs e)    {        Response.Write("var responseVal='Dylan'");      }}

3.使用"jsonp"來實現(xiàn) jsonp方式其實就是在url后面多加一個callback=?的參數(shù)，這里給大家看下前端的調(diào)用方式：

使用$.getJSON來實現(xiàn)

    $(function () {            $.getJSON("http://localhost:14412/ajaxTest.aspx?callback=?", function (data) {                alert(data.name);            });        })

要注意的是在url的后面必須添加一個callback參數(shù)，這樣getJSON方法才會知道是用JSONP方式去訪問服務(wù)，callback后面的那個問號是內(nèi)部自動生成的一個回調(diào)函數(shù)名

使用$.ajax來實現(xiàn)

    <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就是可以指定我們自己的回調(diào)方法名my_callback，遠(yuǎn)程服務(wù)接受callback參數(shù)的值就不再是自動生成的回調(diào)名，而是my_callback。dataType是指定按照J(rèn)SOPN方式訪問遠(yuǎn)程服務(wù)。

后臺對應(yīng)代碼：

public partial class ajaxTest : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {         //獲取回調(diào)函數(shù)名           string callback = Request.QueryString["callback"];        //json數(shù)據(jù)           string json = "{/"name/":/"chopper/",/"sex/":/"man/"}";        Response.ContentType = "application/json";        //輸出：回調(diào)函數(shù)名(json數(shù)據(jù))           Response.Write(callback + "(" + json + ")");    }}

好了，大概就這三種了。希望朋友們批評指正，也希望有其他更好的一起分享下。