PHP與AJAX執行個體詳解

本文我們將和大家分享AJAX基礎、PHP與AJAX、JSON格式、jQuery中的AJAX，希望本文能協助到大家。

1.AJAX基礎

(1)AJAX(Asynchronous JavaScript and XML):非同步javascript和xml的縮寫。

(2)AJAX不是某種程式設計語言,而是一種在無需載入整個頁面的情況下能夠更新部分網頁的技術。

(3)傳統網頁的缺點：需要更新內容或者提交一個表單,需要重新載入整個頁面;使用AJAX優點：通過在後台跟伺服器進行少量的資料交換，網頁就可以實現非同步局部更新。對於填寫複雜表單來說，有非常好的使用者體驗。

(4)AJAX同步與非同步：同步說白了就是載入整個頁面;非同步能夠載入部分頁面。具體的話,用戶端與伺服器端的聯絡。Ajax技術出現之前，都是同步的交換資料，如果填寫的比較複雜的表單將非常麻煩。有了XMLHttpRequest對象後，同步世界變為了非同步世界。通過XMLHttpRequest這個對象後台可以和伺服器進行資料交換。

(5)XMLHttpRequest對象建立：var requerst=new XMLHttpRequest();直接執行個體化對象即可!注意：IE5和IE6不支援這種定義，如果要實現瀏覽器頁面相容，如下代碼所示：

var request;if(window.XMLHttpRequest){    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...}else{    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5}

(6)HTTP請求：http是一種無狀態的協議：說白了就是不能建立持久串連且無記憶的協議。進一步：通過頁面請求和響應的過程，實現網頁的調試。

(6.1)一個完整的HTTP請求過程，通常有下面7個步驟：

• 建立TCP串連

• Web瀏覽器向Web伺服器發送請求命令

• Web瀏覽器發送要求標頭資訊

• Web伺服器應答

• Web伺服器發送應答頭資訊

• Web伺服器向瀏覽器發送資料

• Web伺服器關閉TCP串連

(6.2)http請求一般由四部分組成：

• HTTP請求的方法或動作，比如是GET還是POST請求

• 正在請求的URL，總得知道請求的地址是什麼吧

• 要求標頭，包含一些用戶端的環境資訊，身分識別驗證資訊等

• 請求體，也就是請求本文，請求本文中可以包含客戶提交的查詢支付穿資訊，表單資訊等等

(6.3)GET與POST[收集來自method="post/get"的表單中的name值]

說白了,都是收集從表單裡面傳過來的值。傳過去的值,一種以url的形式顯示(不安全),一種以值的形式顯示(安全);GET一般用於資訊的擷取，使用url傳遞參數，限制在2000個字元，對所有人可見，不安全。POST一般用於從表單發送資料，參數在http請求體中，不限制資訊發送數量。

(6.4)Http響應一般由三個部分組成:

• 由一個數字和文字組成的狀態代碼，用來顯示請求是成功還是失敗；

• 回應標頭，包含伺服器類型，日期時間，內容類型和長度等；

• 響應體，也就是響應本文。

(6.5)Http狀態代碼由三位元字組成，其中首位元字定義了狀態代碼的類型：

• 1XX:資訊類，表示收到web瀏覽器請求，正在進一步的處理中；

• 2XX:成功，表示使用者請求被正確接收、理解和處理，例如：200 OK

• 3XX:重新導向，表示請求沒有成功，客戶必須採取進一步的動作

• 4XX:用戶端錯誤，表示用戶端提交的請求有錯誤，如404 NOT FOUND，意味著請求中引用的文檔不存在。

• 5XX:伺服器錯誤，表示伺服器不能完成對請求的處理。

(7)XMLHttpRequest發送請求:(對象的方法)

• open(method要求方法,url請求地址,async請求同步或者非同步(非同步是true,同步是false,其實預設就是true));///調用非同步請求

