php中ajax使用實例
一、總結
1、多復習：這兩段代碼都挺簡單的，就是需要復習，要多看
2、ajax原理：ajax就是部分更新頁面，其實還在的html頁面監聽到事件后，然后傳給服務器進行操作，這里用的是get方式來傳值到服務器，
3、ajax和全頁面更新的區別：ajax和全頁面更新的區別是全頁面更新返回的是整個頁面，而ajax只返回的是修改部分的數據， 而且主要是通過window對象的XMLHttpRequest對象來實現的
4、實現ajax的步驟：實現ajax服務器端就是返回部分數據，頁面端就是新建對象然后執行這個對象的幾個函數，a、創建對象 b、onreadystatechange c、open d、send
二、AJAX 與 PHP
PHP - AJAX 與 PHP
AJAX 被用於創建交互性更強的應用程序。
AJAX PHP 實例
下面的實例將演示當用戶在輸入框中鍵入字符時，網頁如何與 Web 服務器進行通信：
實例
嘗試在輸入框中輸入一個名字，如：Anna:
返回值: Nina
實例解釋 - HTML 頁面
當用戶在上面的輸入框中鍵入字符時，會執行 "showHint()" 函數。該函數由 "onkeyup" 事件觸發：
1 <html> 2 <head> 3 <script> 4 function showHint(str) 5 { 6 if (str.length==0) 7 { 8 document.getElementById("txtHint").innerHTML=""; 9 return; 10 } 11 if (window.XMLHttpRequest) 12 { 13 // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行的代碼 14 xmlhttp=new XMLHttpRequest(); 15 } 16 else 17 { 18 //IE6, IE5 瀏覽器執行的代碼 19 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 xmlhttp.onreadystatechange=function() 22 { 23 if (xmlhttp.readyState==4 && xmlhttp.status==200) 24 { 25 document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 26 } 27 } 28 xmlhttp.open("GET","gethint.php?q="+str,true); 29 xmlhttp.send(); 30 } 31 </script> 32 </head> 33 <body> 34 35 <p><b>在輸入框中輸入一個姓名:</b></p> 36 <form> 37 姓名: <input type="text" onkeyup="showHint(this.value)"> 38 </form> 39 <p>返回值: <span id="txtHint"></span></p> 40 41 </body> 42 </html>
源代碼解釋：
如果輸入框是空的（str.length==0），該函數會清空 txtHint 占位符的內容，並退出該函數。
如果輸入框不是空的，那么 showHint() 會執行以下步驟：
- 創建 XMLHttpRequest 對象
- 創建在服務器響應就緒時執行的函數
- 向服務器上的文件發送請求
- 請注意添加到 URL 末端的參數（q）（包含輸入框的內容）
注意點：
1、標簽文本域置空：第8行，標簽文本域置空
2、添加函數：第21行，給新建的XMLHttpRequest對象添加函數，這個函數就是接受從服務器那里傳來的數據，
3、服務器接受的ajax返回數據：第25行，responseText可能是XMLHttpRequest對象的屬性
4、get傳值：第28行，get方式傳值，？后面接參數，=號連接鍵和值
5、onkeyup事件：第37行，onkeyup 事件會在鍵盤按鍵被松開時發生。
6、標簽js傳參中的this的應用：第37行，標簽中的this對象指的就是標簽本身，這里注意
PHP 文件
上面這段通過 JavaScript 調用的服務器頁面是名為 "gethint.php" 的 PHP 文件。
"gethint.php" 中的源代碼會檢查姓名數組，然后向瀏覽器返回對應的姓名：
1 <?php 2 // 將姓名填充到數組中 3 $a[]="Anna"; 4 $a[]="Brittany"; 5 $a[]="Cinderella"; 6 $a[]="Diana"; 7 $a[]="Eva"; 8 $a[]="Fiona"; 9 $a[]="Gunda"; 10 $a[]="Hege"; 11 $a[]="Inga"; 12 $a[]="Johanna"; 13 $a[]="Kitty"; 14 $a[]="Linda"; 15 $a[]="Nina"; 16 $a[]="Ophelia"; 17 $a[]="Petunia"; 18 $a[]="Amanda"; 19 $a[]="Raquel"; 20 $a[]="Cindy"; 21 $a[]="Doris"; 22 $a[]="Eve"; 23 $a[]="Evita"; 24 $a[]="Sunniva"; 25 $a[]="Tove"; 26 $a[]="Unni"; 27 $a[]="Violet"; 28 $a[]="Liza"; 29 $a[]="Elizabeth"; 30 $a[]="Ellen"; 31 $a[]="Wenche"; 32 $a[]="Vicky"; 33 34 //從請求URL地址中獲取 q 參數 35 $q=$_GET["q"]; 36 37 //查找是否由匹配值， 如果 q>0 38 if (strlen($q) > 0) 39 { 40 $hint=""; 41 for($i=0; $i<count($a); $i++) 42 { 43 if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) 44 { 45 if ($hint=="")//是否是第一個 46 { 47 $hint=$a[$i]; 48 } 49 else 50 { 51 $hint=$hint." , ".$a[$i]; 52 } 53 } 54 } 55 } 56 57 // 如果沒有匹配值設置輸出為 "no suggestion" 58 if ($hint == "") 59 { 60 $response="no suggestion"; 61 } 62 else 63 { 64 $response=$hint; 65 } 66 67 //輸出返回值 68 echo $response; 69 ?>
解釋：如果 JavaScript 發送了任何文本（即 strlen($q) > 0），則會發生：
- 查找匹配 JavaScript 發送的字符的姓名
- 如果未找到匹配，則將響應字符串設置為 "no suggestion"
- 如果找到一個或多個匹配姓名，則用所有姓名設置響應字符串
- 把響應發送到 "txtHint" 占位符
注意點：
1、$_GET[]：第35行，超全局變量$_GET[]的使用
2、strlen()：第38行，strlen函數的使用
3、數據連接：第43-52行，找所以前面包含傳入參數的數據
4、字符串連接：第51行，點變量用於字符連接
5、算法邏輯：整個算法邏輯就是，用從頁面傳入過來的參數找適合的東西返回到頁面去
PHP Ajax 跨域問題解決方案
如果你的異步請求需要跨域可以查看：PHP Ajax 跨域問題解決方案。
參考：
PHP – AJAX 與 PHP | 菜鳥教程
http://www.runoob.com/php/php-ajax-php.html