ajax請(qǐng)求的過程
一個(gè)完整的HTTP請(qǐng)求需要的是：
- 請(qǐng)求的網(wǎng)址、請(qǐng)求方法get/post。
- 提交請(qǐng)求的內(nèi)容數(shù)據(jù)换怖、請(qǐng)求主體等虱肄。
- 接收響應(yīng)回來的內(nèi)容。
發(fā)送 Ajax 請(qǐng)求的五個(gè)步驟：
（1）創(chuàng)建異步對(duì)象妙蔗。即 XMLHttpRequest 對(duì)象。
（2）使用open方法設(shè)置請(qǐng)求的參數(shù)。open(method, url, async)夹孔。參數(shù)解釋：請(qǐng)求的方法、請(qǐng)求的url析孽、是否異步搭伤。
（3）發(fā)送請(qǐng)求。
（4）注冊(cè)事件袜瞬。 注冊(cè)onreadystatechange事件怜俐，狀態(tài)改變時(shí)就會(huì)調(diào)用。如果要在數(shù)據(jù)完整請(qǐng)求回來的時(shí)候才調(diào)用邓尤，我們需要手動(dòng)寫一些判斷的邏輯拍鲤。
（5）獲取返回的數(shù)據(jù)。
ajax的get請(qǐng)求舉例：
（1）index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 發(fā)送 get 請(qǐng)求</h1>
<input type="button" value="發(fā)送get_ajax請(qǐng)求" id='btnAjax'>
<script type="text/javascript">
// 綁定點(diǎn)擊事件
document.querySelector('#btnAjax').onclick = function () {
// 發(fā)送ajax 請(qǐng)求 需要 五步
// （1）創(chuàng)建異步對(duì)象
var ajaxObj = new XMLHttpRequest();
// （2）設(shè)置請(qǐng)求的參數(shù)汞扎。包括：請(qǐng)求的方法季稳、請(qǐng)求的url。
ajaxObj.open('get', '02-ajax.php');
// （3）發(fā)送請(qǐng)求
ajaxObj.send();
//（4）注冊(cè)事件澈魄。 onreadystatechange事件景鼠，狀態(tài)改變時(shí)就會(huì)調(diào)用。
//如果要在數(shù)據(jù)完整請(qǐng)求回來的時(shí)候才調(diào)用痹扇，我們需要手動(dòng)寫一些判斷的邏輯铛漓。
ajaxObj.onreadystatechange = function () {
// 為了保證 數(shù)據(jù) 完整返回，我們一般會(huì)判斷 兩個(gè)值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能夠進(jìn)到這個(gè)判斷 說明 數(shù)據(jù) 完美的回來了,并且請(qǐng)求的頁面是存在的
// 5.在注冊(cè)的事件中 獲取 返回的 內(nèi)容 并修改頁面的顯示
console.log('數(shù)據(jù)返回成功');
// 數(shù)據(jù)是保存在 異步對(duì)象的 屬性中
console.log(ajaxObj.responseText);
// 修改頁面的顯示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
（2）02-ajax.php：
<?php
echo 'smyhvae';
?>
ajax的post請(qǐng)求舉例：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 發(fā)送 get 請(qǐng)求</h1>
<input type="button" value="發(fā)送put_ajax請(qǐng)求" id='btnAjax'>
<script type="text/javascript">
// 異步對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置屬性
xhr.open('post', '02.post.php');
// 如果想要使用post提交數(shù)據(jù),必須添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 將數(shù)據(jù)通過send方法傳遞
xhr.send('name=fox&age=18');
// 發(fā)送并接受返回值
xhr.onreadystatechange = function () {
// 這步為判斷服務(wù)器是否正確響應(yīng)
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
POST請(qǐng)求時(shí)注意
如果想讓 像form 表單提交數(shù)據(jù)那樣使用POST請(qǐng)求帘营，就需要使用 XMLHttpRequest 對(duì)象的 setRequestHeader()方法 來添加 HTTP 頭票渠。然后在 send() 方法中添加想要發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","ajax_test.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=smyhvae&age=27");
onreadystatechange 事件
注冊(cè) onreadystatechange 事件后，每當(dāng) readyState 屬性改變時(shí)芬迄，就會(huì)調(diào)用 onreadystatechange 函數(shù)问顷。
readyState：（存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化）
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成禀梳，且響應(yīng)已就緒
status：
200: "OK"杜窄。
404: 未找到頁面。
在 onreadystatechange 事件中算途，當(dāng) readyState 等于 4塞耕，且狀態(tài)碼為200時(shí)，表示響應(yīng)已就緒嘴瓤。
服務(wù)器響應(yīng)的內(nèi)容
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)扫外。
responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)莉钙。
如果響應(yīng)的是普通字符串，就使用responseText筛谚；如果響應(yīng)的是XML磁玉，使用responseXML。
