AJAX介紹:Ajax是使用客戶端腳本與Web服務器交換數據的Web應用開發方法。Web頁面不用打斷交互流程進行重新加裁，就可以動態地更新。使用Ajax，用戶可以創建接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。

異步JavaScript和XML（AJAX）不是什么新技術，而是使用幾種現有技術——包括級聯樣式表（CSS）、JavaScript、XHTML、XML和可擴展樣式語言轉換（XSLT），開發外觀及操作類似桌面軟件的Web應用軟件。

AJAX執行原理:一個Ajax交互從一個稱為XMLHttpRequest的JavaScript對象開始。如同名字所暗示的，它允許一個客戶端腳本來執行HTTP請求，并且將會解析一個XML格式的服務器響應。Ajax處理過程中的第一步是創建一個XMLHttpRequest實例。使用HTTP方法（GET或POST）來處理請求，并將目標URL設置到XMLHttpRequest對象上。

當你發送HTTP請求，你不希望瀏覽器掛起并等待服務器的響應，取而代之的是，你希望通過頁面繼續響應用戶的界面交互，并在服務器響應真正到達后處理它們。要完成它，你可以向XMLHttpRequest注冊一個回調函數，并異步地派發XMLHttpRequest請求。控制權馬上就被返回到瀏覽器，當服務器響應到達時，回調函數將會被調用。

AJAX實際應用:

1. 初始化Ajax,Ajax實際上就是調用了XMLHttpRequest對象，那么首先我們的就必須調用這個對象，我們構建一個初始化Ajax的函數：

1. /** 
2. * 初始化一個xmlhttp對象 
3. */ 
4. function InitAjax() 
5. { 
6. 　var ajax=false;  
7. 　try {  
8. 　　ajax = new ActiveXObject("Msxml2.XMLHTTP");  
9. 　} catch (e) {  
10. 　　try {  
11. 　　　ajax = new ActiveXObject("Microsoft.XMLHTTP");  
12. 　　} catch (E) {  
13. 　　　ajax = false;  
14. 　　}  
15. 　} 
16. 　if (!ajax && typeof XMLHttpRequest!='undefined') {  
17. 　　ajax = new XMLHttpRequest();  
18. 　}  
19. 　return ajax; 
20. } 

你也許會說，這個代碼因為要調用XMLHTTP組件，是不是只有IE瀏覽器能使，不是的經我試驗，Firefox也是能使用的,那么我們在執行任何Ajax操作之前，都必須先調用我們的InitAjax()函數來實例化一個Ajax對象。

2. 使用Get方式:現在我們第一步來執行一個Get請求，加入我們需要獲取 /show.PHP?id=1的數據，那么我們應該怎么做呢？假設有一個鏈接：＜a href="/show.php?id=1"＞新聞1＜/a＞，我點該鏈接的時候，不想任何刷新就能夠看到鏈接的內容，那么我們該怎么做呢？

1. //將鏈接改為： 
2. ＜a href="#" onClick="getNews(1)"＞新聞1＜/a＞ 
3. //并且設置一個接收新聞的層，并且設置為不顯示： 
4. ＜div id="show_news"＞＜/div＞ 

同時構造相應的JavaScript函數：

1. function getNews(newsID) 
2. { 
3. 　//如果沒有把參數newsID傳進來 
4. 　if (typeof(newsID) == 'undefined') 
5. 　{ 
6. 　　return false; 
7. 　} 
8. 　//需要進行Ajax的URL地址 
9. 　var url = "/show.php?id="+ newsID; 
10.  
11. 　//獲取新聞顯示層的位置 
12. 　var show = document.getElementById("show_news");  
13.  
14. 　//實例化Ajax對象 
15. 　var ajax = InitAjax(); 
16.  
17. 　//使用Get方式進行請求 
18. 　ajax.open("GET", url, true);  
19.  
20. 　//獲取執行狀態 
21. 　ajax.onreadystatechange = function() {  
22. 　　//如果執行是狀態正常，那么就把返回的內容賦值給上面指定的層 
23. 　　if (ajax.readyState == 4 && ajax.status == 200) {  
24. 　　　show.innerHTML = ajax.responseText;  
25. 　　}  
26. 　} 
27. 　//發送空 
28. 　ajax.send(null);  
29. }  

