原生JS的AJAX讀取json全過程

首先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中文網。

相關推薦：

#vue.js安裝與設定

JS實作瀏覽器列印、列印預覽

JS回呼函數實例

#

以上是原生JS的AJAX讀取json全過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！