ajax【點(diǎn)擊】請(qǐng)求流程
test.html代碼流程
- 創(chuàng)建button按鈕，為button綁定一個(gè)點(diǎn)擊事件（函數(shù)）
- 在函數(shù)內(nèi)書(shū)寫(xiě)ajax代碼
2.1 創(chuàng)建ajax對(duì)象
2.2 設(shè)置onreadystatechange屬性 用來(lái)監(jiān)聽(tīng)變化 如果有變化 會(huì)響應(yīng)一個(gè)函數(shù)
2.2.1 判斷readyState 是否等于4并且status 是否等于200
2.2.2 獲取請(qǐng)求得結(jié)果
2.3 設(shè)置請(qǐng)求參數(shù)（請(qǐng)求方式豺总，文件名字，同步異步）
2.4 發(fā)送請(qǐng)求
test.php代碼
返回給[test.html請(qǐng)求]一個(gè)結(jié)果
test.html代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>顯示歡迎詞</button>
<h2></h2>
</body>
<script>
var btn = document.getElementsByTagName('button')[0]; // 獲取到按鈕 按鈕序號(hào)為0
btn.onclick = function () { // 為按鈕綁定點(diǎn)擊事件 值是一個(gè)函數(shù)
var xhr = new XMLHttpRequest(); // 創(chuàng)建Ajax對(duì)象
xhr.onreadystatechange = function () { // 設(shè)置onreadystatechange屬性 這個(gè)屬性監(jiān)聽(tīng)ajax請(qǐng)求的變化
if (xhr.readyState == 4 && xhr.status == 200){ // readyState狀態(tài)為4時(shí) ajax請(qǐng)求結(jié)束 status為服務(wù)器返回的狀態(tài)碼 狀態(tài)碼為200時(shí) 正確返回?cái)?shù)據(jù) 404為錯(cuò)誤
var h2 = document.getElementsByTagName('h2')[0]; // 獲取到h2標(biāo)簽 按鈕序號(hào)為0
h2.innerHTML = xhr.responseText; // 為h2標(biāo)簽傳值
}
}
xhr.open('get','test.php',true); // 初始化ajax請(qǐng)求[類型 地址 異步]
xhr.send(null); // 將請(qǐng)求發(fā)送到瀏覽器 get請(qǐng)求不需要傳參
}
</script>
</html>
test.php代碼如下
<?php
echo '歡迎學(xué)習(xí)ajax與php';
?>
