Ajax作用、及Ajax函式的編寫
關於Ajax 指的是非同步 (Asynchronous javaScript and XML) <非同步的javascript和XML>
1、 Ajax並非縮寫詞，而是由Jesse James Gaiiett創造的名詞，是指一種建立互動式網頁應用的網頁開發技術
2、 Ajax並不是最新的程式語言，而是一種使用現有標準的新方法 它用於建立更好更快以及互動性更強的 Web 應用程式的技術。
3、 Ajax是能在不重新載入整個頁面<無需重新整理！>的情況下,能與伺服器交換資料並更新網頁內部分內容.
Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術.簡而言
之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者(不必造成重新載入頁面便與WEB服務器
交換資料 可以讓網頁從後臺伺服器請求少量的資訊而不是載入整個頁面)使得因特網的應用程式更加小,速度更快,更加友好 ，同時需
要 注意 的是Ajax是被所有主流瀏覽器支援的，而且Ajax程式獨立於瀏覽器和平臺。
Ajax 的非同步(無阻斷 )和同步(阻斷 一步一步進行 上一步沒有完成 下一步就不繼續)
同步：提交請求->等待伺服器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事
非同步: 請求通過事件觸發->伺服器處理（這是瀏覽器仍然可以作其他事情）->處理完畢
同步就是你叫我去吃飯，我聽到了就和你去吃飯；如果沒有聽到，你就不停的叫，直到我告訴你聽到了，才一起去吃飯。
非同步就是你叫我，然後自己去吃飯，我得到訊息後可能立即走，也可能等到下班才去吃飯。
Ajax適合使用的應用場合有
*使用Ajax進行資料驗證(使用者登入名和密碼是否正確和唯一性)
優點:不像傳統的驗證資料需要填寫完資料後向後臺伺服器提交表單資料,進入到伺服器端進行驗證,整個過程時間長且對後臺伺服器
造成不必要的負擔 當使用了Ajax技術是直接由XMLHttpRequest物件發出驗證請求，根據返回的HTTP 響應判斷驗證的資料是
否符合，整個過程不需要彈出新視窗，也不需要將整個頁面提交到伺服器，非常的快速且不增加伺服器的負擔。
*使用Ajax更新頁面的部分內容 在無需重新整理的情況下 , 可更新多條甚至是版塊的內容 ，如股票的更新 如百度搜索 無需確定 只需要
在搜尋框寫入搜尋的內容 下方變自動更新內容 <減少向伺服器的請求>
*網頁小遊戲(聯網的)、新浪微博 、Google 地圖、開心網.
伺服器：能提供一定服務的特殊電腦.ftp、svn、web
網頁瀏覽過程分析：請求 到伺服器讀取 返回資料 下載到本地瀏覽器看到
如何配置自己的伺服器程式（wamp）
安裝一個wamp整合環境，因為Ajax是讀取伺服器上面的資訊的，所以我們接下來的頁面需要儲存到www目錄下：比如我建立一個檔案aa.html放到該目錄下。我可以通過瀏覽器輸入下面的資訊找到這個檔案:
loclhost/aa.html
127.0.0.1/aa.html
使用Ajax
基礎：請求並顯示靜態TXT檔案
字符集編碼
快取、阻止快取
動態資料：請求JS（或json）檔案
eval的使用
DOM建立元素
區域性重新整理：請求並顯示部分網頁檔案
HTTP請求方法
GET——用於獲取資料（如：瀏覽帖子）：不安全，放到url裡面傳遞資訊，通過網址傳遞.容易出錯.因為有大小限制：4-10k,有快取 只能傳輸字串
POST——用於上傳資料（如：使用者註冊）：稍微安全一些，不通過網址url，可以傳大檔案，2G，沒有快取
GET、POST的區別
get是在url裡傳資料：安全性沒有post好、容量限制 、並且瀏覽器本地有快取
編寫Ajax函式的步驟:
1、建立Ajax物件
ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest()
2、連線伺服器（開啟和伺服器的連線）open('方法','url',非同步處理)
open(方法, 檔名, 非同步傳輸)
同步和非同步
3、發出請求
send()
4、接收返回
請求狀態監控
onreadystatechange事件 ：當狀態碼改變時觸發 :on readystate change
readyState屬性：請求狀態
0 （未初始化）還沒有呼叫open()方法
1 （載入）已呼叫send()方法，正在傳送請求
2 （載入完成）send()方法完成，已收到全部響應內容
3 （解析）正在解析響應內容
4 （完成）響應內容解析完成，可以在客戶端呼叫了
status屬性：HTTP狀態碼 請求結果 伺服器端的狀態 找到成功返回>200 未找到錯誤 返回:>404
lresponseText ：請求到的文字,字串
封裝的js程式碼如下:
// 封裝ajax()方法
function ajax(url,fnSucc,fnFaild){
//1、建立Ajax 物件
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest(); //宣告 相容除IE6外 所有主流瀏覽器
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //宣告 相容IE6 內建的 微軟的 外掛
}
//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 屬性改變時，就會呼叫該函式。
/** readyState狀態含義
* 0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
*/
if(oAjax.readyState==4){
/** status 狀態含義
200: "OK" 成功
404: 未找到頁面 出錯
*/
if (oAjax.status==200) {
//alert('成功了！'+Ajax.readyState); //responseXML 獲得 XML 形式的響應資料。
fnSucc(oAjax.responseText); //responseText 獲得字串形式的響應資料。
}
else{
//alert('失敗了');
if(fnFaild){
fnFaild
}
}
}
};
}
ajax(url,fnSucc,fnFaild)函式引數介紹：
url：讀取檔案的路徑，可以寫相對路徑或絕對路徑（伺服器上面的檔名都不能用中文命名）
fnSucc:成功返回資訊
fnFaild:失敗返回資訊
HTML頁面使用方法 程式碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{ //阻止快取方法：快取是根據URL來儲存的。只要url在變，就可以了。在路徑那裡加上get資料。getTime()是毫秒數
//第二種阻止快取方法: 宣告全部變數num = 0; 在路徑後面加'aaa.txt?='+(num++) 遞迴
ajax('aaa.txt?t='+new Date().getTime(), function (str){
alert(str);
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="讀取" />
</body>
</html>讀取陣列：
[1,2,3,4,5,6,7]<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('arr.txt?t='+new Date().getTime(), function (str){
var arr=eval(str); //eval eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。
alert(arr[3]); //陣列加下標
}, function (){
alert('失敗');
});
};
};
</script>[{a: 5, b: 7}, {a: 8, b: 12}]<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('arr2.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
alert(arr[0].a); //陣列的下標 點a是代表下標裡面的變數名 那個變數的值
}, function (){
alert('失敗');
});
};
};
</script>[{user: 'blue', pass: '123456'},{user: '張三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='使用者名稱：<strong>'+arr[i].user+'</strong>密碼：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
}, function (){
alert('失敗');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="讀取" />
<ul id="ul1">
</ul>
</body>
</html>傳統開發模式: (不使用 Ajax) 如果需要更新內容，會觸發一次返回伺服器HTTP的請求 必需過載整個網頁面 伺服器做出處理後，返回一個html頁面給使用者
Ajax開發模式：頁面將使用者的操作通過ajax引擎與伺服器進行通訊，將返回的結果給ajax引擎，然後ajax將資料插入指定位置。
如下是對比圖:
