Ajax全接觸筆記
~ 同步——客戶端發起請求，服務端需要處理，響應，此時客戶端完全等待，當服務器處理完畢，客戶端重新載入頁面，如果出現錯誤，再次發生請求，處理，等待...
~ 異步——填寫表單時，頁面當時就把數據發送到服務器（發送請求），服務器處理響應，把結果發給頁面，過程中不不要重新加載頁面，填寫的錯誤會實時顯示，不會有任何的等待
~ XMLHttpRequest對象——可以用於後臺和服務器交換數據，對網頁進行部分的更新
var request = new XMLHttpRequest();
為了兼容IE6，創建XML對象：
var request; if(window.XMLHttpRequest){ request= new XMLHttpRequest();//IE7+ }else{ request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5 }
進行請求：
~ HTTP：計算機通過網絡進行通信的規則，使瀏覽器從WEB服務器去請求信息和服務
無狀態協議：不建立持久的連接，服務端不保留連接的相關信息，處理完後就關閉了。
~ HTTP請求過程：
1 建立TCP連接；
2 Web瀏覽器向Web服務器發送請求命令
3 瀏覽器發送請求頭信息
4 服務器應答
5 服務器發送應答頭信息
6 服務器向瀏覽器發送數據
7 服務器關閉TCP連接
~ 一個請求包含四部分：
1 HTTP請求的方法和動作，如GET、POST；
2 正在請求的URL，知道請求的地址；
3 請求頭，包含客戶端環境信息，身份驗證；
4 請求體，包含客戶提交的查詢字符串信息，表單信息等；
~ GET：信息獲取，使用URL傳遞參數，用來查詢，不會影響數據本身，一般不用GET新建和修改操作，發送的信息對任何人都是可見的，所有的變量名和值都顯示在URL當中，發送信息的數量限制在2000個字符。（添加在書簽裏的頁面今後也能使用）（冪等）
~ POST：發送信息，修改服務器資源，不可見，嵌入HTTP請求體中，發送信息的數量無限制，常用新建修改刪除等操作。
~ 一個響應包含三部分：
1 數字和文字組成的狀態碼，顯示請求成功還是失敗；
2 響應頭，包含許多有用的信息，如服務器類型、日期時間、內容類型和長度；
3 響應體，相應正文；
~ HTTP狀態碼
1XX：信息類，收到WEB瀏覽器請求，正在進一步處理中；
2XX:：成功，表示用戶請求被正確接收，理解和處理 如200 OK
3XX：重定向，表示沒有請求成功，客戶必須采取進一步的動作
4XX：客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT FOUND
5XX：服務器錯誤，表示服務器不能完成對請求的處理：如 500
~ XMLHttpRequest發送請求
open(method,url,async)
（發送請求方法時GET還是POST，請求地址，請求同步/異步一般為true）
send(string) 把請求發送到服務器,GET請求可不填寫，也可為none；
~ XMLHttpRequest取得響應
readyState屬性：該屬性變化表示服務器響應的變化
*0：請求未初始化，open還未調用
*1：服務器連接已建立，open已經調用了
*2：請求已接收，也就是接收到頭信息了
*3：請求處理中，接收到相應主體了
*4：請求完成，相應就緒，也就是響應完成
一個小的實例DEMO，放到本地服務器環境訪問
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<style type="text/css" media="screen">
*{
font-family: ‘微軟雅黑‘;
font-size: 30px;
line-height: 1.6;
}
#searchResult,#creatResult{
color: orange;
}
</style>
</head>
<body>
<h1>員工查詢</h1>
<label for="">請輸入員工編號：</label>
<input type="text" id="keyword" />
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工新建</h1>
<label for="">請輸入員工姓名：</label>
<input type="text" id="staffName" /><br>
<label for="">請輸入員工編號：</label>
<input type="text" id="staffNumber" /><br>
<label for="">請選擇員工性別：</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br>
<label for="">請輸入員工職位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="creatResult"></p>
<script>
document.getElementById(‘search‘).onclick = function(){
var request = new XMLHttpRequest();
request.open(‘GET‘,‘server.php?number=‘+document.getElementById(‘keyword‘).value);
request.send();
request.onreadystatechange = function(){
if (request.readyState===4) {
if(request.status===200){
document.getElementById(‘searchResult‘).innerHTML = request.responseText;
}else{
alert(‘發生錯誤‘+ request.status);
}
}
}
}
document.getElementById(‘save‘).onclick = function(){
var request = new XMLHttpRequest();
request.open(‘POST‘,‘server.php‘);
var data = ‘name=‘ + document.getElementById(‘staffName‘).value
+‘&number=‘ + document.getElementById(‘staffNumber‘).value
+‘&sex=‘ + document.getElementById(‘staffSex‘).value
+‘&job=‘ + document.getElementById(‘staffJob‘).value;
request.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
//POST時不要忘記在open()和send()中間加入setRequestHeader();
request.send(data);
request.onreadystatechange = function(){
if (request.readyState===4) {
if(request.status===200){
document.getElementById(‘creatResult‘).innerHTML = request.responseText;
}else{
alert(‘發生錯誤‘+ request.status);
}
}
}
}
</script>
</body>
</html>
<?php //設置頁面內容是html編碼格式是utf-8 header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定義一個多維數組，包含員工的信息，每條員工信息為一個數組 $staff = array ( array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"), array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"), array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理") ); //判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建 //$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字 //$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法 if ($_SERVER["REQUEST_METHOD"] == "GET") { search(); } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ create(); } //通過員工編號搜索員工 function search(){ //檢查是否有員工編號的參數 //isset檢測變量是否設置；empty判斷值為否為空 //超全局變量 $_GET 和 $_POST 用於收集表單數據 if (!isset($_GET["number"]) || empty($_GET["number"])) { echo "參數錯誤"; return; } //函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。 //global 關鍵詞用於訪問函數內的全局變量 global $staff; //獲取number參數 $number = $_GET["number"]; $result = "沒有找到員工。"; //遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = "找到員工：員工編號：" . $value["number"] . "，員工姓名：" . $value["name"] . "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"]; break; } } echo $result; } //創建員工 function create(){ //判斷信息是否填寫完全 if (!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["sex"]) || empty($_POST["sex"]) || !isset($_POST["job"]) || empty($_POST["job"])) { echo "參數錯誤，員工信息填寫不全"; return; } //TODO: 獲取POST表單數據並保存到數據庫 //提示保存成功 echo "員工：" . $_POST["name"] . " 信息保存成功！"; }
Ajax全接觸筆記