JSON入门

JSON，全称是Javascript Object Notation（Javascript对象表示法），它是一种轻量级的数据交换格式，其语法是一种传输和生成数据的协定，类似于C家族的语言，很容易被C家族的语言所解析。

其语法格式可对比参照CSS语法。约定如下：
对象：包含在{}之间；
属性：采用key-value对方式，属性之间使用逗号（！）分开，形如string:value；
数组：包含在[]之间（方括号）；
元素：之间使用逗号分开；
值：可以是js所有基本对象，包括字符串、数字、对象、数组、true、false、null。

<script type="text/javascript">
var O={
    name:"Wang Hongjian",
    age:23,
    gender:"male",
    isStudent:false,
    like:["Reading","Movie","Music"],
    habbit:function(){
        alert("Hello everybody,welcome to my 51obj.cn\n" +
        "I Like " + this.like[0]);
    }
}
O.habbit();
</script>

预览效果

相比较之前的js传统对象表示法

var O=new Object();
O.name="Wang Hongjian";
O.age=23;
O.gender="male";
O.isStudent=false;
O.like=new Array("Reading","Movie","Music");
O.habbit=function(){
    alert("Hello everybody,welcome to my 51obj.cn\n" +
    "I Like " + this.like[0]);
}

JSON显然更简洁，也相对易懂。

JSON与javascript

JSON是Javascript的原生格式，也就是说在Javascript中处理JSON数据不需要任何的工具。试试下面的例子，这样你就会跟XML说byebye了。

var D={"Department":
    [
        {"Person1":[{"userName":"admin1","userPass":"123456"},
                    {"userName":"admin2","userPass":"123456"},
                    {"userName":"admin3","userPass":"123456"}]
        },
        {"Person2":[{"userName":"admin4","userPass":"123456"},
                    {"userName":"admin5","userPass":"123456"},
                    {"userName":"admin6","userPass":"123456"}]
        }
    ]
};
var p1=D.Department[0].Person1[0].userName;
alert(p1);

预览效果

eval函数

eval用于执行其函数体内可表示为js代码的字符串

var _sum="2+3";
alert("_sum=" + _sum + "\neval(_sum)=" + eval(_sum));

得到如下结果：

 

var newVar="Wang";
var newVarString=newVar + "='Hongjian'";
eval(newVarString);
alert("Wang is " + Wang);

得到如下结果：

执行类JSON字符串

var str="{name:'Wang Hongjian',age:23}";
var o=eval("Me=" + str);
alert(o);
alert("name=" + o.name);
alert("age=" + o.age);

得到如下结果：

 

查看以上例子

JSON与AJAX

我们知道在AJAX中常使用这种GET方式来传递数据：GetUser.aspx?userName=admin&userPass=123456，则使用JSON可将其表示为{"userName":"admin","userPass":"123456"}，这样当然体现不出JSON的优势，但转变一下，可以得到下面的格式。

{"Department":
    [
        {"Person1":[{"userName":"admin1","userPass":"123456"},
                    {"userName":"admin2","userPass":"123456"},
                    {"userName":"admin3","userPass":"123456"}]
        },
        {"Person2":[{"userName":"admin4","userPass":"123456"},
                    {"userName":"admin5","userPass":"123456"},
                    {"userName":"admin6","userPass":"123456"}]
        }
    ]
}

格式化为以下方式（不然后因为换行导致出错）

 

var D='[{Person1:[{"userName":"admin1","userPass":"123456"},{"userName":"admin2","userPass":"123456"},{"userName":"admin3","userPass":"123456"}]},{Person2:[{"userName":"admin4","userPass":"123456"},{"userName":"admin5","userPass":"123456"},{"userName":"admin6","userPass":"123456"}]}]';

var _D=eval("(" + D + ")");

使用alert(_D[0].Person1[0].userName);得到如下结果

发散一下思维，这样只要数据处理端解析这条数据，便能达到处理多条数据的结果。

Related posts:

  1. Javascript系列教程：面向对象讲解（二） ·对象的声明 js对象的声明语法： var obj=new Object();//注意这里的是大写O 这样就声明了一个空的对象，该语法可简写为 var obj={}; 还记得数组对象Array的声明方式吗？var arr=new...
  2. return返回的问题 js函数返回值时，不需要声明该返回值，只需要使用return后跟要返回的值即可。 function ReturnDemo(){     var name="Wang Hongjian";     return name;...
  3. Javascript系列教程：面向对象讲解（三） 对象的访问修饰条符 <script type="text/javascript"> function Person(){ var Name="Wang Hongjian"; var Age=22;//私有成员...
  4. Javascript系列教程：面向对象讲解（四） 私有属性只能在构造函数内部定义与使用； 实例属性必须在对象实例化后使用； 类属性直接通过类名去使用...

以上关联文章由 Yet Another Related Posts Plugin 提供支持。