終于！我也開始學習了Ajax！但是學完整個階段，我只想說，這請求方式也太多了吧！！！對一個初學者來說，真的太難了！！！來看看我和Ajax斗智斗勇的那些辛酸史吧！
目錄
一、Ajax簡介
1.什么是Ajax？
2.Ajax的優缺點
3.介面測驗工具
二、jQuery中的ajax
1.$.get()
2.$.post()
3.$.ajax()
4.ajaxStart()
5.ajaxStop()
三、XMLHttpRequest
1.XMLHttpRequest 簡介
2.使用xhr發起get請求
3.使用xhr發起post請求
四、Axios
1.什么是axios
2.axios發起get請求
3.axios發起post請求
4.axios發起請求
五、JSONP
1.JSONP簡介
2.自定義JSONP
3.jQuery中的JSONP
一、Ajax簡介
1.什么是Ajax？
Ajax，Asynchronous JavaScript and XML，即使用JavaScript語言與服務器進行異步互動，傳輸的資料為XML，
Ajax并非編程語言，而是一種使用現有標準的新方法，
2.Ajax的優缺點
優點：不需要重新加載整個頁面，就可以實作與服務器交換資料并更新部分網頁內容，
缺點:在需要同步互動的時候，增多了對服務器的訪問次數，有兼容性問題，
3.介面測驗工具
Postman，可以直接測驗介面能否正確運行，
二、jQuery中的ajax
1.$.get()
$.get() 方法使用 HTTP GET 請求從服務器加載資料，
$.get(URL,data,function(data,status,xhr),dataType)
例：獲取id為1的圖書串列
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
console.log(res)
})2.$.post()
$.post() 方法使用 HTTP POST 請求從服務器加載資料，
$.post(URL,data,function(data,status,xhr),dataType)
例：添加圖書
$.post('http://www.liulongbin.top:3006/api/addbook',
{ bookname: "紅樓夢", author: "曹雪芹", publisher: "北京出版社" },
function (res) {
console.log(res);
}
})3.$.ajax()
$.ajax()既可以向服務器請求資料，又可以向服務器提交資料
$.ajax({method,URl,data,function(data,status,xhr),dataType})
例1：使用$.ajax()向服務器請求資料
$.ajax({
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
// data:{
// id :1
// },
success :function (res) {
console.log(res);
}
})例2：使用$.ajax()向服務器發送資料
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: "紅樓夢", author: "曹雪芹", publisher: "北京出版社"
},
success: function (res) {
console.log(res);
}
})使用ajax上傳檔案
檔案上傳時，不再是普通的String型別，需要用到H5的FormData方法，同時在ajax中加上兩條屬性：
contentType : false, //不設定Content-Type請求頭
processData : false, // 不處理發送的資料
例：上傳頭像檔案
4.ajaxStart()
ajaxStart() 方法規定Ajax請求開始時運行的函式，該方法會監聽當前檔案中的所有Ajax請求，
$(document).ajaxStart(function())
注意：自 jQuery 版本 1.8 起，該方法只被附加到檔案，
5.ajaxStop()
ajaxStop()方法規定所有的Ajax請求完成時運行的函式，
$(document).ajaxStop(function())
注意：自 jQuery 版本 1.8 起，該方法只被附加到檔案，
三、XMLHttpRequest
1.XMLHttpRequest 簡介
1.什么是XMLHttpRequest物件？
XMLHttpRequest 物件用于在后臺與服務器交換資料，
由圖可知，jQuery中的Ajax方法是基于XMLHttpRequest物件封住出來的，
2.創建 XMLHttpRequest 物件的語法：
xhr = new XMLHttpRequest();
3. xhr物件的readyState屬性
該屬性用來表示當前Ajax請求所處的狀態，每個Ajax請求必然處于一下狀態中的一個，
2.使用xhr發起get請求
// 1. 創建 XHR 物件
var xhr = new XMLHttpRequest()
// 2. 呼叫 open 函式 // 指定請求方式 與 url地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 呼叫 send 函式 // 發起Ajax請求
xhr.send()
// 4. 監聽 onreadystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器回應的資料
console.log(xhr.responseText)
}
}3.使用xhr發起post請求
// 1. 創建 xhr 物件
var xhr = new XMLHttpRequest()
// 2. 呼叫 open 函式
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 設定 Content-Type 屬性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 呼叫 send 函式
xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
// 5. 監聽事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}注意：設定Content-Type是一個固定寫法，必須寫在open()后面send()前面，
例：使用xhr上傳檔案
注意：在使用xhr傳遞引數時，一定要將傳遞的引數物件改寫成拼接字串的形式再傳遞，否則會傳不進去！！！！
四、Axios
1.什么是axios
Axios是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，簡單理解就是ajax的封裝，
相比于原生的XMR物件，axios簡單易用；相比于jQuery，axios更加輕量化，只專注于網路資料請求，
2.axios發起get請求
axios.get(URL,{params:{/*引數*/}}).then(callback)
例：使用axios發起get請求
var url = 'http://www.liulongbin.top:3006/api/getbooks'
var paramsObj = { id: 1 }
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data)
})注意：res.data才是服務器回應回來的真實資料，res是axios為我們包裝的資料，
3.axios發起post請求
axios.get(URL,{params:{/*引數*/}}).then(callback)
例：使用axios發起post請求
var url = 'http://www.liulongbin.top:3006/api/addbook'
var dataObj = { bookname: "紅樓夢", author: "曹雪芹", publisher: "北京出版社" }
axios.post(url, dataObj).then(function (res) {
console.log(res.data)
})4.axios發起請求
axios中也提供了類似jQuery中的$.ajax()的函式，語法如下：
axios({
method:'請求型別',
url:'請求的URL地址'，
data:{ /* POST資料 */},
params:{ /* GET資料 */}
}).then(callbak)
注意：根據請求的型別不同，提交引數的方式也不同！
例：使用axios發起get請求
var url = 'http://www.liulongbin.top:3006/api/getbooks'
var paramsData = { id: 2 }
axios({
method: 'GET',
url: url,
params: paramsData
}).then(function (res) {
console.log(res.data)
})例：使用axios發起post請求
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: { bookname: "紅樓夢", author: "曹雪芹", publisher: "北京出版社" }
}).then(function (res) {
console.log(res.data)
})五、JSONP
1.JSONP簡介
- 什么是jsonp？
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取資料，
- 為什么需要jsonp？
同源策略：是瀏覽器提供的一個安全功能，它不允許非同源網站之間進行資源的互動，此時我們可以采用jsonp實作跨域獲取資料，
- jsonp的實作原理？
通過<script>標簽中的src屬性實作跨域資料訪問，注意，jsonp和Ajax之間沒有任何關系！!放在本篇是因為也是一種獲取資料的方式，同時，jsonp只支持GET資料請求，不支持POST資料請求，
2.自定義JSONP
1.定義一個success回呼函式
2.通過<script>標簽，請求介面資料
<script>
function success(data) {
console.log('JSONP回應回來的資料是：')
console.log(data)
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>
在jsonp中引數是通過url拼接傳遞，
3.jQuery中的JSONP
jQuery不僅可以發起真正的Ajax請求，也可以發起jsonp請求，只需要在發起請求時添加dataType：'jsonp',此時發起的就是jsonp資料請求，在jQuery中的jsonp請求實作原理是動態添加和移出<script>標簽，
function success(data) {
console.log('JSONP回應回來的資料是：')
console.log(data)
}
// jQuery中的jsonp
$.ajax({
url:'http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30',
dataType:'jsonp',
success:function(res){
console.log(res);
}
})此時我們打開開發者工具發現，XHR中不再有請求記錄，在js中有請求記錄，證明這是一個jsonp請求，
另外，使用jQuery發起jsonp請求，jQuery會給我們回傳一個回呼函式屬性名和回呼函式引數值名字，我們可以通過jsonp和jsonpCallback來指定，
指定前：
指定后：
指定陳述句：
通篇梳理下來，在剛接觸這個階段，我們需要熟練使用用ajax和axios發起資料請求以及使用jsonp實作跨域資料請求，這里面的彎彎繞繞說多不多說少不少的，多理解多運用總是可以掌握的，在跟Ajax斗智斗勇幾天后，終于可以硬氣的說，拿下！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378222.html
標籤：其他
下一篇：一起來看看隨滑鼠飛翔的小天使吧