前言：ajax和jsonp可以與后臺通信，獲取數據和信息，但是又不用刷新整個頁面，實現頁面的局部刷新。
一、ajax
•定義：一種發送http請求與后臺進行異步通訊的技術。
•原理：實例化xmlhttp對象，使用此對象與后臺通信。
ajax的同源策略：
•ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基于安全考慮。
--------------------------------------------------------------------------------
ajax的方法：
1. $.ajax({}):
•常用參數： •url：請求網絡地址
•type：請求方式，默認是'GET'，常用'POST'
•dataType：設置返回的數據格式，一般使用json，也可以是html和jsonp；
•data：設置發送給服務器的數據
•.done():設置請求成功后的回調函數
•.fail():設置請求失敗后的回調函數
•async:設置是否異步，默認值是'true'，表示異步
•代碼運用：
$(function () {
$("input").click(function () {
$.ajax({
url: "./data.json",
type: "get",
dataType: "json",
});
.done(function(data) {//請求成功的回調函數
$("input").val(dat.name);
})
.fail(function() {
alert('服務器超時，請重試！');
});
});
})
......
body>
div>
input type="button" value="xinzhi">
/div>
/body>
說明：data表示后臺返回的數據；ajax使用需要依賴服務器環境。
2. $.get():
•$.get() 方法使用GET請求從服務器加載數據;也是一種無刷新的請求數據的ajax方法。
•參數：
•url:訪問的網址，需要遵循同源策略；
•data:發送到服務器的數據。
•function(data,status){}：請求成功運行的函數
•dataType：請求響應的數據類型。
//參考代碼：
$(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()方法的參數和$.ajax()不一樣，網址url為必須的參數，其他三個可選。
•data為返回的數據，status表示請求的狀態，一般有""success","error","timeout"等幾種。
•如果datatype類型為jsonp，也可以跨域請求數據。
•無請求失敗的回調函數。
3. $.post()
•$.get() 方法使用POST請求從服務器加載數據;
•其使用的方法和$.get()方法完全一樣。
4. $.load():
•從服務器加載數據，不需要指定datatype,返回的數據會自動放置到元素中。
•參數：
•URL:地址；
•data:請求的參數，可選；
•function(response,status,xhr)：請求成功的回調函數。
$(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>
•返回的數據會放置在div中；
•不能跨域訪問數據；
•response為返回的數據，status為請求的狀態；
•無請求失敗的回調函數。
4. getJSON()
•方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數據。
•參數：
•url: 請求網址，必須的參數；
•data: 發送給服務器的數據；
•function(data,status,xhr):請求成功的回調函數
$(function () {
$("input").click(function () {
$.getJSON(
"./data.json",
function(data,status) {
console.log(data.name);
},
);
});
})
......
body>
div>
input type="button" value="xinzhi">
/div>
/body>
•方法直接獲取的是json數據；
•無返回失敗的回調函數；
•回調函數時命名函數，不是匿名函數；
5. getScript()
•方法使用 AJAX 的 HTTP GET 請求獲取并執行js代碼。
•參數：
•url: 請求網址，必須的參數；
•function(data,status):請求成功的回調函數
$(function () {
$("input").click(function () {
$.getScript(
"./data.js",
function(data,status) {
console.log(data);
},
);
});
})
......
body>
div>
input type="button" value="xinzhi">
/div>
/body>
•返回結data是js代碼；
•該方法可以用來動態加載js代碼。
二、jsonp
•定義：一種可以實現跨域發送http請求的數據通信格式，可以嵌在ajax中使用。
•原理：利用script標簽可以跨域鏈接資源的特性。
用法一：函數傳參
script type="text/javascript">
function aa(data){
console.log(data.name);
}
/script>
script type="text/javascript" src="....../data.js">/script>
說明：在外部定義一個data.js文件，這個文件的路徑可以與當前頁面不在同一個域下面。
data.js的內容：
aa({
"data":{
"name":"xiaohong",
"age":"18"
}
})
•將數據以頁面定義的函數的參數的形式傳遞進去，從而獲取數據。
•本質上可以將數據拆分，使得數據不用強制保存在同一個域名下。
用法二：利用ajax
$.ajax({
url:'...../data.js',//可以不是本地域名
type:'get',
dataType:'jsonp', //jsonp格式訪問
jsonpCallback:'aa' //獲取數據的函數
})
.done(function(data){
console.log(data.name);
})
.fail(function() {
alert('服務器超時，請重試！');
});
•data.js的內容和上面一樣。
•使用ajax的方法本質上也是script標簽可以跨域鏈接資源，不過jquery為其封裝了相同的方法，看起來一樣。
•以上代碼的執行過程為：ajax通過jsonp技術跨域訪問data.js文件，通過找到aa()方法將其參數傳遞給.done方法的data參數執行.done方法。
•目前這種方式仍然有其局限性，就是必須知道data.js文件的名字和定義的方法aa，如果在僅僅知道域名的情況下，需要另外的方法.
用法三
var $input = $("input");
$input.keyup(function () {
$.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('服務器超時，請重試！');
});
})
....
body>
input type="text">
/body>
•通過瀏覽器查看每次輸入關鍵字服務器發送回的數據包，找到js文件中header的地址以及相關的提交數據，發現key為word關鍵字，因此可以向服務器發送data數據。
•服務器返回的數據會自動傳給回調的匿名函數的參數data.
總結
以上所述是小編給大家介紹的Ajax和jsonp使用總結，需要的朋友參考下
您可能感興趣的文章:- ajax和jsonp跨域的原理本質詳解
- 基于ajax和jsonp的原生封裝(實例)
- 原生js的ajax和解決跨域的jsonp(實例講解)
- 基于js原生和ajax的get和post方法以及jsonp的原生寫法實例
- 使用原生js封裝的ajax實例(兼容jsonp)
- 原生js jquery ajax請求以及jsonp的調用方法
- ajax與jsonp的區別及用法
