ajax=>Asynchronous JavaScript and XML異步傳輸 ，是指一種創建交互式網頁應用的網頁開發技術。
通過在前端腳本(js)與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新；傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁面(f5)。
ajax執行原理：一個Ajax交互從一個稱爲 XMLHttpRequest 的JavaScript對象開始。如同名字所暗示的，它允許一個客戶端腳本(JS)來執行HTTP請求，且將會解析一個XML格式的服務器響應。Ajax處理過程中的第一步是創建一個XMLHttpRequest實例。使用HTTP方法（GET或POST）來處理請求，並將目標URL設置到XMLHttpRequest對象上
2、開始準備將要發送的數據
發送一個http請求的時候需要：正確URL，需要傳給服務器的處理的數據，數據的傳輸方式(get|post)
ajax.open("get|post",url+data,true|false);
參數1：數據傳輸方式 get|post
參數2：請求的URL和數據user.php?參數=值&參數=值.
參數3：ajax請求同步還是異步
false: 同步
true : 異步
一個頁面中有3個AJAX同時執行
Ajax可以通過兩種方法訪問服務器，
同步(腳本會停留並等待服務器發送回覆然後再繼續)
異步(腳本允許頁面繼續其他進程並處理可能的回覆)
同步需要等待返回結果才能繼續，異步不必等待，一般需要監聽異步的結果，設置監聽函數
同步是在一條直線上的隊列，異步不在一個隊列上各走各的
其中async是一個布爾值。如果是異步通信方式(true)，客戶機就不等待服務器的響應；如果是同步方式(false)，客戶機就要等到服務器返回消息後纔去執行其他操作。我們需要根據實際需要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，如果異步：true 後一個是會覆蓋前一個的，這個時候當然要指定同步方式：Flase
3. 發送數據
ajax.send(string|null);
get: null
post: string
3.1 服務器端處理數據的php代碼正常用 $_GET|$_POST|$_REQUEST獲取數據 然後處理
3.2 服務器端返回數據是以頁面輸出流的形式 返回數據
ajax捕獲的是服務器端文件的 輸出流
4. ajax.readyState 屬性 監聽ajax執行的過程執行到哪一步
0: ajax對象還沒有創建
1: 對象已經創，還沒有準備發送數據
2: 準備發送的數據已經準備完畢，還沒有發送
3: 數據已經發送，還沒有完全接收
4: 數據已經發送、接收完畢
5. 設置監視的函數 監聽ajax在數據傳輸過程中狀態
ajax.onreadystatechange = 函數名();
ajax.status :監測ajax操作過程是否有錯誤報出
200:發送和接收沒有錯誤
400:發送或者接收中出現了錯誤;
6. ajax得到服務器中返回的數據
ajax.responseText;
php頁面的數據是怎麼返回：
數據必須在php代碼輸出狀態
也就是說ajax捕獲服務腳本頁面的 輸出流
reg.html
<!DOCTYPE HTML>
<html>
<head>
<title> ajax </title>
<meta charset="utf-8"/>
<script type="text/javascript">
//第一步創建ajax對象
var httpAjax = new XMLHttpRequest();
//定義一個函數來檢查輸入的用戶名是否爲空，爲空則返回錯誤，不繼續往下執行代碼
function checkUser(uname){
if(uname == ""){
return false;
}
//第四步 設置監聽函數,監聽ajax在數據傳輸過程中狀態,但是要放到前面
httpAjax.onreadystatechange = function(){
//4: 數據已經發送、接收完畢,200:發送和接收沒有錯誤
if(httpAjax.readyState == 4 && httpAjax.status == 200){
var res = httpAjax.responseText;
var sp = document.getElementById("sp");
if(res == "true"){
sp.innerHTML = "<font color='red'>已註冊</font>";
}else{
sp.innerHTML = "<font color='green'>可以註冊</font>"
}
}
}
//第二步準備發送數據
httpAjax.open("get","user.php?uname="+uname,true);
//uname是個變量，所以和字符串連接用個+符號
//第三步發送數據,get傳值方式send值爲null
httpAjax.send(null);
}
</script>
</head>
<body>
<input type="text" id="username" class="username" name="username" onchange="checkUser(this.value)"/><span id="sp"></span>
</body>
</html>user.php
<?php
header("content-type:text/html;charset=utf-8");
$pdo = new PDO("mysql:host=localhost;dbname=test","root","123456");
$pdo->exec("set names utf8");
$uname = $_GET["uname"];
$sql = "select * from stu_info where sname='".$uname."'";
$data = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC);
if($data){
echo "true";
}else{
echo "false";
}
?>數據庫中的表stu_info