那么當用戶點擊“新聞1”這個鏈接的時候，在下面對應的層將顯示獲取的內容，而且頁面沒有任何刷新。當然，我們上面省略了show.php這個文件，我們只是假設show.php文件存在，并且能夠正常工作的從數據庫中把id為1的新聞提取出來。

這種方式適應于頁面中任何元素，包括表單等等，其實在應用中，對表單的操作是比較多的，針對表單，更多使用的是POST方式，這個下面將講述。

3. 使用POST方式:其實POST方式跟Get方式是比較類似的，只是在執行Ajax的時候稍有不同，我們簡單講述一下。

假設有一個用戶輸入資料的表單，我們在無刷新的情況下把用戶資料保存到數據庫中，同時給用戶一個成功的提示。

1. //構建一個表單，表單中不需要action、method之類的屬性，全部由ajax來搞定了。 
2. ＜form name="user_info"＞ 
3. 姓名：＜input type="text" name="user_name" /＞＜br /＞ 
4. 年齡：＜input type="text" name="user_age" /＞＜br /＞ 
5. 性別：＜input type="text" name="user_sex" /＞＜br /＞ 
6.  
7. ＜input type="button" value="提交表單" onClick="saveUserInfo()"＞ 
8. ＜/form＞ 
9. //構建一個接受返回信息的層： 
10. ＜div id="msg"＞＜/div＞ 

我們看到上面的form表單里沒有需要提交目標等信息，并且提交按鈕的類型也只是button，那么所有操作都是靠onClick事件中的saveUserInfo()函數來執行了。我們描述一下這個函數：

1. function saveUserInfo() 
2. { 
3. 　//獲取接受返回信息層 
4. 　var msg = document.getElementById("msg"); 
5.  
6. 　//獲取表單對象和用戶信息值 
7. 　var f = document.user_info; 
8. 　var userName = f.user_name.value; 
9. 　var userAge = f.user_age.value; 
10. 　var userSex = f.user_sex.value; 
11.  
12. 　//接收表單的URL地址 
13. 　var url = "/save_info.php"; 
14.  
15. 　//需要POST的值，把每個變量都通過&來聯接 
16. 　var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex; 
17.  
18. 　//實例化Ajax 
19. 　var ajax = InitAjax(); 
20. 　 
21. 　//通過Post方式打開連接 
22. 　ajax.open("POST", url, true);  
23.  
24. 　//定義傳輸的文件HTTP頭信息 
25. 　ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
26. 　//發送POST數據 
27. 　ajax.send(postStr); 
28.  
29. 　//獲取執行狀態 
30. 　ajax.onreadystatechange = function() {  
31. 　　//如果執行狀態成功，那么就把返回信息寫到指定的層里 
32. 　　if (ajax.readyState == 4 && ajax.status == 200) {  
33. 　　　msg.innerHTML = ajax.responseText;  
34. 　　}  
35. 　}  
36. } 

大致使用POST方式的過程就是這樣，當然，實際開發情況可能會更復雜，這就需要開發者去慢慢琢磨。

4. 異步回調（偽Ajax方式）:一般情況下，使用Get、Post方式的Ajax我們都能夠解決目前問題，只是應用復雜程度，當然，在開發中我們也許會碰到無法使用Ajax的時候，但是我們又需要模擬Ajax的效果，那么就可以使用偽Ajax的方式來實現我們的需求。

