ajax 和jsonp 使用
阿新 • • 發佈:2019-01-01
定義:
- ajax和jsonp 用於和後端通訊,獲取資料和資訊,實現頁面的區域性重新整理功能。、
- ajax
一種傳送HTTP請求與後臺進行非同步/同步通訊的技術。
原理:例項化XmlHttp物件,使用此物件與後臺通訊。
- AJAX 的方法:
- **1、
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//請求成功的回撥函式
alert('請求成功');
})
.fail(function() {
alert('伺服器超時,請重試!');
});
});
同源策略:
- ajax請求的頁面或資源只能是同一個域下面的資源,不能是其他域的資源,這是在設計ajax時基於安全考慮。
- 2、$.get()
— - $ .get()方法的引數額和$.ajax()不一樣,網址url為必須的引數,其他三個為可選。
- data為返回的資料,status表示請求的狀態,一般有‘success’,‘error’,‘timeout’等幾種。
- 如果dataType 型別為jsonp,也可以跨域請求資料。
- 無請求失敗的回撥函式
$.get(
"./data.json",
function (data,status) {
console.log(data);
},
"json"
);
$.post():
與get的請求方式不一樣。
$.load():
從伺服器載入資料,不需要指定dataType,返回的資料會自動放置到元素中。
- 引數
url: 請求地址。
data: 請求引數,可選。
function(response,status,xhr): 請求成功的回撥函式。 - 注意:
不能跨域訪問資料。
response為返回的資料,status為請求的狀態。
無請求失敗的回撥函式。
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
<div class='box'></div>
$.getJSON():
使用AJAX的HTTP GET 請求獲取JSON資料
引數:
- url: 請求網址,必須的引數。
- data: 傳送給伺服器的資料。
- function(data,status,xhr): 請求成功的回撥函式。
注意:
方法直接獲取的是JSON資料。
無返回失敗的回撥函式
回撥函式是命名函式,不是匿名函式。
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
- getScript()
方法使用 AJAX 的 HTTP GET 請求獲取並執行js程式碼。
引數:
url: 請求地址。
function(data,status): 請求成功的回撥函式。
注意:
返回的data是js程式碼
該方法可以用來動態載入js程式碼
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
- JSONP
定義:一種可以實現跨域傳送http請求的資料通訊格式,可以嵌在ajax中使用。
原理:利用script標籤可以跨域連結資源的特性。 - 利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式訪問
jsonpCallback:'aa' //獲取資料的函式
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('伺服器超時,請重試!');
});
aa({
"data":{
"email":"xi",
"age":"18"
}
})
- 使用ajax的方法本質上也是script標籤可以跨域連結資源,不過jquery為其封裝了相同的方法,看起來一樣。
- 執行過程為:ajax通過jsonp技術跨域訪問data.js檔案,通過找到aa()方法將其引數傳遞給.done方法的data引數執行.done方法。
- 目前這種方式仍然有其侷限性,就是必須知道data.js檔案的名字和定義的方法aa,如果在僅僅知道域名的情況下,需要另外的方法.
- 方法二
$.ajax({
url:'https://sug.so.360.cn/suggest?',//請求360搜尋的聯想資料
type:'get',
dataType:'jsonp', //jsonp格式訪問
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('伺服器超時,請重試!');
});
通過瀏覽器檢視每次輸入關鍵字伺服器傳送回的資料包,找到js檔案中header的地址以及相關的提交資料,發現key為word關鍵字,因此可以向伺服器傳送data資料。
伺服器返回的資料會自動傳給回撥的匿名函式的引數data.