jQuery跨域問(wèn)題解決方案
通過(guò)XMLHTTPRquest請(qǐng)求不同域上的數(shù)據(jù),原來(lái)js跨域訪問(wèn)是后臺(tái)有個(gè)處理路徑“/test”的函數(shù)。下面把具體解決方案介紹如下。
后臺(tái)處理路徑“/test”的函數(shù):
//路徑處理
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):
//處理函數(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不需要寫處理跨域訪問(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)題。
- jQuery使用ajax跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例
- java 結(jié)合jQuery實(shí)現(xiàn)跨域名獲取數(shù)據(jù)的方法
- JQuery 的跨域方法推薦_可跨任何網(wǎng)站
- 深入理解jquery跨域請(qǐng)求方法
- jquery中ajax處理跨域的三大方式
- jquery中ajax跨域方法實(shí)例分析
- jQuery使用ajax跨域請(qǐng)求獲取數(shù)據(jù)
- jquery+ajax實(shí)現(xiàn)跨域請(qǐng)求的方法
- jquery的ajax跨域請(qǐng)求原理和示例
- jquery跨域請(qǐng)求示例分享(jquery發(fā)送ajax請(qǐng)求)
- 利用JQuery和Servlet實(shí)現(xiàn)跨域提交請(qǐng)求示例分享
- jQuery 獲取跨域XML(RSS)數(shù)據(jù)的相關(guān)總結(jié)分析
相關(guān)文章
jQuery操作DOM_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM,下面的DOM操作將圍繞上面的DOM樹進(jìn)行學(xué)習(xí)JQueryDOM操作,有興趣的可以了解一下2017-07-07jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼,通過(guò)簡(jiǎn)單的jQuery操作鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09Hallo.js基于jQuery UI所見(jiàn)即所得的Web編輯器
Hallo.js是一個(gè)簡(jiǎn)單的富文本編輯器,基于jQuery UI的部件,利用HTML5的contentEditable功能實(shí)現(xiàn)了即時(shí)編輯功能,其主要目的是為了提供良好的書寫體驗(yàn),對(duì)Hallo.js感興趣的小伙伴們可以參考一下2016-01-01jquery封裝的對(duì)話框簡(jiǎn)單實(shí)現(xiàn)
本文為大家詳細(xì)介紹下使用jquery簡(jiǎn)單實(shí)現(xiàn)封裝的對(duì)話框,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07jquery+ajax請(qǐng)求且?guī)Х祷刂档拇a
這兩天的工作內(nèi)容不多,基本是關(guān)于jquery中ajax的。之前一直都是寫的最簡(jiǎn)單的ajax請(qǐng)求,并沒(méi)關(guān)注怎么獲取ajax返回值的問(wèn)題。2015-08-08IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法
這篇文章主要介紹了IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法的相關(guān)資料,需要的朋友可以參考下2015-07-07