ajax發(fā)送http請(qǐng)求并與后臺(tái)異步通信的技術(shù)，它的原則是實(shí)例化xmlhttp對(duì)象并使用它與后臺(tái)通信，今天錯(cuò)新技術(shù)頻道小編帶大家來(lái)聊一聊全面解析Ajax和jsonp的使用總結(jié)，希望對(duì)你學(xué)習(xí)這方面知識(shí)有幫助！
一、ajax
?定義：一種發(fā)送http請(qǐng)求與后臺(tái)進(jìn)行異步通訊的技術(shù)。
?原理：實(shí)例化xmlhttp對(duì)象，使用此對(duì)象與后臺(tái)通信。
ajax的同源策略：
?ajax請(qǐng)求的頁(yè)面或資源只能是同一個(gè)域下面的資源，不能是其他域的資源，這是在設(shè)計(jì)ajax時(shí)基于安全考慮。
--------------------------------------------------------------------------------
ajax的方法：
1. $.ajax({}):
?常用參數(shù)： ?url：請(qǐng)求網(wǎng)絡(luò)地址
?type：請(qǐng)求方式，默認(rèn)是'GET'，常用'POST'
?dataType：設(shè)置返回的數(shù)據(jù)格式，一般使用json，也可以是html和jsonp；
?data：設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)
?.done():設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
?.fail():設(shè)置請(qǐng)求失敗后的回調(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) {//請(qǐng)求成功的回調(diào)函數(shù) $("input").val(dat.name); }) .fail(function() { alert('服務(wù)器超時(shí)，請(qǐng)重試！'); }); });})......<body> <div> <input type="button" value="xinzhi"> </div></body>說(shuō)明：data表示后臺(tái)返回的數(shù)據(jù)；ajax使用需要依賴服務(wù)器環(huán)境。
2. $.get():
?$.get() 方法使用GET請(qǐng)求從服務(wù)器加載數(shù)據(jù);也是一種無(wú)刷新的請(qǐng)求數(shù)據(jù)的ajax方法。
?參數(shù)：
?url:訪問(wèn)的網(wǎng)址，需要遵循同源策略；
?data:發(fā)送到服務(wù)器的數(shù)據(jù)。
?function(data,status){}：請(qǐng)求成功運(yùn)行的函數(shù)
?dataType：請(qǐng)求響應(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ù)，其他三個(gè)可選。
?data為返回的數(shù)據(jù)，status表示請(qǐng)求的狀態(tài)，一般有""success","error","timeout"等幾種。
?如果datatype類型為jsonp，也可以跨域請(qǐng)求數(shù)據(jù)。
?無(wú)請(qǐng)求失敗的回調(diào)函數(shù)。
3. $.post()
?$.get() 方法使用POST請(qǐng)求從服務(wù)器加載數(shù)據(jù);
?其使用的方法和$.get()方法完全一樣。
4. $.load():
?從服務(wù)器加載數(shù)據(jù)，不需要指定datatype,返回的數(shù)據(jù)會(huì)自動(dòng)放置到元素中。
?參數(shù)：
?URL:地址；
?data:請(qǐng)求的參數(shù)，可選；
?function(response,status,xhr)：請(qǐng)求成功的回調(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ù)會(huì)放置在div中；
?不能跨域訪問(wèn)數(shù)據(jù)；
?response為返回的數(shù)據(jù)，status為請(qǐng)求的狀態(tài)；
?無(wú)請(qǐng)求失敗的回調(diào)函數(shù)。
4. getJSON()
?方法使用 AJAX 的 HTTP GET 請(qǐng)求獲取 JSON 數(shù)據(jù)。
?參數(shù)：
?url: 請(qǐng)求網(wǎng)址，必須的參數(shù)；
?data: 發(fā)送給服務(wù)器的數(shù)據(jù)；
?function(data,status,xhr):請(qǐng)求成功的回調(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ù)；
?無(wú)返回失敗的回調(diào)函數(shù)；
?回調(diào)函數(shù)時(shí)命名函數(shù)，不是匿名函數(shù)；
5. getScript()
?方法使用 AJAX 的 HTTP GET 請(qǐng)求獲取并執(zhí)行js代碼。
?參數(shù)：
?url: 請(qǐng)求網(wǎng)址，必須的參數(shù)；
?function(data,status):請(qǐng)求成功的回調(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代碼；
?該方法可以用來(lái)動(dòng)態(tài)加載js代碼。
二、jsonp
?定義：一種可以實(shí)現(xiàn)跨域發(fā)送http請(qǐng)求的數(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>說(shuō)明：在外部定義一個(gè)data.js文件，這個(gè)文件的路徑可以與當(dāng)前頁(yè)面不在同一個(gè)域下面。
data.js的內(nèi)容：
aa({ "data":{ "name":"xiaohong", "age":"18" }})?將數(shù)據(jù)以頁(yè)面定義的函數(shù)的參數(shù)的形式傳遞進(jìn)去，從而獲取數(shù)據(jù)。
?本質(zhì)上可以將數(shù)據(jù)拆分，使得數(shù)據(jù)不用強(qiáng)制保存在同一個(gè)域名下。
用法二：利用ajax
$.ajax({ url:'...../data.js',//可以不是本地域名 type:'get', dataType:'jsonp', //jsonp格式訪問(wèn) jsonpCallback:'aa' //獲取數(shù)據(jù)的函數(shù)}).done(function(data){ console.log(data.name);}).fail(function() { alert('服務(wù)器超時(shí)，請(qǐng)重試！');});?data.js的內(nèi)容和上面一樣。
?使用ajax的方法本質(zhì)上也是script標(biāo)簽可以跨域鏈接資源，不過(guò)jquery為其封裝了相同的方法，看起來(lái)一樣。
?以上代碼的執(zhí)行過(guò)程為：ajax通過(guò)jsonp技術(shù)跨域訪問(wèn)data.js文件，通過(guò)找到aa()方法將其參數(shù)傳遞給.done方法的data參數(shù)執(zhí)行.done方法。
?目前這種方式仍然有其局限性，就是必須知道data.js文件的名字和定義的方法aa，如果在僅僅知道域名的情況下，需要另外的方法.
用法三
var $input = $("input");$input.keyup(function () { $.ajax({ url:'https://sug.so.360.cn/suggest?',//請(qǐng)求360搜索的聯(lián)想數(shù)據(jù) type:'get', dataType:'jsonp', //jsonp格式訪問(wèn) data: {word: $input.val()}, }) .done(function(data){ console.log(data); }) .fail(function() { alert('服務(wù)器超時(shí)，請(qǐng)重試！'); });})....<body> <input type="text"></body>?通過(guò)瀏覽器查看每次輸入關(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ù)會(huì)自動(dòng)傳給回調(diào)的匿名函數(shù)的參數(shù)data.
在編程的世界中每個(gè)功能都會(huì)產(chǎn)生不同的效果，看完上文介紹的全面解析Ajax和jsonp的使用總結(jié)，相信大家都了解了吧，錯(cuò)新技術(shù)頻道將繼續(xù)為大家?guī)?lái)更多專業(yè)知識(shí)。
新聞熱點(diǎn)
疑難解答
圖片精選
