前言：ajax和jsonp可以與后臺(tái)通信，獲取數(shù)據(jù)和信息，但是又不用刷新整個(gè)頁(yè)面，實(shí)現(xiàn)頁(yè)面的局部刷新。
一、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)放置到元素中。
新聞熱點(diǎn)
疑難解答
圖片精選
