Ajax使用JSON數據格式案例

字號:


    JSON是一種簡單的數據格式,比xml更輕巧。其規(guī)則很簡單,對象是一個無序的名稱/值對集合,下面有個案例,大家可以感受下
    1:
    JSON(JavaScriptObject Notation)一種簡單的數據格式,比xml更輕巧。JSON是JavaScript原生格式,這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
    JSON的規(guī)則很簡單:對象是一個無序的“‘名稱/值'對”集合。一個對象以“{”(左括號)開始,“}”(右括號)結束。每個“名稱”后跟一個“:”(冒號);“‘名稱/值'對”之間使用“,”(逗號)分隔。
    JSON用冒號(而不是等號)來賦值。每一條賦值語句用逗號分開。整個對象用大括號封裝起來??捎么罄ㄌ柗旨壡短讛祿?BR>    對象描述中存儲的數據可以是字符串,數字或者布爾值。對象描述也可存儲函數,那就是對象的方法。
    <span>{"person": {
    "name":"Andy Budd",
    "website":"http://andybudd.com/",
    "email":"andy@clearleft.com"
    }
    }</span>
    JSON 只是一種文本字符串。它被存儲在responseText 屬性中
    為了讀取存儲在 responseText 屬性中的JSON 數據,需要根據JavaScript 的eval語句。函數 eval會把一個字符串當作它的參數。然后這個字符串會被當作 JavaScript 代碼來執(zhí)行。因為 JSON 的字符串就是由 JavaScript 代碼構成的,所以它本身是可執(zhí)行的
    2:案例
    <%@ page language=
    "java"
    pageEncoding=
    "UTF-8"
    %> 
    <%@ page language=
    "java"
    pageEncoding=
    "UTF-8"
    %> 
    02
    <html xmlns=
    "http://www.w3.org/1999/xhtml"
    xml:lang=
    "en"
    lang=
    "en"
    > 
    03
    <head> 
    04
    <meta http-equiv=
    "content-type"
    content=
    "text/html; charset=utf-8"
    /> 
    05
    <title>People at Clearleft</title> 
    06
    <style type=
    "text/css"
    > 
    07
    @import
    url(
    "clearleft.css"
    ); 
    08
    </style> 
    09
    <script type=
    "text/javascript"
    > 
    10
    window.onload=function(){ 
    11
    var aNodes=document.getElementsByTagName(
    "a"
    ); 
    12
    13
    for
    (var i =
    0
    ;i < aNodes.length; i++){ 
    14
    15
    aNodes[i].onclick=function(){ 
    16
    var request=
    new
    XMLHttpRequest(); 
    17
    var url=
    this
    .href; 
    18
    var method=
    "GET"
    ; 
    19
    request.open(method,url); 
    20
    request.send(
    null
    ); 
    21
    request.onreadystatechange=function(){ 
    22
    if
    (request.readyState==
    4
    ){ 
    23
    if
    (request.status==
    200
    ||request==
    304
    ){ 
    24
    var result=request.responseText;
    //json被存儲在responseText屬性中 
    25
    var object=eval(
    "("
    +result+
    ")"
    );
    //讀取responseText中的json數據 
    26
    var name= object.person.name;
    //讀取json對象中存儲的數據 
    27
    var website= object.person.website; 
    28
    var email= object.person.email; 
    29
    var aNode=document.createElement(
    "a"
    ); 
    30
    aNode.appendChild(document.createTextNode(name+
    ":"
    +
    "email"
    +
    ":"
    +website)); 
    31
    aNode.href=
    "mailTo"
    +
    "email"
    +
    ",website"
    ; 
    32
    var h2Node=document.createElement(
    "h2"
    ); 
    33
    h2Node.appendChild(aNode); 
    34
    var dtails=document.getElementById(
    "details"
    ); 
    35
    details.innerHTML=
    ""
    ;
    //防止重復的添加字符串 
    36
    dtails.appendChild(h2Node); 
    37
    } 
    38
    } 
    39
    } 
    40
    return
    false
    ; 
    41
    } 
    42
    } 
    43
    }; 
    44
    </script> 
    45
    </head> 
    46
    <body> 
    47
    <h1> 
    48
    People 
    49
    </h1> 
    50
    <ul> 
    51
    <li> 
    52
    <a href=
    "files/andy.js"
    >Andy</a> 
    53
    </li> 
    54
    <li> 
    55
    <a href=
    "files/richard.js"
    >Richard</a> 
    56
    </li> 
    57
    <li> 
    58
    <a href=
    "files/jeremy.js"
    >Jeremy</a> 
    59
    </li> 
    60
    </ul> 
    61
    <div id=
    "details"
    ></div> 
    62
    </body> 
    63
    </html>