首先ajax（async javascript and xml）是用於前端與后端文件比如xml或者json之間的交互。他是一種異步加載技術，意味着你點擊某個加載事件是再也不用刷新整個頁面，而是發送局部請求，局部回應。由於AJAX不是完全前端，需要用到服務器，所以在做實驗的時候必須把html文件和xml或json放到服務器部署的目錄之中，在這里我使用的是TOMCAT 7X。
首先編輯一個簡單的JSON文件，並命名為json.json，如下：
[{
"key":"value"
}
]
- function showJson(){
- var test;
- if(window.XMLHttpRequest){
- test = new XMLHttpRequest();
- }else if(window.ActiveXObject){
- test = new window.ActiveXObject();
- }else{
- alert("請升級至最新版本的瀏覽器");
- }
- if(test !=null){
- test.open("GET","json.json",true);
- test.send(null);
- test.onreadystatechange=function(){
- if(test.readyState==4&&test.status==200){
- var obj = JSON.parse(test.responseText);
- for (var name in obj){
- alert(obj[name].key);
- }
- }
- };
- }
- }
- window.onload=function(){
- showJson();
- };</span>
1、使用AJAX，我們必須new一個XMLHttpRequest()的實例，在IE低版本瀏覽器中是ActiveXObject()。使用if語句判斷即可。
2、通過判斷readyState的交互狀態以及status的交互狀態來觸發onreadystatechange事件。
這里展開介紹一下readyState的4種取值情況：
（1）值為0：請求還沒有初始化，意思是還沒有開始open();
（2）值為1：請求已經初始化了但是還沒有發送，意思是還沒有send()；
（3）值為2：請求已經發送了，后台正在處理。
（4）值為3：請求還在處理，但是部分數據可以用了，具體什么意思我現在也不是很明白。
（5）值為4：后台服務器相應完畢，也就是你現在隨時可以取得請求的數據。
但是當readyState==4時我們只能知道服務器響應完畢，但還不知道服務器有沒有找到我們請求的那個文件，這時就要引用status了。
這里展開介紹一下status的幾種常見取值情況：
（1）200：找到了請求的文件。
（2）404：找不到請求的文件。
（3）500：服務器出錯。
在同時滿足了readySate==4以及status==200時我們就可以得到我們想要的value了。
3、服務器返回的值是存在responseText對象里面的。這時我們可以使用JSON.parse()來取得里面的數據。
4、我們現在把JSON文件里的一整塊數據都取了出來，但如果想取到其中的某一個塊值比如說：value，就必須用到遍歷，比如說for循環。這里的for循環我使用了另一種形式for(var name in obj)，這里的意思是取得對象的值，存放在變量name里面。因為JSON文件的結構就是由很多對象組成的。
5、如果是使用“GET”，則send()里面的值為null。如果是POST,則需要傳具體的參數比如:send(name);
最后寫給剛接觸AJAX的同學。如何運行這段代碼（配置AJAX環境）。
（1）首先你需要下載一個服務器，我建議是TOMCAT。
（2）然后把包含有你html和json文件部署（黏貼）到Tomcat根目錄下的webapps文件夾里。
（3）回到Tomcat根目錄，打開bin文件夾，找到startup.bat。雙擊打開Tomcat服務器。
（4）打開瀏覽器，輸入http://localhost:8080/檢查Tomcat是否打開，如果出現404，有可能是8080端口被占用了，這時候回到Tomcat根目錄下打開conf文件夾找到server.xml文件，找到這段代碼：Connector port="8080" ，把8080修改成8081或者8082，重新在瀏覽器中輸入http://localhost:8081/看看打開了Tomcat了沒。
（5）瀏覽器中輸入你的html文件路徑，比如：http://localhost:8080/test/index.html 即可。