javascript 解析ajax返回的xml和json格式的資料

標籤：

寫個例子，以備後用

一、JavaScript 解析返回的xml格式的資料：

1、javascript版本的ajax發送請求

（1）、建立XMLHttpRequest對象，這個對象就是ajax請求的核心，是ajax請求和響應的資訊載體，單是不同瀏覽器建立方式不同

（2）、請求路徑

（3）、使用open方法綁定發送請求

（4）、使用send() 方法發送請求

（5）、擷取伺服器返回的字串   xmlhttpRequest.responseText;

（6）、擷取服務端返回的值，以xml對象的形式儲存  xmlhttpRequest.responseXML;

（7）、使用W3C DOM節點樹方法和屬性對該XML文檔對象進行檢查和解析。

2、 執行個體：

（1）、發送ajax請求，以及解析返回的資料

<script type="text/javascript">
/* js版本發送ajax請求  */
function tellxml(){
 // 建立對象,適合於firefox 和safari
 var  xmlhttpRequest= new XMLHttpRequest();
 // 建立對象，適合於ie
 // var xmlhttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
 // 請求發送路徑 url
 var url="http://localhost:18080/servlet/Servlet1?aa=10";
 // Open方法綁定一個發送過程,但不發送資料。Open方法最後一個參數為true時表示非同步,否則同步
 xmlhttpRequest.open("POST",url,true);
 // Send方法就是發送請求資料
 xmlhttpRequest.send(url);
 // readstate 就是一個xmlhttprequest 對象的一個屬性，來記錄伺服器返回的狀態
 var readstate =xmlhttpRequest.readyState;
 alert("狀態："+readstate);
 // status 就是發送請求的狀態，如果是200 則說明請求響應成功
 var status=xmlhttpRequest.status;
 alert("請求發送結果"+status);
 // "responseText”是xmlhttpRequest的一個屬性，來以字串形式儲存HTTP響應值；“responseXML”屬性是以XML形式來記錄HTTP響應的值。
 var text= xmlhttpRequest.responseText;
 alert(text);
 // “responseXML”是xmlhttpRequest的一個屬性，是以XML文檔的對象來儲存伺服器端返回的值，可以使用W3C DOM節點樹方法和屬性對該XML文檔對象進行檢查和解析。
 var  xml= xmlhttpRequest.responseXML;
 var values=xml.getElementsByTagName("info");
 alert("值"+values);
 alert("長度"+values.length);
 // 解析擷取內容
 for(var i=0;i<values.length;i++){
     var  name1=values[i].getElementsByTagName("name")[0].firstChild.data;
     alert(name1);
 }
};
</script>

（2）、servlet 接受ajax 請求：

 @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String aaa= request.getParameter("aa");
        System.out.print("ajax 資料："+aaa);
        // 向用戶端響應資訊
        response.setCharacterEncoding("GBK");
        response.setContentType("text/xml");
        PrintWriter  out= response.getWriter();
        out.print("<?xml version=\"1.0\" encoding=\"GBK\"?>");
        out.println("<infos>");
        out.println("<info>");
        out.println("<name>"+"name1"+"</name>");
        out.println("<age>"+12+"</age>");
        out.println("<name>"+"name2"+"</name>");
        out.println("<age>"+22+"</age>");
        out.println("</info>");
        out.println("<info>");
        out.println("<name>"+"name11"+"</name>");
        out.println("<age>"+112+"</age>");
        out.println("<name>"+"name22"+"</name>");
        out.println("<age>"+222+"</age>");
        out.println("</info>");
        out.println("</infos>");
    
    }

二、JavaScript 解析返回的json格式的資料：注意這裡擷取的是responseText 而不是responseXML也就是字串而不是xml對象，因為返回的是json

1、發送請求，並解析返回的json格式的資料（這裡返回的是json 對象的格式）
<script type="text/javascript">
/* js 解析返回的格式為 json  */
function  telljson(){
    // 建立 xmlhttpRequest 對象
     var  xmlhttpRequest= new XMLHttpRequest();
     //請求URL
     var url="http://localhost:18080/servlet/Servlet3?aa=10";
     // 將請求過程綁定到 open 方法
     xmlhttpRequest.open("POST",url,true);

     // 發送請求    

     xmlhttpRequest.send(url);
     // readstate 就是一個xmlhttprequest 對象的一個屬性用來記錄服務端響應的狀態
     var readstate =xmlhttpRequest.readyState;
     alert("請求準備狀態："+readstate);

     // status 伺服器執行的狀態 

    var status=xmlhttpRequest.status;
     alert("請求發送結果"+status);
     //  responseText 對象為xmlhttpRequest 對象的一個屬性，用來以字串的方式儲存伺服器端返回的值。
     var text= xmlhttpRequest.responseText;
     alert("json text: "+text);
     // 擷取json 返回值
     // 那邊傳的是json對象的格式的一個字串，在前台首先將字串轉化為一個json格式的js對象
     var  json= eval("("+text+")");
      // 通過eval() 方法將json格式的字串轉化為js對象，並進行解析擷取內容
    alert("age:"+json.age+"age1:"+json.age1);
    
};
</script>

2、servlet 接受請求，並返回資料

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 向ajax 返回json格式的資料
                String aaa= request.getParameter("aa");
                System.out.print("ajax 資料："+aaa);
                // 向用戶端響應資訊
                response.setCharacterEncoding("GBK");
                response.setContentType("text/json");
                PrintWriter  out= response.getWriter();
                // 這裡組裝json對象的格式，並轉化為json格式的字串返回。
                String stu="{age:12,age1:23,age2:33}";

                out.print(stu);
                out.flush();
                out.close();

    }

三、JavaScript 解析返回的json數組格式的資料：

1、發送ajax請求

