JSON 入门探讨。

添加 JSON

在使用名称/值对或 XML 时，实际上是使用 JavaScript 从应用程序中取得数据并将数据转换成另一种数据格式。在这些情况下，JavaScript 在很大程度上作为一种数据操纵语言，用来移动和操纵来自 Web 表单的数据，并将数据转换为一种适合发送给服务器端程序的格式。

但是，有时候 JavaScript 不仅仅作为格式化语言使用。在这些情况下，实际上使用 JavaScript 语言中的对象来表示数据，而不仅是将来自 Web 表单的数据放进请求中。在这些情况下，从 JavaScript 对象中提取数据，然后再将数据放进名称/值对或 XML，就有点儿多此一举 了。这时就合适使用 JSON：JSON 允许轻松地将 JavaScript 对象转换成可以随请求发送的数据（同步或异步都可以）。

JSON 并不是某种魔弹；但是，它对于某些非常特殊的情况是很好的选择。不要认为您不会遇到这些情况。阅读本文和下一篇文章来了解 JSON，这样，遇到这类问题时您就知道该怎么办了。

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪（稍后会看到几个示例），但是 JavaScript 很容易解释它，而且 JSON 可以表示比名称/值对更复杂的结构。例如，可以表示数组和复杂的对象，而不仅仅是键和值的简单列表。 

如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

 

示例1：JSON数据格式，以及获取其中的数据

JSON数据格式，以及获取其中的数据

< script type = " text/javascript " >
var  people  =
  ... ... { "programmers": [
    ......{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    ......{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    ......{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    ......{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    ......{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    ......{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    ......{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    ......{ "firstName": "Sergei", "lastName": "Rachmaninoff000", "instrument": "piano" }
   ]
  } ;
      people.musicians[ 1 ].lastName  =   " Rachmaninov111 " ;  // 赋值修改数据
      
      alert(people.authors[ 1 ].genre);             //  Value is "fantasy"

    alert(people.musicians[ 1 ].lastName);        

    alert(people.programmers[ 2 ].firstName);     //  Value is "Elliotte"
    
    
var  com  =
 ... ... {comments:[
     ......{
          id:1,
          author:"someone1",
          url:"http://someone1.x2design.net",
          content:"hello"
     },
     ......{
          id:2,
          author:"someone2",
          url:"http://someone2.x2design.net",
         content:"hello"
     },
     ......{
          id:3,
          author:"someone3",
          url:"http://someone3.x2design.net",
          content:"hello"
     }],
   authors: [
    ......{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    ......{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    ......{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }]
 } ;

     alert(com.comments[ 0 ]. content);
    alert(com.authors[ 0 ]. firstName);
  

</ script >

 

示例2：利用jquery     和 JSON获取进行异步数据的传递和显示

示例中传递过来的数据格式为：

[{"name":"备忘录","id":"3"},{"name":"学习java","id":"5"},{"name":"技术研究","id":"2"},{"name":"目前工作","id":"1"},{"name":"记事本","id":"4"}]

 

<% ... @ page contentType="text/html;charset=utf-8" %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < meta  http-equiv ="Content-type"  content ="text/html; charset=utf-8" >
         < script  type ="text/javascript"  src ="jquery.js" ></ script >
         < link  href ="task.css"  type ="text/css"  rel ="stylesheet" >
         < title > My JSP 'demoTest.jsp' starting page </ title >

< script  type ="text/javascript" > ...
//获取任务列表


function getLists() ...{
    $.getJSON("taskservice.jsp",                //服务器页面地址
        ...{
            action: "getLists"                  //action参数
        },
        function(json) ...{                         //回调函数
            alert(json);
            alert($("#lists"));
            $("#lists").empty();                //清空现有列表
            $(json).each(function(i) ...{          //遍历结果数组
                //创建任务列表项容器div
                var box = $(document.createElement("div"));
                box.addClass("box");
                box.append("·");
                //创建任务列表项span
                var spanNode = $(document.createElement("span"));
                spanNode.id("list" + json[i].id);   //设置任务id
                spanNode.addClass("pointer");       //增加class样式
                spanNode.addClass("list");          //增加class样式
                spanNode.click(function()...{          //设置鼠标点击响应函数
                    alert(json[i].id);           //鼠标点击后获取列表内任务
                });
                spanNode.html(json[i].name);        //设置显示的任务列表项名称
                box.append(spanNode);               //将任务列表项追加到容器中
                //在任务列表项容器中继续追加DEL操作span
                $(box).append("<span class='operation pointer' onclick='delList(" + json[i].id + ")'>[ DEL ]</span>");
                //在任务列表项容器中继续追加EDIT操作span
                $(box).append("<span class='operation pointer' onclick='editList(" + json[i].id + ")'>[ EDIT ]</span>");
                $("#lists").append(box);            //将任务列表项容器加入到列表中
            });
            //在列表中追加添加新列表表单
            $("#lists").append("<div><input type='text' id='newListName'></div>");
            $("#lists").append("<div><input type='button' value='添加新列表' onclick='addNewList()'></div>");
        }
    );
}

<%
    request.getSession().setAttribute("_LOGIN_USER_","1");
%>
</ script >


</ head >

< body  onload ="getLists()" >

< table  id ="taskContainer"  style =""  border ="0" >
         < tr >
             < td  valign ="top" >
                 <!--  任务列表  -->
                 < div  class ="title" >
                    任务区列表
                     </ div >
                 < div  id ="lists" >
                 </ div >
             </ td >
             < td  valign ="top" >
                 <!--  任务  -->
                 < div  id ="currentList"  class ="title" ></ div >
                 < div  id ="tasks" >
                 </ div >
             </ td >
         </ tr >
     </ table >
</ body >
</ html >