ajax（ asynchronous JavaScript xml ，異步JS和xml）技術是通過在后台與服務器進行少量數據交換，使網頁實現異步更新。這樣就可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
先來看個簡單的例子，就是當我們在注冊時，如果用戶名已存在，我們如何通過ajax技術來進行數據的處理
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 <script src="../jquery-1.11.2.min.js"></script> 7 </head> 8 9 <body> 10 11 <input type="text" id="uid" /><span id="ts"></span> 12 13 </body> 14 <script type="text/javascript"> 15 16 $("#uid").blur(function(){ 17 //取出用戶名 18 var uid = $(this).val(); 19 20 //去數據庫進行匹配 21 $.ajax({ 22 url:"chuli.php", //處理頁面的路徑 23 data:{u:uid}, //要提交的數據是一個JSON 24 type:"POST", //提交方式 25 dataType:"TEXT", //返回數據的類型 26 //TEXT字符串 JSON返回JSON XML返回XML 27 success:function(data){ //回調函數 ,成功時返回的數據存在形參data里 28 if(data.trim()=="OK") //trim()方法會去掉頁面中的冗余空格 29 { 30 $("#ts").html("該用戶名可用"); 31 $("#ts").css("color","green"); 32 } 33 else 34 { 35 $("#ts").html("該用戶名不可用"); 36 $("#ts").css("color","red"); 37 } 38 } 39 }); 40 }) 41 42 </script> 43 </html>
下面是ajax發生數據到相應php處理頁面
1 <?php 2 $uid = $_POST["u"]; //通過ajax發送的data：json的key數據來接收相應的value 3 require "DataBse.class.php"; 4 $db = new DataBase(); 5 6 $sql = "select count(*) from users where uid='{$uid}'"; 7 8 $arr = $db->query($sql); 9 10 if($arr[0][0]) 11 { 12 echo "NO"; //處理頁面的所有輸出內容都將返回給success里面的回調data 13 } 14 else 15 { 16 echo "OK"; 17 }
看看效果
登陸的邏輯和做法和注冊類似。
2.利用ajax完成調用數據頁面的加載
以前了解的方法就是在頁面中嵌入php代碼去調數據，然后刷新頁面完成加載，這里我們說下如何用ajax完成數據加載（感覺比嵌入php要繁瑣一些，因為還沒接觸數據庫內容轉成son數據傳輸） 先來看看吧
第一個例子 加載個基礎select下拉選擇
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 <script src="../jquery-1.11.2.min.js"></script> 7 </head> 8 9 <body> 10 <h1>顯示數據</h1> 11 12 <select id="sel"> //先寫個下拉的外標簽 ，內容先空着，等着加載過來數據 13 14 </select> 15 16 </body> 17 <script type="text/javascript"> 18 $(document).ready(function(e) { //頁面加載完開始執行 19 20 21 $.ajax({ //調用ajax方法 22 async:false, //async表示異步，有兩個值，false表示同步（頁面加載順序是一步步來的，下面的內容加載要等ajax執行結束才開始），true表示同步（加載過程不影響ajax下面的數據繼續執行） 23 url:"chuli.php", 24 dataType:"TEXT", 25 success: function(data){ 26 var hang = data.split("|"); //將返回的數據調用split方法進行拆分，返回的hang數組就是每一行的數據 27 var str = ""; //定義一個空字符串，來存最后數據 28 for(var i=0;i<hang.length;i++) //將每行的數據循環遍歷， 29 { 30 var lie = hang[i].split("^"); //行的每個數據就代表列，然后調用split方法繼續將列數據拆開 31 str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //定義所有的數據都放在option標簽里，然后存入str 32 } 33 $("#sel").html(str); //將str內容放入下拉列表中 34 35 } 36 }); 37 38 39 }); 40 </script> 41 </html>
看一下處理頁面，不看處理頁面可能看不懂返回數據的處理
1 <?php 2 require "DataBase.class.php"; 3 $db = new DataBase(); 4 5 $sql = "select * from login"; 6 7 //var_dump($arr); 8 9 $arr=$db->query($sql); 10 11 $str=""; 12 foreach ($arr as $v){ 13 $str.=implode("^",$v)."|"; //將每個$v之間用 |分開 然后$v里面的每個數據中間用^分開 14 15 16 } 17 $str=substr($str,0,strlen($str)-1); //最后末尾會多余一個|,用字符串截取一下，去掉最后一個 18 echo $str;
處理頁面返回的字符串是一個長字符串 類似於 k001^zhangsan^123 | k002^lisi^123 |k003^wangwu^123
然后交給ajax里面的回調函數進行處理
看看效果
