jQuery跨域問題解決方案
通過XMLHTTPRquest請求不同域上的數據,原來js跨域訪問是后臺有個處理路徑“/test”的函數。下面把具體解決方案介紹如下。
后臺處理路徑“/test”的函數:
//路徑處理
app.get("/test",user.test);
//處理函數
exports.test=function(req,res){
res.end("alert('JS跨域訪問')");
};
外部有一個網頁需要訪問路徑”/test“下的內容,則可以通過JS腳本文件來跨域訪問:
//處理函數
<script>
function method(data){
console.log(data);
}
</script>
//跨域訪問
<script src="http://localhost:3000/test"></script>
結果會在當前的網頁中彈出一個窗口:
jQuery中JSONP跨域訪問的實現:
同樣在后臺有一個處理路徑“/test”的函數:
//路徑處理 app.get("/test",user.test); //處理函數 exports.test=function(req,res){ res.end("method("+JSON.stringify({mes:"跨域訪問成功!"})+")"); }; 外部有一個網頁需要訪問路徑”/test“下的內容,通過JSONP來實現跨域訪問: //引入跨域訪問中的jQuery函數庫 <script src="http://localhost:3000/js/jquery-1.9.1.min.js"></script> //jQuery中JSONP跨域訪問 <script> $.ajax({ url:"http://localhost:3000/test", type:"get", success:function(data){ $("body").append(data.mes); }, dataType:"jsonp", jsonpCallback:"method" }); </script>
結果會在當前的網頁中顯示如下信息:
通過上述代碼我們可以看出JSOPN跨域訪問和原始的JS跨域訪問的不同之處是JSONP不需要寫處理跨域訪問的函數(例如上述方法中使用的method函數),在JSONP跨域訪問時會自動幫我們創(chuàng)建處理跨域訪問的函數。
JSONP跨域訪問的優(yōu)點:
1.它不像XMLHTTPRequest對象實現的AJAX請求那樣受到同源策略的限制;
2.它的兼容性更好,不需要XMLHTTPRequest或ActiveX的支持;
3.在請求完成后可以通過調用callback的方法傳回結果。
JSONP跨域訪問的缺點:
1.它只支持GET請求而不支持POST及其他類型的請求;
2.它只支持跨域HTTP請求這種情況,不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
相關文章
Hallo.js基于jQuery UI所見即所得的Web編輯器
Hallo.js是一個簡單的富文本編輯器,基于jQuery UI的部件,利用HTML5的contentEditable功能實現了即時編輯功能,其主要目的是為了提供良好的書寫體驗,對Hallo.js感興趣的小伙伴們可以參考一下2016-01-01