在前端開發中,使用ajax請求跨域是一個常見的需求。但是,由于瀏覽器的安全策略限制,ajax直接跨域請求是不被允許的。針對這個問題,jquery提供了jsonp技術,可以在不違反瀏覽器安全策略的前提下實現跨域請求。
下面我們來看一個簡單的跨域案例源碼:
$.ajax({ url: "https://example.com/api", type: "GET", dataType: "jsonp", jsonp: "callback", success: function(result) { console.log(result); }, error: function(xhr, status, error) { console.log(error); } });
上述代碼中,我們使用jquery的$.ajax方法向"https://example.com/api"發送一個GET請求,dataType指定為jsonp。由于jsonp請求并不是標準的ajax請求,所以需要指定jsonp參數的名字為"callback",這個參數將會在請求url后面自動添加。服務器端需要將返回數據包裝成類似于"callback(data)"的形式,來調用前端定義的回調函數。前端定義的success回調函數會在數據返回后執行,將返回結果打印到控制臺中。
需要注意的是,該跨域請求必須被服務器端允許,否則仍然會被瀏覽器攔截。常見的服務器端允許跨域方式有跨域資源共享(CORS)和jsonp。