2021-05-12 14:32:11
jquery怎麼解決瀏覽器跨域問題
2019-12-12 22:58:56
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。jQuery相容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
1
第一步：jquery跨域概念。
JSONP跨域存取的優點：
1.它不像XMLHTTPRequest物件實現的AJAX請求那樣受到同源策略的限制；
2.它的相容性更好，不需要XMLHTTPRequest或ActiveX的支援；
3.在請求完成後可以通過呼叫callback的方法傳回結果。
JSONP跨域存取的缺點：
1.它只支援GET請求而不支援POST及其他型別的請求；
2.它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題。
2
第二步：程式碼實現：
1、請求型別必須為get
2、dataType: 'jsonp',
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被觸發.原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了
},
success: function (json) {//用戶端jquery預先定義好的callback函數,成功獲取跨域伺服器上的json資料後,會動態執行這個callback函數
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}
genDynamicContent(qsData,type,json);
},
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
},
error: function(xhr){
//jsonp 方式此方法不被觸發.原因可能是dataType如果指定為jsonp的話,就已經不是ajax事件了
//請求出錯處理
alert("請求出錯(請檢查相關度網路狀況.)");
}
});
3
第三步：借助於scrip標籤實現。
借助於：script標籤可以實現很多內容。
<script src="http://localhost:8080/servlet/jquery-3.3.1.min.js"></script>
4
第四步：借助$.getJSON請求。
$.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?",
function(data){ // 往後台傳遞的引數1;
var html = decodeURI(data.str)
$('#head').html(html); //呼叫用來顯示內容的div
});
相關文章