AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML）。 個人理解：ajax就是無刷新提交，然後得到返回內容。 對應的不使用ajax時的傳統網頁如果需要更新內容（或用php做處理時），必須重載整個網頁頁面。 示例： html代碼如下 ./te ...
AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML）。
個人理解：ajax就是無刷新提交，然後得到返回內容。
對應的不使用ajax時的傳統網頁如果需要更新內容（或用php做處理時），必須重載整個網頁頁面。
示例：
html代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax示例</title> <style> #loginForm { border-collapse: collapse; } #loginForm,#loginForm td { border:#550 1px solid; text-align:center; } </style> </head> <body> <table id="loginForm"> <tr> <td>用戶名：</td> <td><input type="text" id="userName"/></td> </tr> <tr> <td>密碼：</td> <td><input type="password" id="password"/></td> </tr> <tr> <td colspan=2><input id="submitBtn" type="submit" value="ajax提交"/></td> </tr> </table> <script type="text/javascript" language="javascript"> document.getElementById('submitBtn').addEventListener('click', clickSubmit); function clickSubmit() { makeRequest('./test.php'); } var req = false; /** * 創建ajax請求 * url 處理請求的php位置 */ function makeRequest(url) { req = false; //創建一個XMLHTPP實例 if (window.XMLHttpRequest) { // ie9以上和w3c瀏覽器的對象 req = new XMLHttpRequest(); if (req.overrideMimeType) { //如果伺服器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作. //為瞭解決這個問題, 如果伺服器響應的header不是text/xml,可以調用其它方法修改該header. req.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE678專用 try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert('new window.ActiveXObject() failed!'); } } if (!req) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } //指定處理響應的JavaScript函數名. req.onreadystatechange = alertContents; //測試傳遞 用戶名和密碼 var user_name = document.getElementById('userName').value; var user_pwd = document.getElementById('password').value; //open(請求方式，準確的本域功能變數名稱，是否非同步); //GET或POST方式 //----GET方式請求------ //req.open('GET', url+'?user_name='+user_name+'&user_pwd='+user_pwd, true); //req.send(null); //----POST方式請求------ //發送請求 如果open是POST方式可以發送字元串給伺服器,也可以在open的第二個參數同時加上get傳輸 ////req.open('POST', url+'?get1='+user_name+'&get2='+user_pwd, true); req.open('POST', url, true); req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); req.send('user_name='+user_name+'&user_pwd='+user_pwd); } /** * ajax請求的回調處理函數 */ function alertContents() { if (req.readyState == 4) { console.log(req.status); if (req.status == 200) { alert(req.response); } else { alert('There was a problem with the request.'); } } } </script> </body> </html>
./test.php代碼如下
<?php header('content-type:text/html;charset=utf-8'); var_dump($_POST);//獲取到post傳遞的數據 var_dump($_GET);
其它參考鏈接：http://www.jb51.net/article/41336.htm