偽Ajax大致原理就是說我們還是普通的表單提交，或者別的什么的，但是我們卻是把提交的值目標是一個浮動框架，這樣頁面就不刷新了，但是呢，我們又需要看到我們的執行結果，當然可以使用JavaScript來模擬提示信息，但是，這不是真實的，所以我們就需要我們的執行結果來異步回調，告訴我們執行結果是怎么樣的。

假設我們的需求是需要上傳一張圖片，并且，需要知道圖片上傳后的狀態，比如，是否上傳成功、文件格式是否正確、文件大小是否正確等等。那么我們就需要我們的目標窗口把執行結果返回來給我們的窗口，這樣就能夠順利的模擬一次Ajax調用的過程。

以下代碼稍微多一點， 并且涉及Smarty模板技術，如果不太了解，請閱讀相關技術資料。

上傳文件：upload.html

1. //上傳表單，指定target屬性為浮動框架iframe1 
2. ＜form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1"＞ 
3. 選擇要上傳的圖片：＜input type="file" name="image"＞＜br /＞ 
4. ＜input type="submit" value="上傳圖片"＞ 
5. ＜/form＞ 
6. //顯示提示信息的層 
7. ＜div id="message" style="display:none"＞＜/div＞ 
8.  
9. //用來做目標窗口的浮動框架 
10. ＜iframe name="iframe1" width="0" height="0" scrolling="no"＞＜/iframe＞ 
11.  
12. 　　處理上傳的PHP文件：upload.php 
13. ＜?php 
14.  
15. /* 定義常量 */ 
16.  
17. //定義允許上傳的MIME格式 
18. define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png");  
19. //圖片允許大小，字節 
20. define("UPLOAD_IMAGE_SIZE", 102400); 
21. //圖片大小用KB為單位來表示 
22. define("UPLOAD_IMAGE_SIZE_KB", 100);  
23. //圖片上傳的路徑 
24. define("UPLOAD_IMAGE_PATH", "./upload/");  
25.  
26. //獲取允許的圖像格式 
27. $mime = explode(",", USER_FACE_MIME); 
28. $is_vaild = 0; 
29.  
30. //遍歷所有允許格式 
31. foreach ($mime as $type) 
32. { 
33. 　if ($_FILES['image']['type'] == $type) 
34. 　{ 
35. 　　$is_vaild = 1; 
36. 　} 
37. } 
38.  
39. //如果格式正確，并且沒有超過大小就上傳上去 
40. if ($is_vaild && $_FILES['image']['size']＜=USER_FACE_SIZE && $_FILES['image']['size']＞0) 
41. { 
42. 　if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))  
43. 　{ 
44. 　　$upload_msg ="上傳圖片成功！"; 
45. 　}  
46. 　else  
47. 　{ 
48. 　　$upload_msg = "上傳圖片文件失敗"; 
49. 　} 
50. } 
51. else 
52. { 
53. 　$upload_msg = "上傳圖片失敗，可能是文件超過". USER_FACE_SIZE_KB ."KB、或者圖片文件為空、或文件格式不正確"; 
54. } 
55.  
56. //解析模板文件 
57. $smarty-＞assign("upload_msg", $upload_msg); 
58. $smarty-＞display("upload.tpl"); 
59.  
60. ?＞ 

模板文件：upload.tpl

1. {if $upload_msg != ""} 
2. callbackMessage("{$upload_msg}");  
3. {/if} 
4.  
5. //回調的JavaScript函數，用來在父窗口顯示信息 
6. function callbackMessage(msg) 
7. { 
8. 　//把父窗口顯示消息的層打開 
9. 　parent.document.getElementById("message").style.display = "block"; 
10. 　//把本窗口獲取的消息寫上去 
11. 　parent.document.getElementById("message").innerHTML = msg; 
12. 　//并且設置為3秒后自動關閉父窗口的消息顯示 
13. 　setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000); 
14. } 

使用異步回調的方式過程有點復雜，但是基本實現了Ajax、以及信息提示的功能，如果接受模板的信息提示比較多，那么還可以通過設置層的方式來處理，這個隨機應變吧。