（一）$ajax
1.已封裝好的ajax：
2.常用參數(shù)：
- cache: 設(shè)置ie瀏覽器的緩存問題， cache: false 不緩存
- url：請(qǐng)求地址 （必寫）
- type / method：請(qǐng)求方法，默認(rèn)為
get。（必寫） - dataType：預(yù)期服務(wù)端響應(yīng)數(shù)據(jù)類型。'text'，'json'...默認(rèn)是json格式。
- contentType：請(qǐng)求體內(nèi)容類型，如果是POST請(qǐng)求，默認(rèn)
application/x-www-form-urlencoded - data：（object或string）傳遞到服務(wù)端的數(shù)據(jù)
- timeout：請(qǐng)求超時(shí)時(shí)間
- beforeSend：請(qǐng)求發(fā)起之前觸發(fā)
- complete：請(qǐng)求完成觸發(fā)（不管成功與否）
- success：請(qǐng)求成功之后觸發(fā)（響應(yīng)狀態(tài)碼 200）
- error：請(qǐng)求失敗觸發(fā)
- processData：是否讓jQuery幫我們將發(fā)送給服務(wù)器的數(shù)據(jù)進(jìn)行處理（默認(rèn)：true表示將對(duì)象處理成字符串）
代碼舉栗：
<body>
<p id="loading" style="display: none">玩命加載中...</p>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$.ajax({
//請(qǐng)求方式，默認(rèn)是get
type: 'GET',
//URL 請(qǐng)求地址
url: '/big-data',
//發(fā)送給服務(wù)器的參數(shù)（可選，可以是字符串或者對(duì)象）
data: 'id=11&age=22&sex=33',
//處理服務(wù)器返回的數(shù)據(jù)
success: function(result) {
//result就是服務(wù)器返回的數(shù)據(jù)
console.log(result);
//返回一個(gè)object{id:11,age:22,sex:33}
}
//發(fā)送請(qǐng)求開始時(shí)
beforeSend: function() {
$('#loading').show();
},
//請(qǐng)求結(jié)束后
complete: function() {
$('#loading').hide();
}
//把data對(duì)象轉(zhuǎn)成字符串
processData: false
})
</script>
</body>
3.GET和POST快捷方法
$.get(url, [data], [callback], [dataType])
$.post(url, [data], [callback], [dataType])
屬性u(píng)rl必須寫，其他可選。
代碼舉栗：
$.get('/time', function(result) {
console.log(result);
});
4.全局事件
語(yǔ)法：$.ajaxSetup({事件: 處理函數(shù), 事件:處理函數(shù), ...});
代碼舉栗：
<body>
<input type="button" value="請(qǐng)求">
<p id="loading" style="display: none">玩命加載中...</p>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//注冊(cè)全局事件，后續(xù)每次Ajax請(qǐng)求都會(huì)自動(dòng)觸發(fā)全局事件
$.ajaxSetup({
beforeSend: function () {
$('#loading').show();
},
complete: function () {
$('#loading').hide();
}
});
//如果有很多ajax請(qǐng)求，每一個(gè)請(qǐng)求都需要一個(gè)提示
$.ajax({
url: '/big-data',
success: function (result) {
console.log(result.length);
}
})
//點(diǎn)擊按鈕的時(shí)候再次發(fā)生ajax請(qǐng)求
$('input').click(function () {
$.ajax({
url: '/big-data',
success: function (result) {
console.log(result.length);
}
})
})
</script>
</body>
進(jìn)度提示插件：* https://github.com/rstacruz/nprogress
（二）XMLHttpRequest
1.responseType / response
- responseType：預(yù)期服務(wù)器返回?cái)?shù)據(jù)的類型
默認(rèn)為空：""，與text一樣。
text：文本
json：JSON格式的數(shù)據(jù)
document：文檔對(duì)象。服務(wù)器返回的結(jié)果是XML時(shí)要指定為document。 - response
可以接收服務(wù)器返回的任何類型的數(shù)據(jù)
根據(jù)responseType的值自動(dòng)處理返回結(jié)果，可以接收任何類型的結(jié)果
代碼舉栗：
var xhr = new XMLHttpRequest();
xhr.open('get', '/query-get?id=1&age=2');
// responseType要放到send前面
xhr.responseType = 'json';
xhr.send();
xhr.onload = function () {
// response會(huì)根據(jù)responseType指定的類型自動(dòng)處理結(jié)果
console.log(this.response);
}
2.onload / onprogress
- onload：當(dāng)readyState等于4的時(shí)候觸發(fā)
- onprogress：當(dāng)readyState等于3的時(shí)候觸發(fā)（數(shù)據(jù)正在返回途中的時(shí)候觸發(fā)）
- onloadstart()：當(dāng)開始發(fā)送請(qǐng)求的時(shí)候觸發(fā)
- onloadend()：當(dāng)請(qǐng)求響應(yīng)過程結(jié)束的時(shí)候觸發(fā)
代碼舉栗：
var xhr = new XMLHttpRequest()
xhr.open('GET', '/time')
xhr.onload = function () {
// onload readyState => 4
// 只在請(qǐng)求完成時(shí)觸發(fā)
console.log(this.readyState)
}
xhr.onprogress = function () {
// onprogress readyState => 3
// 只在請(qǐng)求進(jìn)行中觸發(fā)
console.log(this.readyState)
}
xhr.onloadstart = function () {
// onloadstart readyState => 1
// 開始發(fā)送請(qǐng)求的時(shí)候觸發(fā)
console.log(this.readyState)
}
xhr.onloadend = function () {
// onloadend readyState => 4
// 請(qǐng)求響應(yīng)過程結(jié)束的時(shí)候觸發(fā)
console.log(this.readyState)
}
xhr.send(null)
3.FormData
使用FormData收集表單數(shù)據(jù)提交給服務(wù)器，一定要選擇POST方式，且必須省略xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');這行代碼。
有form表單時(shí)代碼舉栗：
<body>
<form id="fm">
<input type="text" name="user">
<br>
<input type="password" name="pwd">
<br>
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
<br>
<input type="file" name="pic">
<br/>
<input type="button" id="btn" value="提交">
</form>
<script>
document.getElementById('btn').onclick = function () {
//找到表單DOM對(duì)象
var fm = document.getElementById('fm');
// 創(chuàng)建FormData對(duì)象并傳遞表單
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
//接口fd：收到提交的數(shù)據(jù)后會(huì)返回收到的數(shù)據(jù)
xhr.open('POST', '/fd');
xhr.responseType = 'json';
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(fd);
xhr.onload = function () {
console.log(this.response);
}
}
</script>
</body>
沒有form表單時(shí)代碼舉栗：
<body>
<input type="text" name="user"><br>
<input type="password" name="pwd"><br>
<input type="file" name="pic"><br/>
<input type="button" id="btn" value="提交">
<script>
document.getElementById('btn').onclick = function () {
//實(shí)例化FormData對(duì)象
var fd = new FormData();
//調(diào)用內(nèi)置對(duì)象FormData中自帶的方法：append追加
fd.append('username', document.getElementById('user').value);
fd.append('password', document.getElementById('pwd').value);
var f = document.getElementById('pic');
var fileObj = f.fileObj[0];
fd.append('myfile', fileObj);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/fd');
xhr.responseType = 'json';
xhr.send();
xhr.onload = function () {
console.log(this.response);
}
}
</script>
</body>
使用FormData時(shí)要傳對(duì)象而不是字符串。
jQuery中使用FormData代碼舉栗：
<body>
<input type="text" name="user"><br>
<input type="password" name="pwd"><br>
<input type="file" name="pic"><br/>
<input type="button" id="btn" value="提交">
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('$btn').click(function () {
//使用FormData收集表單信息
var fd = new FormData(document.getElementById('fm'));
$.ajax({
type: 'POST',
url: '/fd',
data: fd,
//表示不讓jQuery將fd對(duì)象處理成字符串，應(yīng)該直接使用fd對(duì)象
processData: false,
//使用FormData時(shí)不能設(shè)置Content-Type，讓FormData自己處理，所以改成false
contentType: false,
success: function (result) {
console.log(result);
}
})
})
</script>
</body>
