WEB前端之JSON使用方法

来源：互联网发布：淘宝首页设计模板编辑：程序博客网时间：2024/06/06 11:43

JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

JSON建构于两种结构：

“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

字符串（string）与C或者Java的字符串非常相似。

数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

空白可以加入到任何符号之间。以下描述了完整的语言。

JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

举个简单的例子：

js 代码

  function showJSON() {   
      var user =    
      {    
          "username":"andy",   
          "age":20,   
          "info": { "tel": "123456", "cellphone": "98765"},   
          "address":   
              [   
                  {"city":"beijing","postcode":"222333"},   
                  {"city":"newyork","postcode":"555666"}   
              ]   
      }   
         
      alert(user.username);   
      alert(user.age);   
      alert(user.info.cellphone);   
      alert(user.address[0].city);   
      alert(user.address[0].postcode);   
  }  

这表示一个user对象，拥有username, age, info, address 等属性。

同样也可以用JSON来简单的修改数据，修改上面的例子

js 代码

 function showJSON() {   
     var user =    
     {    
         "username":"andy",   
         "age":20,   
         "info": { "tel": "123456", "cellphone": "98765"},   
         "address":   
             [   
                 {"city":"beijing","postcode":"222333"},   
                 {"city":"newyork","postcode":"555666"}   
             ]   
     }   
        
     alert(user.username);   
     alert(user.age);   
     alert(user.info.cellphone);   
     alert(user.address[0].city);   
     alert(user.address[0].postcode);   
        
     user.username = "Tom";   
     alert(user.username);   
 } 

JSON提供了json.js包，下载http://www.json.org/json.js 后，将其引入然后就可以简单的使用object.toJSONString()转换成JSON数据。

js 代码

 function showCar() {   
     var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");   
     alert(carr.toJSONString());   
 }   
   
 function Car(make, model, year, color)       {   
      this.make  =  make;   
      this.model  =  model;   
      this.year  =  year;   
      this.color  =  color;   
 }   

可以使用eval来转换JSON字符到Object

js 代码

 function myEval() {   
     var str = '{ "name": "Violet", "occupation": "character" }';   
     var obj = eval('(' + str + ')');   
     alert(obj.toJSONString());   
 }  

或者使用parseJSON()方法

js 代码

 function myEval() {   
     var str = '{ "name": "Violet", "occupation": "character" }';   
     var obj = str.parseJSON();   
     alert(obj.toJSONString());   
 }  

下面使用prototype写一个JSON的ajax例子。

先写一个servlet (我的是servlet.ajax.JSONTest1.java)就写一句话

java 代码

response.getWriter().print("{ /"name/": /"Violet/", /"occupation/": /"character/" }");  

再在页面中写一个ajax的请求

js 代码

 function sendRequest() {   
     var url = "/MyWebApp/JSONTest1";   
     var mailAjax = new Ajax.Request(   
         url,   
         {   
             method: 'get',   
             onComplete: jsonResponse   
         }   
     );   
 }   
   
 function jsonResponse(originalRequest) {   
     alert(originalRequest.responseText);   
     var myobj = originalRequest.responseText.parseJSON();   
     alert(myobj.name);   
 }   

prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(), 可以不使用json.js, 修改上面的方法

js 代码

 function jsonResponse(originalRequest) {   
     alert(originalRequest.responseText);   
     var myobj = originalRequest.responseText.evalJSON(true);   
     alert(myobj.name);   
 }  

JSON还提供了java的jar包 http://www.json.org/java/index.html API也很简单，下面举个例子

在javascript中填加请求参数

js 代码

 function sendRequest() {   
     var carr = new Car("Dodge", "Coronet R/T", 1968, "yellow");   
     var pars = "car=" + carr.toJSONString();   
   
     var url = "/MyWebApp/JSONTest1";   
     var mailAjax = new Ajax.Request(   
         url,   
         {   
             method: 'get',   
             parameters: pars,   
             onComplete: jsonResponse   
         }   
     );   
 }  

使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)

java 代码

 private void doService(HttpServletRequest request, HttpServletResponse response) 
       throws IOException {   
         String s3 = request.getParameter("car");   
         try {   
             JSONObject jsonObj = new JSONObject(s3);   
             System.out.println(jsonObj.getString("model"));   
             System.out.println(jsonObj.getInt("year"));   
         } catch (JSONException e) {   
             e.printStackTrace();   
         }   
         response.getWriter().print("{ /"name/":/"Violet/",/"occupation/":/"character/"}");   
     }   

同样可以使用JSONObject生成JSON字符串，修改servlet

java 代码

 private void doService(HttpServletRequest request, HttpServletResponse response) 
       throws IOException {   
         String s3 = request.getParameter("car");   
         try {   
             JSONObject jsonObj = new JSONObject(s3);   
             System.out.println(jsonObj.getString("model"));   
             System.out.println(jsonObj.getInt("year"));   
         } catch (JSONException e) {   
             e.printStackTrace();   
         }   
            
         JSONObject resultJSON = new JSONObject();   
         try {   
             resultJSON.append("name", "Violet")   
                       .append("occupation", "developer")   
                       .append("age", new Integer(22));   
             System.out.println(resultJSON.toString());   
         } catch (JSONException e) {   
             e.printStackTrace();   
         }   
         response.getWriter().print(resultJSON.toString());   
     }   

js 代码

 function jsonResponse(originalRequest) {   
     alert(originalRequest.responseText);   
     var myobj = originalRequest.responseText.evalJSON(true);   
     alert(myobj.name);   
     alert(myobj.age);   
 }