• send(string);(使用get方法時，參數可以不填寫或者null，因為資訊都包含在地址欄url中；使用post則一定要填寫);//把請求發送到伺服器

舉個栗子:

request.open("POST","create.php",true);request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設定http的頭資訊,告訴web伺服器要發送一個表單;注意：setRequest請求一定要放在open和send之間，否則會拋出異常request.send("name=王大鎚&sex=男");

(8)XMLHttpRequest取得響應:(對象的方法和屬性)

• responseText:簡單來說:就是接收伺服器響應回送的資料。獲得字串形式的相應資料。

• responsXML:獲得XML形式的相應資料。現在一般轉換為JSON形式的資料。

• status和statusText：以數字和文本形式返回http狀態代碼。

• getAllResponseHeader()：擷取所有的響應前序。

• getResponseHeader()：查詢響應中的某個欄位的值。

readyState屬性：響應返回成功的時候得到通知。

• 0：請求未初始化，open還沒有調用。

• 1：伺服器串連已建立，open已經調用了。

• 2：請求已經接收，也就是接收到頭資訊了。

• 3：請求處理中，也就是接收到響應主體了。

• 4：請求已完成，且響應已就緒，也就是響應完成了。

舉個栗子:涵蓋了ajax的大部分內容(典型的xhr建立ajax的過程)

var request = new XMLHttpRequest();//建立XHR對象request.open("GET","get.php",true);//調用非同步請求request.send();//發送非同步請求//對事件進行監聽,判斷伺服器是否正確得做出了響應request.onreadystatechange = function(){  if(request.readyState===4 && request.status === 200){    request.reponseText;//接收伺服器響應回送的資料   }}

2.PHP與AJAX

實戰:[伺服器端與用戶端]實現查詢員工和建立員工的後台介面

(1)用戶端部分代碼:

//建立員工用戶端代碼document.getElementById("save").onclick=function(){    var request=new XMLHttpRequest();//建立XHR對象    request.open("POST","action.php");//調用非同步請求    //data拼接的URL    //document.getElementById("staffName").value擷取表單中使用者寫入的值    var data = "username=" + document.getElementById("staffName").value                   + "&num=" + document.getElementById("staffNumber").value                   + "&workname=" + document.getElementById("staffJob").value;    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設定http的頭資訊    request.send(data);//發送非同步請求    //對事件進行監聽,判斷伺服器是否能正確做出響應    request.onreadystatechange=function(){        if(request.readyState===4){            if(request.status===200){                //innerHTML不僅可以讀取元素內容,還可以將內容寫入元素                //ajax引擎對象通過responseText屬性或者responseXML屬性接收伺服器回送的資料，然後在靜態頁面中對其進行處理，使頁面達到局部重新整理的效果                document.getElementById("createResult").innerHTML=request.responseText;            }else{                alter("發生錯誤:"+request.status);            }        }    }}

(2)伺服器端部分代碼:

//查詢員工伺服器端代碼<?php header('Content-type:text/html;charset=utf8');$con=mysqli_connect("127.0.0.1","","");mysqli_select_db($con,"function");$sql="SELECT * FROM `ajax`";$query=mysqli_query($con,$sql);//資料庫資料的總條數$number$number=mysqli_num_rows($query);for($i=0;$i<$number;$i++){    //將每條資料轉換成關聯陣列列印出來    $arr=mysqli_fetch_row($query);    //print_r($arr);    //echo $arr[2];die;    if($_GET['num']==$arr[2]){        echo "找到員工:編號$arr[2],姓名:$arr[1],職位:$arr[3]";        break;    }} ?>

3.JSON格式

(1)json:javascript對象標記法。

(2)json是儲存和交換文本資訊的文法，類似xml。採用索引值對的方式組織，易於人們閱讀與機器解析。

(3)json是獨立於語言的，不管什麼語言都可以解析json，只要按json的規則來就行。

(4)json的長度比xml小;json讀寫的速度更快;json可以使用js內建方法直接解析，轉化成js對象，非常方便。

