Ajax(Asynchronous JavaScript and XML):是指一種創(chuàng)建交互式的網(wǎng)頁開發(fā)技術(shù)。
Ajax不是一種單一的技術(shù)仑撞，是多個(gè)技術(shù)的組合。它是把JavaScript凝垛、CSS策橘、DOM和HTML結(jié)合起來的一種編程思路和方法的統(tǒng)稱。Ajax技術(shù)顛覆了以往界面像服務(wù)端請(qǐng)求數(shù)據(jù)瓶逃，需要重新刷新整個(gè)頁面對(duì)這個(gè)數(shù)據(jù)做出展示的行為束铭；只需要發(fā)出異步請(qǐng)求，等請(qǐng)求結(jié)果返回客戶端后厢绝，在回調(diào)函數(shù)內(nèi)對(duì)需要改變的部分界面進(jìn)行數(shù)據(jù)綁定和顯示契沫，做到只需要刷新部分頁面區(qū)域的功能而無需每次刷新整個(gè)頁面，現(xiàn)在都是最常見的基本操作了昔汉。
Ajax的技術(shù)核心是XMLHttpRequest對(duì)象懈万，而XMLHttpRequest說白了就是一個(gè)網(wǎng)絡(luò)框架。Ajax的含義是使用JavaScript通過XMLHttpRequest對(duì)象進(jìn)行與服務(wù)器的通信靶病，返回xml,json,html或者其他任何一種文本格式的數(shù)據(jù)钞速，然后對(duì)數(shù)據(jù)進(jìn)行處理，異步顯示界面等行為的一種編程操作嫡秕。
1渴语、網(wǎng)絡(luò)請(qǐng)求
//原生JavaScript ajax網(wǎng)絡(luò)請(qǐng)求
var usernameStr = '超人來了';
var xhrSend = new XMLHttpRequest();
xhrSend.open('POST', 'http://localhost:8000/muxiInfo', true);
xhrSend.setRequestHeader('Content-Type', 'application/json');
xhrSend.send(JSON.stringify({ UserName: usernameStr }));
//----------同步寫法---onload
xhrSend.onload = function () {
if (xhrSend.status == 200) {
console.log('--sendTest-接收：' + xhrSend.responseText);
var data = JSON.parse(xhrSend.responseText);
httpShow.innerHTML = data.message;
} else {
httpShow.innerHTML = '異常了呢';
}
};
//-----------異步寫法----onreadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
isSending = false;
if (xhr.status == 200) {
console.log('--sendTest-接收：' + xhrSend.responseText);
httpShow.innerHTML = xhr.response;
} else {
httpShow.innerHTML = '請(qǐng)求成功，但是返回異常了呢';
}
} else {
//其他狀態(tài)昆咽，時(shí)刻監(jiān)聽
}
}
//jQuery框架 ajax網(wǎng)絡(luò)請(qǐng)求
$.ajax({
url: 'http://localhost:8000/muxiInfo',
//請(qǐng)求參數(shù)
data: { UserName: '李牛Ajax' },
//請(qǐng)求類型POST/GET驾凶，不區(qū)分大小寫
type: 'POST',
//發(fā)送server的參數(shù)類型
contentType: 'application/json',
//期望server響應(yīng)返回的結(jié)果類型
dataType: 'json',
//是否異步請(qǐng)求，默認(rèn)true
async:true,
//超時(shí)時(shí)間
timeout: 2000,
//成功回調(diào)
success: function (data) {
console.log(data);
httpShow.innerHTML = data.message;
},
//失敗回調(diào)
error: function (e) {
httpShow.innerHTML = e
}
})
2掷酗、跨域問題解決方案：
-
方案1：原生方法實(shí)現(xiàn)调违，利用<script>標(biāo)簽，使用程序員自己實(shí)現(xiàn)的巧妙方法“JSONP”跨域泻轰，只能處理GET請(qǐng)求
- 方案2：使用jQuery請(qǐng)求實(shí)現(xiàn)
jQuery跨域的原理也是通過外鏈 <script> 來實(shí)現(xiàn)的,然后在通過回調(diào)函數(shù)加上回調(diào)函數(shù)的參數(shù)來實(shí)現(xiàn)真正的跨域技肩，默認(rèn)callback函數(shù)名，可自定義浮声。
jQuery 在每次跨域發(fā)送請(qǐng)求時(shí)都會(huì)有callback這個(gè)參數(shù)虚婿，其實(shí)這個(gè)參數(shù)的值就是回調(diào)函數(shù)名稱，所以泳挥，服務(wù)器端在發(fā)送json數(shù)據(jù)時(shí)然痊，應(yīng)該把這個(gè)參數(shù)放到前面并加上括號(hào)，這個(gè)參數(shù)的值往往是隨機(jī)生成的屉符，如：jQuery1294734708682剧浸，同時(shí)也可以通過 $.ajax 方法設(shè)置 jsonpcallback 方法的名稱锹引。明白了原理后，服務(wù)器端應(yīng)該這樣發(fā)送數(shù)據(jù)：
1. jsonp唆香、jsonpcallback嫌变，jsonp跨域時(shí)可以自定義的兩個(gè)參數(shù)
2. jsonp: 回掉函數(shù)名的參數(shù)名，默認(rèn)callback躬它，服務(wù)端通過它來獲取到回掉函數(shù)名
3. jsonpCallback: 回掉函數(shù)名腾啥，默認(rèn)jquery自動(dòng)生成
//前端發(fā)送格式
如：http://xxx.html?jsonp=jsonpCallback&xxxx&xxx，默認(rèn)：http://xxx.html?callback=jQuery13213_564964&xxxx&xxx
//服務(wù)端發(fā)送格式
string message = "jQuery13213_564964({\"userid\":0,\"username\":\"null\"})";//服務(wù)端返回到前端js引擎解析虑凛，調(diào)用jQuery13213_564964()函數(shù)
-
設(shè)置Cors請(qǐng)求頭
Cors
-
使用WebSocket通信
image.png - 設(shè)置代理服務(wù)器：通過同一域名端口下設(shè)置代理服務(wù)器去請(qǐng)求目標(biāo)服務(wù)器返回?cái)?shù)據(jù)
