## 一、AJAX概述 ?????? AJAX是Asynchronous JavaScript and XML的縮寫，中文譯作異步JavaScript和XML。AJAX 不是新的編程語言，而是一種使用現有標準的新方法，在不重新加載頁面的情況下，與服務器交換數據并更新部分網頁的藝術。其核心是：客戶端的Javascript能夠與web服務器進行異步數據交換。 ## 二、AJAX基礎---XMLHttpRequest對象 ????? 所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。 ?????? 1、創建 XMLHttpRequest 對象的語法： ???????????? var obj1 = new XMLHttpRequest();； ???????????? IE5和IE6中，使用ActiveX對象：var obj2 = new ActiveXObject("Micorosoft.XMLHTTP"); ???????????? 可以用如下方式保持兼容： ~~~ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } ~~~ ????? 2、XMLHttpRequest 對象的方法和屬性 ????? XMLHttpRequest 對象的方法和屬性用來向服務器發送請求和從服務器獲取響應。 ???????2.1??? 發送請求：open()和send() open()方法用于創建一個請求，創建的HTTP請求并未發送，直到調用send()方法才被發送  method不區分大小寫；URL可以是絕對或者相對地址；async默認為true，意味著并不會立即返回數據。string參數可選，用于定義發送請求的正文（最好用字符串格式，并且使用setRequestHeader()方法定義請求報頭的內容內型及編碼方式）。 ???????????? 2.2????setRequestHeader()：設置請求報頭，將和請求一同發送到服務端  ~~~ //如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。 //然后在 send() 方法中規定您希望發送的數據： xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); ~~~ ? ? ? ? ? ? 2.3 ?? abort():終止請求 ，沒有參數。 ## 三、AJAX獲取服務器響應 ? ? ? 利用XMLHttpRequest對象和屬性獲取服務器的響應，包括HTTP報頭和響應的正文。 ? ? ? 1、xmlObj.getAllResponseHeaders():獲取所有響應的報頭，以字符串形式返回。每個HTTP報頭名稱和值用冒號分隔，如myheader:myvalue，并以\r\n結束。 ? ? ? ? ? ?? 2、xmlObj.getResponseHeader(param):獲取響應中某個特定的字段值，參數param是一個響應的HTPP字段名。 ??????? 3、responseText和responseXML屬性 ????????????? 均為只讀屬性，用于返回服務器中響應的正文。  ~~~ <span style="font-size:14px;">//responseText屬性 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ////responseXML屬性 xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;</span> ~~~ ?????? 4、status和statusText屬性 ???????????? 均為只讀屬性，用于判斷響應狀態。status表示響應中的狀態碼，如404,200等，statusText表示狀態文本信息，如OK，Not Found。狀態碼和文本信息一一對應，常見如下：  ????????????????[點擊查看完整版。](http://blog.sina.com.cn/s/blog_674b5aae0100m95j.html)這兩個屬性僅在send()方法發送數據并接收到服務器響應完畢后才有效。 ??????? 5、readyState屬性 ????????????? 該屬性表示HTTP請求的狀態碼，只讀，返回一個整數，其值和說明如下： ??????????????0 描述一種"未初始化"狀態;此時，已經創建一個xmlhttp[request](http://www.111cn.net/tags.php/request)對象，但是還沒有初始化。? ??????? 1 描述一種"發送"狀態;此時，代碼已經調用了xmlhttprequest open()方法并且xmlhttprequest已經準備好把一個請求發送到服務器。? ??????? 2 描述一種"發送"狀態;此時，已經通過send()方法把一個請求發送到服務器端，但是還沒有收到一個響應。? ??????? 3 描述一種"正在接收"狀態;此時，已經接收到http響應頭部信息，但是消息體部分還沒有完全接收結束。? ??????? 4 描述一種"已加載"狀態;此時，響應已經被完全接收。 ## 四、onreadystatechange 事件 ?? readyState 屬性存有 XMLHttpRequest 的狀態信息。每當 readyState 改變時，就會觸發 onreadystatechange 事件。onreadystatechange屬性可以指定一個函數，當狀態改變就調用該函數。函數經常與readyState/status/statusText屬性確定響應的具體狀態  ~~~ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } ~~~ ## 五、解決請求被瀏覽器緩存的問題 ?? 在使用XMLHttpRequest時，要注意的一個問題是加載的內容可能被瀏覽器緩存。可以對URL參數作修改避免此問題。常用方法是加上一個隨機數作為查詢參數。 ~~~ <span style="color:#000000;">xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); <span style="font-family:SimSun;">//或者:xmlhttp.open("get","url"+(new Date()).getTime(),true);</span> xmlhttp.send();</span> ~~~ ## 六、[點擊看實例](http://blog.csdn.net/u011043843/article/details/32943397)