快捷導(dǎo)航

jQuery跨域問(wèn)題解決方案

更新時(shí)間：2015年08月03日 10:44:41 作者：likelooker

通過(guò)XMLHTTPRquest請(qǐng)求不同域上的數(shù)據(jù)，原來(lái)js跨域訪問(wèn)是后臺(tái)有個(gè)處理路徑“/test”的函數(shù)。下面給大家介紹jQuery跨域問(wèn)題解決方案，有需要的小伙伴可以參考下

通過(guò)XMLHTTPRquest請(qǐng)求不同域上的數(shù)據(jù)，原來(lái)js跨域訪問(wèn)是后臺(tái)有個(gè)處理路徑“/test”的函數(shù)。下面把具體解決方案介紹如下。

后臺(tái)處理路徑“/test”的函數(shù)：

復(fù)制代碼代碼如下:

//路徑處理

app.get("/test",user.test);

//處理函數(shù)

exports.test=function(req,res){

    res.end("alert('JS跨域訪問(wèn)')");

};

外部有一個(gè)網(wǎng)頁(yè)需要訪問(wèn)路徑”/test“下的內(nèi)容，則可以通過(guò)JS腳本文件來(lái)跨域訪問(wèn)：

復(fù)制代碼代碼如下:

//處理函數(shù)

<script>

    function method(data){

        console.log(data);

    }

</script>

//跨域訪問(wèn)

<script src="http://localhost:3000/test"></script>

結(jié)果會(huì)在當(dāng)前的網(wǎng)頁(yè)中彈出一個(gè)窗口：

jQuery中JSONP跨域訪問(wèn)的實(shí)現(xiàn)：

同樣在后臺(tái)有一個(gè)處理路徑“/test”的函數(shù)：

//路徑處理
app.get("/test",user.test);
//處理函數(shù)
exports.test=function(req,res){
 res.end("method("+JSON.stringify({mes:"跨域訪問(wèn)成功！"})+")");
};
 外部有一個(gè)網(wǎng)頁(yè)需要訪問(wèn)路徑”/test“下的內(nèi)容，通過(guò)JSONP來(lái)實(shí)現(xiàn)跨域訪問(wèn)：

//引入跨域訪問(wèn)中的jQuery函數(shù)庫(kù)
<script src="http://localhost:3000/js/jquery-1.9.1.min.js"></script>
//jQuery中JSONP跨域訪問(wèn)
<script>
  $.ajax({
    url:"http://localhost:3000/test",
    type:"get",
    success:function(data){
      $("body").append(data.mes);
    },
    dataType:"jsonp",
    jsonpCallback:"method"
  });
</script>

結(jié)果會(huì)在當(dāng)前的網(wǎng)頁(yè)中顯示如下信息：

通過(guò)上述代碼我們可以看出JSOPN跨域訪問(wèn)和原始的JS跨域訪問(wèn)的不同之處是JSONP不需要寫(xiě)處理跨域訪問(wèn)的函數(shù)（例如上述方法中使用的method函數(shù)），在JSONP跨域訪問(wèn)時(shí)會(huì)自動(dòng)幫我們創(chuàng)建處理跨域訪問(wèn)的函數(shù)。

JSONP跨域訪問(wèn)的優(yōu)點(diǎn)：

1.它不像XMLHTTPRequest對(duì)象實(shí)現(xiàn)的AJAX請(qǐng)求那樣受到同源策略的限制；

2.它的兼容性更好，不需要XMLHTTPRequest或ActiveX的支持；

3.在請(qǐng)求完成后可以通過(guò)調(diào)用callback的方法傳回結(jié)果。

JSONP跨域訪問(wèn)的缺點(diǎn)：

1.它只支持GET請(qǐng)求而不支持POST及其他類型的請(qǐng)求；

2.它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。

您可能感興趣的文章: