溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Ajax和jsonp怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
前言：ajax和jsonp可以與后臺通信，獲取數(shù)據(jù)和信息，但是又不用刷新整個頁面，實(shí)現(xiàn)頁面的局部刷新。
一、ajax
?定義：一種發(fā)送http請求與后臺進(jìn)行異步通訊的技術(shù)。
?原理：實(shí)例化xmlhttp對象，使用此對象與后臺通信。
ajax的同源策略：
?ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設(shè)計(jì)ajax時基于安全考慮。
--------------------------------------------------------------------------------
ajax的方法：
1. $.ajax({}):
?常用參數(shù)： ?url：請求網(wǎng)絡(luò)地址
?type：請求方式，默認(rèn)是'GET'，常用'POST'
?dataType：設(shè)置返回的數(shù)據(jù)格式，一般使用json，也可以是html和jsonp；
?data：設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)
?.done():設(shè)置請求成功后的回調(diào)函數(shù)
?.fail():設(shè)置請求失敗后的回調(diào)函數(shù)
?async:設(shè)置是否異步，默認(rèn)值是'true'，表示異步
?代碼運(yùn)用：
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//請求成功的回調(diào)函數(shù)
$("input").val(dat.name);
})
.fail(function() {
alert('服務(wù)器超時，請重試！');
});
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>說明：data表示后臺返回的數(shù)據(jù)；ajax使用需要依賴服務(wù)器環(huán)境。
2. $.get():
?$.get() 方法使用GET請求從服務(wù)器加載數(shù)據(jù);也是一種無刷新的請求數(shù)據(jù)的ajax方法。
?參數(shù)：
?url:訪問的網(wǎng)址，需要遵循同源策略；
?data:發(fā)送到服務(wù)器的數(shù)據(jù)。
?function(data,status){}：請求成功運(yùn)行的函數(shù)
?dataType：請求響應(yīng)的數(shù)據(jù)類型。
//參考代碼：
$(function () {
$("input").click(function () {
$.get(
"./data.json",
function (data,status) {
console.log(data.name);
},
"json"
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>?$.get()方法的參數(shù)和$.ajax()不一樣，網(wǎng)址url為必須的參數(shù)，其他三個可選。
?data為返回的數(shù)據(jù)，status表示請求的狀態(tài)，一般有""success","error","timeout"等幾種。
?如果datatype類型為jsonp，也可以跨域請求數(shù)據(jù)。
?無請求失敗的回調(diào)函數(shù)。
3. $.post()
?$.get() 方法使用POST請求從服務(wù)器加載數(shù)據(jù);
?其使用的方法和$.get()方法完全一樣。
4. $.load():
?從服務(wù)器加載數(shù)據(jù)，不需要指定datatype,返回的數(shù)據(jù)會自動放置到元素中。
?參數(shù)：
?URL:地址；
?data:請求的參數(shù)，可選；
?function(response,status,xhr)：請求成功的回調(diào)函數(shù)。
$(function () {
$("input").click(function () {
$(".box").load(
"./data.json",
function (response,status) {
console.log(data.name);
}
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
<div class="box"></div>
</div>
</body>?返回的數(shù)據(jù)會放置在div中；
?不能跨域訪問數(shù)據(jù)；
?response為返回的數(shù)據(jù)，status為請求的狀態(tài)；
?無請求失敗的回調(diào)函數(shù)。
4. getJSON()
?方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數(shù)據(jù)。
?參數(shù)：
?url: 請求網(wǎng)址，必須的參數(shù)；
?data: 發(fā)送給服務(wù)器的數(shù)據(jù)；
?function(data,status,xhr):請求成功的回調(diào)函數(shù)
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>?方法直接獲取的是json數(shù)據(jù)；
?無返回失敗的回調(diào)函數(shù)；
?回調(diào)函數(shù)時命名函數(shù)，不是匿名函數(shù)；
5. getScript()
?方法使用 AJAX 的 HTTP GET 請求獲取并執(zhí)行js代碼。
?參數(shù)：
?url: 請求網(wǎng)址，必須的參數(shù)；
?function(data,status):請求成功的回調(diào)函數(shù)
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
<body>
<div>
<input type="button" value="xinzhi">
</div>
</body>?返回結(jié)data是js代碼；
?該方法可以用來動態(tài)加載js代碼。
二、jsonp
?定義：一種可以實(shí)現(xiàn)跨域發(fā)送http請求的數(shù)據(jù)通信格式，可以嵌在ajax中使用。
?原理：利用script標(biāo)簽可以跨域鏈接資源的特性。
用法一：函數(shù)傳參
<script type="text/javascript">
function aa(data){
console.log(data.name);
}
</script>
<script type="text/javascript" src="....../data.js"></script>說明：在外部定義一個data.js文件，這個文件的路徑可以與當(dāng)前頁面不在同一個域下面。
data.js的內(nèi)容：
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})?將數(shù)據(jù)以頁面定義的函數(shù)的參數(shù)的形式傳遞進(jìn)去，從而獲取數(shù)據(jù)。
?本質(zhì)上可以將數(shù)據(jù)拆分，使得數(shù)據(jù)不用強(qiáng)制保存在同一個域名下。
用法二：利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式訪問
jsonpCallback:'aa' //獲取數(shù)據(jù)的函數(shù)
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服務(wù)器超時，請重試！');
});?data.js的內(nèi)容和上面一樣。
?使用ajax的方法本質(zhì)上也是script標(biāo)簽可以跨域鏈接資源，不過jquery為其封裝了相同的方法，看起來一樣。
?以上代碼的執(zhí)行過程為：ajax通過jsonp技術(shù)跨域訪問data.js文件，通過找到aa()方法將其參數(shù)傳遞給.done方法的data參數(shù)執(zhí)行.done方法。
?目前這種方式仍然有其局限性，就是必須知道data.js文件的名字和定義的方法aa，如果在僅僅知道域名的情況下，需要另外的方法.
用法三
var $input = $("input");
$input.keyup(function () {
$.ajax({
url:'https://sug.so.#/suggest?',//請求360搜索的聯(lián)想數(shù)據(jù)
type:'get',
dataType:'jsonp', //jsonp格式訪問
data: {word: $input.val()},
})
.done(function(data){
console.log(data);
})
.fail(function() {
alert('服務(wù)器超時，請重試！');
});
})
....
<body>
<input type="text">
</body>?通過瀏覽器查看每次輸入關(guān)鍵字服務(wù)器發(fā)送回的數(shù)據(jù)包，找到j(luò)s文件中header的地址以及相關(guān)的提交數(shù)據(jù)，發(fā)現(xiàn)key為word關(guān)鍵字，因此可以向服務(wù)器發(fā)送data數(shù)據(jù)。
?服務(wù)器返回的數(shù)據(jù)會自動傳給回調(diào)的匿名函數(shù)的參數(shù)data.
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Ajax和jsonp怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