## 一、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)
- 前言
- 一
- 二:變量
- 三:數據運算
- 四:流程控制
- 五:內建的全局函數
- 六:自定義函數
- 七:面向對象編程(OOP)
- 八:靜態成員、靜態類、枚舉、重載和覆蓋
- 九:原型鏈本質論
- 十:ECMAScript 5 增強的對象模型
- 十一:處理字符串---String類和正則表達式
- 十二:數組、多維數組和符合數組(哈希映射)
- 十三:處理日期和時間
- 十四:JavaScript內建類
- 十五:BOM之源---window對象
- 十六:BOM之源---BOM基本應用
- 十七:BOM新成就(1)--客戶端存儲數據(Storage實現)
- 十八:BOM新成就(1)--客戶端存儲數據(Web SQL DataBase實現)
- 十九--HTML5 DOM新標準---處理文檔元信息和管理交互能力
- 二十---XMLHttpRequest和AJAX解決方案