<script type="text/javascript">
/* js 解析返回的格式為 json  */
function  telljson(){
    // 建立xmlhttpRequest對象
     var  xmlhttpRequest= new XMLHttpRequest();
     //請求url
     var url="http://localhost:18080/servlet/Servlet3?aa=10";
     // open 方法綁定請求路徑
     xmlhttpRequest.open("POST",url,true);
    // 發送ajax請求

    xmlhttpRequest.send(url);
     // readstate 就是一個xmlhttprequest 對象的一個屬性用來記錄伺服器返回的狀態資訊
     var readstate =xmlhttpRequest.readyState;
     alert("請求準備狀態："+readstate);

     //   status 屬性用來記錄伺服器返回的執行狀態資訊

     var status=xmlhttpRequest.status;
     alert("請求發送結果"+status);
     // responseText屬性用來以字串方式儲存伺服器端返回的資料
     var text= xmlhttpRequest.responseText;
     alert("json text: "+text);
     // 那邊傳的是json數組的格式，通過js的eval() 方法將json數組格式的字串轉化為js數組
    var  json= eval("("+text+")");
    //  解析這個js數組，擷取數值

    var  age=json[0].age;
    var  age1=json[0].age1;
    var  age2=json[0].age2;
    alert("age:"+age+"age1"+age1+"age2"+age2);

};
</script>

四、ajax  XMLHttpRequest 對象的三個屬性以及open 和send方法：

(1)onreadystatechange 屬性
onreadystatechange 屬性存有處理伺服器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設定：

xmlHttp.onreadystatechange=function()
{
// 我們需要在這裡寫一些代碼
}
(2)readyState 屬性
readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。

這是 readyState 屬性可能的值：

狀態 描述
0 請求未初始化（在調用 open() 之前）
1 請求已提出（調用 send() 之前）
2 請求已發送（這裡通常可以從響應得到內容標題部）
3 請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
4 請求已完成（可以訪問伺服器響應並使用它）

我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得資料）：

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
    {
    // 從伺服器的response獲得資料
    }
}
(3)responseText 屬性
可以通過 responseText 屬性來取回由伺服器返回的資料。

在我們的代碼中，我們將把時間文字框的值設定為等於 responseText：

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
    {
    document.myForm.time.value=xmlHttp.responseText;
    }
}

另外：

AJAX - 向伺服器發送一個請求
要想把請求發送到伺服器，我們就需要使用 open() 方法和 send() 方法。

open() 方法需要三個參數:

　　第一個參數定義發送請求所使用的方法（GET 還是 POST）。

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• 無法使用快取檔案（補救伺服器上的檔案或資料庫）
• 向伺服器發送大量資料（POST 沒有資料量限制）
• 發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

　　第二個參數規定伺服器端指令碼的 URL(該檔案可以是任何類型的檔案，比如 .txt 和 .xml，或者伺服器指令碼檔案，比如 .asp 和 .php （在傳迴響應之前，能夠在伺服器上執行任務）)。

　　第三個參數規定應當對請求進行非同步地處理(true（非同步）或 false（同步）)。

send() 方法可將請求送往伺服器。如果我們假設 HTML 檔案和 ASP 檔案位於相同的目錄，那麼代碼是這樣的：

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

五、之前的執行個體都沒有使用 XMLHttpRequest 對象的 onreadystatechange這個屬性,下面看看這個屬性的執行個體：1、 onreadystatechange  這個屬性在前面也說了，就是在XMLHttpRequest 這個對象的 readyState  這個值改變的時候會執行。

2、發送ajax請求並解析

<script type="text/javascript">
/* js 解析返回的格式為 json  */
function  telljson(){
    // 建立對象,適合於firefox 和safari
     var  xmlhttpRequest= new XMLHttpRequest();
     //請求發送路徑 url
     var url="http://localhost:18080/servlet/Servlet3?aa=10";
     // Open方法綁定一個發送過程,但不發送資料。Open方法最後一個參數為true時表示非同步,否則同步
     xmlhttpRequest.open("POST",url,true);
     // Send方法就是發送請求資料
     xmlhttpRequest.send(url);
    //onreadystatechange 屬性存有處理伺服器響應的函數
     xmlhttpRequest.onreadystatechange =function(){
        //readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。
         alert("狀態改變了："+xmlhttpRequest.readyState);
         // 如果是4  請求已完成（可以訪問伺服器響應並使用它）
         if(xmlhttpRequest.readyState==4){
             var readstate =xmlhttpRequest.readyState;
             alert("請求準備狀態："+readstate);
             var status=xmlhttpRequest.status;
             alert("請求發送結果"+status);
             // "responseText”是xmlhttpRequest的一個屬性，來以字串形式儲存HTTP響應值；“responseXML”屬性是以XML形式來記錄HTTP響應的值。
             var text= xmlhttpRequest.responseText;
             alert("json text: "+text);
             // 擷取json 返回值
             // 那邊傳的是json數組的格式，這邊解析後就是一個json數組
            var  json= eval("("+text+")");
            var  age=json[0].age;
            var  age1=json[0].age1;
            var  age2=json[0].age2;
            alert("age:"+age+"age1"+age1+"age2"+age2);
         }
     }

};
</script>

3、servlet返回的資料

protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        // 向ajax 返回json格式的資料
        String aaa = request.getParameter("aa");
        System.out.print("ajax 資料：" + aaa);
        // 向用戶端響應資訊
        response.setCharacterEncoding("GBK");
        response.setContentType("text/json");
        PrintWriter out = response.getWriter();
        // 這裡使用 json 數組的格式
        String stu = "[{age:12,age1:23,age2:33}]";
        out.print(stu);
        out.flush();
        out.close();
    }

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

javascript 解析ajax返回的xml和json格式的資料