1>:今天重新回到對AJAX的認識，首先從AJAX的由來說起，由于感覺自己才疏學淺，
我感覺只有了解了WEB的發展歷史，我們才能更好地理解并運用AJAX。
2>:其實AJAX最大的應用就是我們要理解XMLHttpRequest這個對象。XMLHttpRequest可以提供不重新加載頁面的情況下更新網頁，在頁面加載后在客戶端向服務器請數 據， 在 頁面加載后在服務器端接受數據，在后臺向客戶端發送數據。XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，并且能以文本或者一個 DOM 文檔形式返回內容。
3>:我們如何創建一個XMLHttpRequest對象呢？
首先我們要知道XMLHttpRequest對象開始時有微軟開發的一個基于IE5，IE6的一個插件，所以他在IE瀏覽器中肯定有自己的創建方式，IE中把他實現成一個ActiveX對象，但其他瀏覽器如果也想使用 XMLHttpRequest對象，就必須依靠JAVASCRIPT創建本地對象。我們在使用時不需要判斷瀏覽器的類型，只需要看瀏覽器提供對ActiveX的支持。
下面就是XMLHttpRequest的創建方式：
[javascript] view plaincopyprint?
01.function createXHR()
02.{
03. if(window.ActiveXObject)
04. {
05. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
06. }
07. else if(window.XMLHttpRequest)
08. {
09. xmlHttpRequest=new XMLHttpRequest();
10. }
11. if(null==xmlHttpRequest)
12. {
13. alert("瀏覽器不支持");
14. }
15.}
function createXHR()
{
if(window.ActiveXObject)
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttpRequest=new XMLHttpRequest();
}
if(null==xmlHttpRequest)
{
alert("瀏覽器不支持");
}
}4>:介紹XMLHttpRequest的常用屬性、方法：
百度其實是個好東西，我沒必要復制粘貼：大家可以參考http://baike.baidu.com/view/1105115.htm
5>:XMLHttpRequest的應用：
其實要理解AJAX并學會運用我們只要掌握三方面內容，第一就是XMLHttpRequest對象的創建。第二就是如何從表單獲取值并傳到服務器。第三就是如何從后臺獲取數據顯示在前臺。大家想想AJAX的應用是不是就是圍繞這三方面。
下面我們來簡單說一下如何從表單獲取值的問題：其實只要稍微了解點JavaScript的熱你都知道我們DOM文檔模型，通過操縱文檔對象模型中對象的屬性并調用其方法，可以使腳本按照一定的方式顯示Web頁并與用戶的動作進行交互。
我們常用的就是document.getElementById("id").value.來獲取網頁中的數據。其他的大家用到就百度。
我們獲取到值之后就是把這個值傳給后臺：這里我們一般采用get:方式提交，采用url傳參。通過調用：xmlHttpRequest.open("get","url?paramater="+value,true);
最后就是如何從后臺獲取值傳到前臺顯示：這里是通過xmlHttpRequest.responseText（返回一個字符串）xmlHttpRequest.responseXML返回一個XML文件。
我們可以通過解析這兩種值插入到頁面中：通常我們用到的顯示在htbml中方式是：通過document.getElementById("id").value=xmlHttpRequest.responseText;
或者document.getElementById("id").innerHTML=xmlHttpRequest.responseText;
知道了這些我們先做一個簡單地例子：
[javascript] view plaincopyprint?
01.<script type="text/javascript">
02. var xmlHttpRequest=null;
03. function createXHR()
04. {
05. if(window.ActiveXObject)
06. {
07. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
08. }
09. else if(window.XMLHttpRequest)
10. {
11. xmlHttpRequest=new XMLHttpRequest();
12. }
13. if(null!=xmlHttpRequest)
14. {
15. var v1=document.getElementById("num1").value;
16. var v2=document.getElementById("num2").value;
17. xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true);
18. xmlHttpRequest.onreadystatechange=callback;
19. xmlHttpRequest.send(null);
20. }
21. }
22. function callback()
23. {
24. if(xmlHttpRequest.readyState==4)
25. {
26. if(xmlHttpRequest.status==200)
27. {
28. var responseText=xmlHttpRequest.responseText;
29. document.getElementById("num3").innerHTML=responseText;//innerHTML不能小寫
30. }
31. }
32. }
33. </script>
<script type="text/javascript">
var xmlHttpRequest=null;
function createXHR()
{
if(window.ActiveXObject)
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttpRequest=new XMLHttpRequest();
}
if(null!=xmlHttpRequest)
{
var v1=document.getElementById("num1").value;
var v2=document.getElementById("num2").value;
xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true);
xmlHttpRequest.onreadystatechange=callback;
xmlHttpRequest.send(null);
}
}
function callback()
{
if(xmlHttpRequest.readyState==4)
{
if(xmlHttpRequest.status==200)
{
var responseText=xmlHttpRequest.responseText;
document.getElementById("num3").innerHTML=responseText;//innerHTML不能小寫
}
}
}
</script>[html] view plaincopyprint?
01.<form method="" action="">
02. <table border="1" borderstyle="solid" cellpacing="0" >
03. <tr><td><input type="text" id="num1"/></td></tr>
04. <tr><td><input type="text" id="num2"/></td></tr>
05. <tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr>
06. <tr><td><span id="num3"></span></td></tr>
07. </table>
08. </form>
<form method="" action="">
<table border="1" borderstyle="solid" cellpacing="0" >
<tr><td><input type="text" id="num1"/></td></tr>
<tr><td><input type="text" id="num2"/></td></tr>
<tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr>
<tr><td><span id="num3"></span></td></tr>
</table>
</form>以上代碼有借鑒http://blog.csdn.net/csh624366188/article/details/7670500大家也可以去看。
還有兩哥問題一：如何將結果顯示在下拉列表，第二如何讀取XML文件，這個稍后介紹。