答：Ajax是一種無需加載整個網頁，就能夠更新部分網頁，與後臺交互的技術。
答：能夠在不更新整個頁面的前提下，維護數據。這使得Web程序可以更快速的迴應用戶的動作，而無需加載不必要的數據。
答：在瀏覽器中，提供了一個javascript的核心類--XMLHttpRequest，該類提供的方法可以幫我們發送HTTP請求，並接收Server的響應。
答：學習XMLHttpRequest核心類的屬性和方法。
案例一：Ajax之GET
demo1.html
<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
用戶名:<input type="text" name="name" value=""><span id='rep'></span>
</p>
</body>
<script>
//獲取DOM對象
var ipt = document.getElementsByName('name')[0];
ipt.onblur = function(){
var xhr = new XMLHttpRequest();
xhr.open('get','demo1.php?name='+ipt.value,true);
console.log(ipt.value);
xhr.send(null);
var sp = document.getElementById('rep');
xhr.onreadystatechange = function(){
//判斷請求狀態
if(this.readyState == 4){
if(this.responseText == 1) {
sp.innerHTML = 'Yes';
} else {
sp.innerHTML = 'No';
}
}
}
}
</script>
</html>
demo1.php
<?php
if($_GET['name'] == 'jack') {
echo 1;
} else {
echo 0;
}
?>
案例二：Ajax之POST
demo2.html
<!DOCTYPE html>
<html lang="zh" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
用戶名:<input type="text" name="name" value=""><span id='rep'></span>
</p>
</body>
<script>
//獲取DOM對象
var ipt = document.getElementsByName('name')[0];
ipt.onblur = function(){
var xhr = new XMLHttpRequest();
xhr.open('post','demo4.php',true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
var data = 'name='+this.value;
xhr.send(data);
var sp = document.getElementById('rep');
xhr.onreadystatechange = function(){
//判斷請求狀態
if(this.readyState == 4){
if(this.responseText == 1) {
sp.innerHTML = 'Yes';
} else {
sp.innerHTML = 'No';
}
}
}
}
</script>
</html>
demo2.php
<?php
if($_POST['name'] == 'jack') {
echo 1;
} else {
echo 0;
}
?>
