一、概念
Ajax異步請求刷新。
瀏覽器在用戶不知道的情況下，偷偷地跟服務器交互，然后返回數據給瀏覽器顯示。
異步過程：當HTTP請求發送后，通過Ajax技術使用的XMLHttpRequest對象來發送，此時不需等待服務器響應處理，返回數據等操作，用戶可直接在瀏覽器界面進行下一步操作。異步過程是Ajax的HTTP請求和用戶輸入數據等操作是異步的。
二、例子
實現的例子效果
選擇任意一個明星的名字，瀏覽器就會偷偷發送HTTP請求服務器請求該明星的資料，並且返回回來。實現了一個頁面局部刷新。
代碼：
1、首先要先初始化一個XMLHttpRequest對象
兼容不同的瀏覽器
function GetXmlHttpObject() //獲取XmlHttpRequest對象 { var xmlHttp = null; try { //FF opera 8.0+ xmlHttp = new XMLHttpRequest(); } catch(e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE瀏覽器支持ActiveXObject } } return xmlHttp; }
2、初始化XMLHttpRequest對象后，進行處理
function showCustomers(str) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("瀏覽器不支持Http 請求"); return; } var url = "showCustomers.php"; url = url+"?q="+str; url = url+"&sid="+Math.random(); //參數sid：避免回送的是緩存數據 xmlHttp.onreadystatechange = stateChanged;//每當 readyState 屬性改變時，就會調用該函數。 xmlHttp.open("GET",url,true); //(請求方式，請求地址，以及是否異步處理請求) xmlHttp.send(null); //將請求發送到服務器 string：僅用於 POST 請求 }
設置要請求的url，然后onreadystatechange（狀態改變，調用函數），open，send。這樣就完成了一個ajax局部刷新請求。
當狀態改變時，我們將從服務器返回數據回來。
function stateChanged() { if (xmlHttp.readyState ==4 || xmlHttp.readyState=="complete")//存有 XMLHttpRequest 的狀態01234 { document.getElementById('txtHint').innerHTML = xmlHttp.responseText; } }
這個例子里，返回的數據就是從服務器返回選擇的明星的信息過來，並打印在表格上。
我的數據表如圖：
思路總結：
在html文件中，發出一個Http請求，Ajax實現這個請求，但是語言還是用Javascript去實現的。
Ajax實現這個請求的過程需要先生成XMLHttpRequest對象，然后提交給某個url地址（xxx.php），最后,XMLHttpRequest對象狀態改變如何處理，XMLHttpRequest對象open、send。局部刷新ok。
四、完整代碼
showCustomer.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Ajax實現交互</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script type="text/javascript"> var xmlHttp; function showCustomers(str) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("瀏覽器不支持Http 請求"); return; } var url = "showCustomers.php"; url = url+"?q="+str; url = url+"&sid="+Math.random(); //參數sid：避免回送的是緩存數據 xmlHttp.onreadystatechange = stateChanged;//每當 readyState 屬性改變時，就會調用該函數。 xmlHttp.open("GET",url,true); //(請求方式，請求地址，以及是否異步處理請求) xmlHttp.send(null); //將請求發送到服務器 string：僅用於 POST 請求 } function showError(str2) { xmlHttp = GetXmlHttpObject(); if (xmlHttp == null) { alert("瀏覽器不支持Http 請求"); return; } var url = "showError.php"; url = url+"?q2="+str2; url = url+"&sid2="+Math.random(); //參數sid：避免回送的是緩存數據 xmlHttp.onreadystatechange = stateChanged;//每當 readyState 屬性改變時，就會調用該函數。 xmlHttp.open("GET",url,true); //(請求方式，請求地址，以及是否異步處理請求) xmlHttp.send(null); //將請求發送到服務器 string：僅用於 POST 請求 } function stateChanged() { if (xmlHttp.readyState ==4 || xmlHttp.readyState=="complete")//存有 XMLHttpRequest 的狀態01234 { document.getElementById('txtHint').innerHTML = xmlHttp.responseText; } } function GetXmlHttpObject() //獲取XmlHttpRequest對象 { var xmlHttp = null; try { //FF opera 8.0+ xmlHttp = new XMLHttpRequest(); } catch(e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </script> <style type="text/css"> table { border-collapse: collapse; } table td { padding: 5px 15px; text-align: center; } </style> </head> <body> <form> <!-- <p>用戶名：<input type="text" id="name" name="name" onchange="showError(this.value)"></p> --> <label>請選擇一位帥鍋陪你過七夕：</label> <select name="customers" onchange="showCustomers(this.value)"> <option value="1">都敏俊xi~</option> <option value="2">權相宇</option> <option value="3">千頌伊</option> </select> </form><br> <div id="txtHint">客戶信息將在此處列出...</div> </body> </html> showCustomers.php <?php $q=$_GET["q"]; //獲取前台頁面傳輸過來的參數 哪位帥鍋的 $con = mysql_connect('localhost', 'root', 'abc-123'); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("fsd", $con); $sql="SELECT * FROM test WHERE id = '".$q."'"; $result = mysql_query($sql); echo "<table border='1'> <tr> <th>姓名</th> <th>性別</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['sex'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?>
終於對ajax異步刷新有了一絲新的理解了，萬歲！要寫ajax，一定要先學好JavaScript，因為是用JavaScript來寫的