Introduction détaillée à l'exemple de code JavaScript analysant JSON et XML

Lors de l'écriture en AJAX, vous devez souvent analyser une chaîne de chaînes renvoyée par le serveur. Voici une brève introduction aux deux formats de caractères renvoyés par le serveur et à la manière dont JS les analyse.

1. JSON

C'est la notation d'objet JS (JavaScript Object Notation), qui est une chaîne de chaînes combinées de la manière dont JS déclare les objets.
JS peut définir des objets de la manière suivante :

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

Ceci définit l'objet obj, qui a deux attributs publics id et name , sa valeur d'attribut est directement accessible à l'aide de obj.id.

Lors de l'obtention de données du serveur, il y a souvent plus d'un objet, ce qui nécessite l'utilisation d'un tableau d'objets. Le tableau d'objets en JS peut être défini avec [], comme suit :

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

　Ceci définit le tableau d'objets objs, qui contient deux objets et est accessible à l'aide d'index. Par exemple, objs[0] fera référence au premier objet. .

À ce stade, vous avez peut-être réfléchi au format de la chaîne renvoyée par le serveur, mais une chaîne est une chaîne après tout, et nous devons la convertir en une variable pouvant être manipulée par JS.
　Cela utilise la fonction eval, veuillez consulter l'exemple suivant :

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

D'accord, côté serveur, il vous suffit de format : [ { id : 1, name : 'n_1' }, { id : 2, name : 'n_2'}] renvoie une chaîne,

　 Côté client, vous pouvez utiliser eval() pour exécuter la chaîne renvoyée et obtenez le tableau d'objets.

Ce qui suit est un exemple simple utilisant AJAX. Créez un nouveau site Web et ajoutez un gestionnaire général (GetJson.ashx) dans le répertoire racine. Le code est le suivant :

.

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多了一些特性，比如命名空间，还有更多的节点类型。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!