(5)json文法規則：json資料的書寫格式是：成對的名稱和數值。

成對的名稱和數值組合中的名稱寫在前面（在雙引號中），值對寫在後面（同樣在雙引號中），中間用冒號隔開，比如"name":"王大鎚"。注意：json與javaScript對象標記法不同，javaScript對象標記法的索引值不需要用引號，但是json的索引值要用引號。

注意：json可以是整型、浮點型、字串(在雙引號中)、布爾值(true或false)、數組(在方括弧中)、對象(在花括弧中)、null等資料類型。

舉個栗子：

{//定義了一個json對象  "staff":[//定義了一個數組    {"name":"王大鎚","age":21},//定義了一個name對象    {"name":"叫獸","age":35}  ]}

(6)json解析：eval()和JSON.parse()兩種方式解析成JSON形式

兩種方法比較：建議使用JSON.parse()方法解析成JSON形式

eval();不安全，如果json中有函數或js程式碼（alert或一個window.location.href()跳轉連結病毒網站等），會優先執行代碼，危險操作。JSON.parse();對json檔案具有校正功能，如果json檔案裡面有程式指令碼，會解析報錯。

舉個栗子：

var jsondata='{    "staff":[{            "name":"王大鎚",            "age":22        },        {            "name":"叫獸",            "age":23        },        {            "name":"王尼瑪",            "age":24        }    ]}';var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSONvar jsonobj=eval('(' + jsondata + ')');//eval解析JSONalert(jsonobj.staff[0].name);

注意：上面書寫是錯誤的，只為了看清楚。逗號不是分隔字元，逗號是常值內容，所有的都應該緊湊寫，不能自己為了看清楚，人為用空格分開。(這裡找了一個小時錯誤...)

(7)json驗證工具：JSONLint

(8)舉個栗子:

使用json,首先需要伺服器端的約定,用此種方法能夠減少更多的判斷,以更加優雅的形式顯示{    //前端規則驗證、後端資料驗證    "success":true,//是否正確執行(表單等規則驗證)    "msg":"×××"//請求的響應值是否成功(http響應返回的資訊)}

伺服器端部分代碼:

//echo "參數錯誤，員工資訊填寫不全";echo '{"success":false,"msg":"參數錯誤，員工資訊填寫不全"}';if($query){    //echo "員工：" . $_POST["username"] . " 資訊儲存成功！";    echo '{"success":true,"msg":"員工儲存成功"}';}else{    //echo "員工：" . $_POST["username"] . " 資訊儲存失敗！";    echo '{"success":false,"msg":"員工儲存失敗"}';}

用戶端json代碼:其它不變,將伺服器端響應傳過來的responseText(文本形式)轉換為(JSON形式),將json字串轉化為了一個json對象data,然後就能夠以對象的形式處理資料

    request.onreadystatechange=function(){        if(request.readyState===4){            if(request.status===200){                //將伺服器端響應傳過來的responseText(文本形式)轉換為(JSON形式)                //將json字串轉化為了一個json對象data                var data=JSON.parse(request.responseText);                if(data.success){                    document.getElementById("createResult").innerHTML=data.msg;                }else{                    document.getElementById("createResult").innerHTML="出現錯誤"+data.msg;                }            }        }    }

4.jQuery中的AJAX

(1)使用jquery實現ajax請求：作用：避免相容問題，代碼簡潔，操作快捷方便。

(2)文法:jQuery.ajax([settings])

• type：類型，“POST”或“GET”，預設為“GET”。

• url：發送請求的地址。

• data：是一個對象，連同請求發送到伺服器的資料。

• dataType：預期伺服器返回的資料類型。如果不指定，jQuery將自動根據HTTP包MIME資訊來智能判斷，一般我們採用json格式，可以設定為“json”。

• success：是一個方法，請求成功後的毀掉函數。傳入返回後的資料，以及包含成功碼的字串。

• error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象。