Ajax工作原理以及函式的簡單封裝
什麼是AJAX？
AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。
AJAX運用的意義?
新浪微博、百度地圖、股票資訊的顯示、網站登入驗證碼等等這些都應用到了ajax技術，那麼ajax技術運用有什麼意義呢？
首先從個人最直觀的感受來說是使用者體驗的提升，你能想象你在使用百度地圖的時候更換一個地點你的網頁就重新整理一次的心情嗎？ajax部分更新網頁可以更快的處理使用者的需求而不是把寶貴的時間浪費在載入其他部分的頁面上。至於技術上的意義，學識尚淺，等到自己有一定的見解後再補充。但是看到其他博主的見解覺得很有道理，先搬過來給大家分享一下。
我們在平時的開發中都多多少少的接觸或者應用到了ajax，談到ajax技術的意義，我們關注得最多的毫無疑問是提升使用者的體驗。但是，如果我們結合將來電腦和網際網路的發展趨勢，我們會發現ajax技
術在某些方面正好代表了這種趨勢。為什麼這樣說呢？我們知道，自從電腦出現以來，一直是桌面軟體佔據著絕對主導的地位，但是網際網路的出現和成功使這一切開 始發生著微妙的變化。相當一部分的人都相信，遲早有一天，資料和電腦軟體將會從桌面轉移到網際網路。也就是說，將來的電腦有可能拋棄笨重的硬碟，而直接從互 聯網來獲取資料和服務，我記得我念大學的時候，有位教授給我們上課的時候，曾經設想過這樣一種情景，也許在將來的電腦桌面上，沒有任何多餘的軟體和程式， 而僅僅只有一個
AJAX函式的封裝和呼叫
封裝函式部分：
function ajax(url, fnSucc, fnFaild)
{
//1.建立Ajax物件
if(window.XMLHttpRequest)
{
//IE7+ chrome firefox
var oAjax=new XMLHttpRequest();
}
else
{
//IE5、6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連線伺服器（開啟和伺服器的連線）
//open( method , url , async )
//method ：請求的型別；GET 或 POST
//url ：檔案在伺服器上的位置
//async ：true（非同步）或 false（同步）
oAjax.open('GET', url, true);
//3.傳送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
/** readyState狀態含義
* 0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
*/
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失敗了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var a = document.getElementById('a');
var user = document.getElementById('a1');
var Password = document.getElementById('a2');
a.onclick = function (){
//防止快取,每次呼叫連結都加一個唯一的時間
ajax('a.txt?t='+new Date().getTime(),function (str){
var arr = eval(str);//將字串轉換為陣列
user.value = arr[0].a;
Password.value = arr[0].b;
},function(){
alert('fail');
});
}
}
</script>
</head>
<body>
<input type="button" name="a" id="a" value="123" />
user：<input type="text" name="a" id="a1" value="" />
password：<input type="text" name="a" id="a2" value="" />
</body>
</html>
[{a:'zfx',b:'zfx123'},{a:'zfx2',b:'zfx456'}]需要詳細的瞭解ajax的每一個模組可以直接看w3c的文件：點選開啟連結