Detaillierte Einführung in den Beispielcode für das Parsen von JSON und XML in JavaScript

Beim Schreiben von AJAX müssen Sie häufig eine vom Server zurückgegebene Zeichenfolge analysieren. Hier finden Sie eine kurze Einführung in die beiden vom Server zurückgegebenen Zeichenformate und wie JS sie analysiert.

1. JSON

Das ist die JS-Objektnotation (JavaScript Object Notation), eine Folge von Zeichenfolgen, die auf die Art und Weise kombiniert werden, wie JS Objekte deklariert.
JS kann Objekte auf folgende Weise definieren:

var
 obj 
=
    {
        id: 
2
,
        name: 
'
n
'
    };

Dies definiert das Objekt obj, das zwei öffentliche Attribute id und name hat , auf seinen Attributwert kann direkt über obj.id zugegriffen werden.

Beim Abrufen von Daten vom Server gibt es oft mehr als ein Objekt, was die Verwendung eines Objektarrays erfordert. Das Objektarray in JS kann mit [] wie folgt definiert werden:

  
var
 objs 
=
 [{ id: 
1
, name: 
'
n_1
'
 }, { id: 
2
, name: 
'
n_2
'
}];
        alert(objs[
0
].id);

　Dies definiert das Objektarray objs, das zwei Objekte enthält und auf das über Indizes zugegriffen werden kann. Objs[0] verweist beispielsweise auf das erste Objekt .
An diesem Punkt haben Sie vielleicht über das Format des vom Server zurückgegebenen Strings nachgedacht, aber ein String ist schließlich ein String, und wir müssen ihn in eine Variable konvertieren, die von JS manipuliert werden kann.
　Dabei wird die Bewertungsfunktion verwendet. Sehen Sie sich bitte das folgende Beispiel an:

 
var
 objs 
=
 eval(
"
[{ id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}]
"
);
        alert(objs[
0
].id); 
//
 return 1

Okay, auf der Serverseite müssen Sie nur Format: [ { id: 1, name: 'n_1' }, { id: 2, name: 'n_2'}] gibt eine Zeichenfolge zurück,
　Auf der Clientseite können Sie eval() verwenden, um die zurückgegebene Zeichenfolge auszuführen und erhalten Sie das Objektarray.

Das Folgende ist ein einfaches Beispiel für die Verwendung von AJAX. Erstellen Sie eine neue Website und fügen Sie einen allgemeinen Handler (GetJson.ashx) im Stammverzeichnis hinzu. Der Code lautet wie folgt:

GetJson.ashx
0be5e9f39965ff803a31e519fef837bc

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;
        }
    }

}

在Default.aspx 文件中添加测试脚本：

    
<
script type
=
"
text/javascript
"
>
        
function
 getJson() {
            
//
 在IE7下测试通过，IE6下必须创建 new ActiveXObject("MSXML2.XMLHTTP.6.0")
            
var
 request 
=
 
new
 XMLHttpRequest();
            request.open(
&#39;
GET
&#39;
, 
&#39;
GetJson.ashx
&#39;
);
            request.onreadystatechange 
=
 
function
() {
                
if
 (request.readyState 
==
 
4
 
&&
 request.status 
==
 
200
) {
                    
var
 objs 
=
 eval(request.responseText);
                    alert(objs.length); 
//
 2
                    alert(objs[
0
].id);  
//
 1
                    alert(objs[
1
].name);
//
 &#39;n_2&#39;
                }
            }
            request.send(
null
);
        }
    
<
/
script>

再添加一个测试按钮即可以看到效果：

<input type="button" value="GetJson" onclick="getJson();" />

　　二、XML

　　　　JS对XML的解析是基于DOM的，对HTML的DOM熟悉的话，解析XML就没什么困难了。

　　　　注意：在Firefox中，解析器不会忽略空格，所以元素间的空格，FF一样会认为是一个节点。
　　　　不过在我们用程序拼接XML的时候，一般不会出现节点间有空格的情况。

　　　　在根目录下添加一个新的一般处理程序（GetXml.ashx），代码如下：

　　　　在Default.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(
"
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;

　　　　主要是为了消除IE6和其他浏览器的兼容问题，在其他浏览器下，允许request.responseXML.getElementsByTagName("Person");

　　　　添加测试按钮：

<input type="button" value="GetXml" onclick="getXml();" />

 

总结：从代码上很容易看出，解析JSON相对直观，在网络中需要传输的字符串也比较少，解析过程中也不需要考虑浏览器兼容问题。
　　   但JSON比较适合轻量级的数据交互，XML则比JSON多了一些特性，比如命名空间，还有更多的节点类型。

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode für das Parsen von JSON und XML in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!