JavaScript解析JSONおよびXML

AJAXを書くときは、サーバーから返される文字列を解析することがよくあります.ここでは、サーバーから返される文字の2つのフォーマットと、JavaScriptの解析方法を簡単に紹介します.
一、JSON
すなわちJSオブジェクトタグ(JavaScript Object Notation)は、JSがオブジェクトを宣言するように結合された一連の文字列である.JSは以下のようにオブジェクトを定義することができる.

var obj =

    {

        id: 2,

        name: 'n'

    };    

これによりオブジェクトobjが定義、objを用いることができる2つの共通属性idとnameがある.idは、その属性値に直接アクセスします.
サーバからデータを取得する際には1つ以上のオブジェクトを使用することが多いため、オブジェクト配列を使用する必要があります.JSのオブジェクト配列は[]で定義できます.以下のようにします.
        
var
 objs 
=
 [{ id: 
1
, name: 
'
n_1
'
 }, { id: 
2
, name: 
'
n_2
'
}];         alert(objs[
0
].id);
これにより、objs[0]が最初のオブジェクトに参照されるなど、インデックスでアクセスできる2つのオブジェクトを含むオブジェクト配列objsが定義されます.ここでは、サーバが返す文字列のフォーマットがどうなっているかを考えているかもしれませんが、文字列は結局文字列であり、JS操作を利用できる変数に変換する必要があります.これはeval関数です.次の例を参照してください.
        
var
 objs 
=
 eval_r(
"
[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}]
"
);         alert(objs[
0
].id); 
//
 return 1
サーバ側は「{id:1,name:'n_1'},{id:2,name:'n_2'}」という形式で文字列を返します.
クライアントでeval_を利用できますr()は、返される文字列を実行し、オブジェクト配列を取得する.
以下にAJAXで簡単な例を示します.ルートディレクトリの下に一般的なハンドラ(GetJson.ashx)を追加するWebサイトを新規作成します.コードは次のとおりです.

<%@ WebHandler Language="C#" Class="GetJson" %>



using System;

using System.Web;



public class GetJson : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {



        string str = "[{id:1, name:'n_1'}, {id:2, name:'n_2'}]";

        

        context.Response.ContentType = "text/plain";

        context.Response.Write(str);

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

}

 
デファルトでaspxファイルにテストスクリプトを追加するには:

    <script type="text/javascript">

        function getJson() {

            //  IE7     ，IE6      new ActiveXObject("MSXML2.XMLHTTP.6.0")

            var request = new XMLHttpRequest();



            request.open('GET', 'GetJson.ashx');

            request.onreadystatechange = function() {

                if (request.readyState == 4 && request.status == 200) {

                    var objs = eval_r(request.responseText);

                    alert(objs.length); // 2

                    alert(objs[0].id);  // 1

                    alert(objs[1].name);// 'n_2'

                }

            }

            request.send(null);

        }

    </script>

テストボタンを追加すると、次のような効果が得られます.
<
input 
type
="button"
 value
="GetJson"
 onclick
="getJson();"
 
/>
 
二、XML
JSのXML解析はDOMベースでHTMLのDOMに詳しいとXML解析は難しくありません.
注意:Firefoxでは、解析器はスペースを無視しないので、要素間のスペースは、FFのようにノードとみなされます.
しかし,我々がプログラムでXMLをつなぎ合わせる場合,ノード間にスペースがあることは一般的ではない.
 
ルートディレクトリの下に新しい一般的なハンドラ(GetXml.ashx)を追加します.コードは次のとおりです.

<%@ WebHandler Language="C#" Class="GetXml" %>



using System;

using System.Web;



public class GetXml : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {



        System.Text.StringBuilder sb = new System.Text.StringBuilder("<?xml version='1.0' ?><Persons>");

        string temp = "<Person><Id>{0}</Id><Name>{1}</Name></Person>";

        sb.AppendFormat(temp, 1, "n_1");

        sb.AppendFormat(temp, 2, "n_2");

        sb.Append("</Persons>");

        

        context.Response.ContentType = "text/xml";

        context.Response.Write(sb.ToString());

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }



}

デファルトでaspxページには、次のスクリプトが追加されます.

        function getXml() {

            //  IE7     ，IE6      new ActiveXObject("MSXML2.XMLHTTP.6.0")

            var request = new XMLHttpRequest();



            request.open('GET', 'GetXml.ashx');

            request.onreadystatechange = function() {

                if (request.readyState == 4 && request.status == 200) {

                    var xmlDoc = request.responseXML;

                    var root = xmlDoc.documentElement;

                    var elements = root.getElementsByTagName_r("Person");

                    alert(elements.length); // 2

                    // elements[0].firstChild       Person   Id  

                    // elements[0].firstChild.firstChild    Id       

                    //                   

                    alert(elements[0].firstChild.firstChild.nodeValue); // 1

                    alert(elements[1].lastChild.firstChild.nodeValue);  // 'n_2'

                }

            }

            request.send(null);

        }

 
コード・セグメントに注意:
var
 root 
=
 xmlDoc.documentElement;
主にIE 6と他のブラウザの互換性の問題を解消するため、他のブラウザの下でrequestを許可する.responseXML.getElementsByTagName_r("Person");
テストボタンを追加:

 
 
まとめ:コードから容易に分かるように,解析JSONは比較的直感的で,ネットワークで伝送する文字列も少なく,解析中もブラウザ互換性の問題を考慮する必要はない.
しかし、JSONは軽量レベルのデータインタラクションに適しており、XMLはJSONよりもいくつかの特性を持っている.例えば、ネーミングスペース、さらに多くのノードタイプがある.