《AJax - Async Javascript and xml - 異步的JavaScript和XML》
一、基礎認識
AJax技術的目的：實現頁面無刷新數據動態更改
優點:?
+?不需要插件支持
+?提供WEB程序的功能
+?優秀的用戶體驗
+?減輕服務器帶寬的負擔
缺點：
+?破壞瀏覽器的前進與后退
+?搜索引擎SEO的支持性不好
?
二、代碼示例
學習后編寫的一個很基礎的Ajax函數，幫助自己更好的掌握Ajax
/** method => Ajax請求所采用的方法，GET或POST * URL => 所要請求頁面的URL* paras=> 發送時附加的參數* callback => 完成請求或頁面數據準備完畢時執行的方法
*/function Ajax(method,url,paras,callback){function getXMLHttpReq(){var XMLHttpReq = null;if(window.XMLHttpRequest){ XMLHttpReq = new XMLHttpRequest();}else if(window.ActiveXObject){XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');}return XMLHttpReq;}xhr = getXMLHttpReq();if(method ==='POST'){xhr.open('POST',url,true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');if(paras!=''){xhr.send(paras);}else{xhr.send(null);}}else{if(paras!=''){url = encodeURI(url+'?'+paras); }xhr.open('GET',url,true);xhr.send(null);}xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback();}}
}//調用方法function Ajax1(){Ajax('GET','test.php','',function(){document.getElementById('responseText').innerHTML = xhr.responseText;}) } ?
· 代碼說明：
ActiveXObject // 利用ActiveX插件可以與微軟的其它組件進行交換，包括這里我需要的微軟自帶的HTTP請求方法。new ActiveXObjcet('Microsoft.XMLHTTP') // IE5/6支持的HTTP請求方法 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//如果Ajax請求是通過POST方式，那么為了方便后臺通過鍵值對的形式獲取數據，可以指定數據的發送以表單的形式。 open('GET','index.php?a=1&b=2',true) //GET方式，通過在URL附加參數進行數據的傳輸。
XMLHttpReq.send(pars) //POST方式的數據發送 url = encodeURI(url+'?'+pars);
//為了解決IE6/7在GET方式下傳輸中文參數出現亂碼的情況，會在參數傳輸之前利用JS進行URL編碼。
echo urldecode($_GET['a'])
// 客戶端進行編碼，服務端進行解碼 ?
·?重點講解：
1. readyState && status
?readyState表示HTTP請求的運行狀態，不論請求的數據是否找到，都會經歷以下的過程：
0 ---- ?請求未初始化
1 ---- ?與服務器建立連接
2 ---- 請求已經接收
? ? ? ? ? ?3 ---- 請求正在處理
status 則表示了HTTP所請求數據的狀態[常見的反饋碼]：
200 ---- 數據請求完成，已經可以使用。
404 ---- 頁面未找到。
2.?open()
功能：初始化請求的參數。
格式：open('請求數據的方式','所要請求的頁面URL','是否異步');
格式說明：
·?請求數據的方式：GET | POST
·??是否異步:true(異步) | false(同步)
* 如果存在setRequestHeader()方法，一定要把open()方法放在它之前的一行。
?
3. send()
功能：發送請求。
格式：send(paras)
代碼示例：
send(null)//在GET方式下用這種方式，因為參數會附加在URL后進行傳輸。 send('fname=神&lname=經病') //在POST方式，用這種方式傳輸參數，但要記得使用setRequestHeader()方法
4.?同步與異步
xmlHttpReq對象的open()方法第三個參數可以設置同步或異步的方式。
true - 表示為異步，它不會等待服務器的執行完成。
false - 表示同步，它會等待服務器執行完成，否則便會掛起程序，一直等待，一般不推薦是用同步的方式，不過對于一些小程序還是可以使用的。
5.??setRequestHeader()
?該方法可以設置請求的頭部信息，常用以post方式向一個動態網頁文件提交數據時使用。這
是因為PHP中的$_POST['key']方法，需要用到鍵值對的格式，因此必須聲明請求的類型為:?setRequestHeader('Content-Type','application/x-www-form-urlencoded')?以表單提交數據的方式來發送數據到服務器。
6. 使用時間戳或隨機數來確保無緩存的請求數據
//時間戳 open('GET','index.php?t='+ new Date()*1,true)//隨機數 open('GET','index.php?m='+ Math.random(),true)
?
