首先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 即可。
本文介紹了使用原生JS的AJAX讀取json全過程，更多相關內容請關注php中文網。
相關推薦：
#以上是原生JS的AJAX讀取json全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
