<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆-84  評論-56  文章-0  trackbacks-0
     

    AJAX JSON 發送請求數據

    Ø 使用XML 向服務器發送復雜的數據結構,

    Ø 通過串連接來創建XML 串并不好,

    Ø 這也不是用來生成或修改XML 數據結構的健壯技術。

    Ø JSQN 概述

     * JSON XML 的一個替代方法,可以在www.Json.org 找到。

     * JSON 是一種文本格式,它獨立于具體語言,

     * 使用了與C 系列語言(C C# 、JavaScript )類似的約定。

     * JSON建立在以下 兩種數據結構基礎上,當前幾乎所有編程語言都支持這兩種數據結構。

    兩種數據結構

    Ø /值對集合。

     * 不同的語言中,它被理解為對象(object),紀錄 record),結構(struct),字典(dictionary),哈希表(hash table),有鍵列表(keyed list),或者關聯數組 associative array)。


         

    Ø  值的有序表。

     * 這通常實現為一個數組。

    JSON的數據結構

    Ø JSON對象

     *  對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”(左括號)開始,“}”(右括號)結束。每個“名稱”后跟一個“:”(冒號);“‘名稱/值’ 對”之間使用“,”(逗號)分隔。



        

    Ø JSON數組

        * 數組是值(value)的有序集合。一個數組以“[”(左中括號)開始,“]”(右中括號)結束。值之間使用“,”(逗號)分隔。




    Ø 

        * 值(value)可以是雙引號括起來的字符串(string)、數值(number)、truefalse、 null、對象(object)或者數組(array)。這些結構可以嵌套。



    Ø 字符串(string

    字符串(string)是由雙引號包圍的任意數量Unicode字符的集合,使用反斜線轉義。一個字符(character)即一個單獨的字符串(character string)。

    字符串(string)與C或者Java的字符串非常相似。




    Ø 數值(number

        * 數值(number)也與C或者Java的數值非常相似。除去未曾使用的八進制與十六進制格式。除去一些編碼細節。



    Ø 空白可以加入到任何符號之間。 以下描述了完整的語言。

    Ø http://www.json.org/能得到JSON

    DEMO JSON對象

    Ø 我們可以以Employee對象的簡單的例子展開進行。

    Ø Employee對象可能包含姓、名、員工號和職位等數據。

    Ø 使用JSON,可以如下表示Employee對象實例:

    var employee = {

     “firstName”:”Zhou”,

     “lastName”:”DaQing”,

     “employeeNumber”:517,

     “title”:”Accountant”

    }

    Ø 然后可以使用標準點記法使用對象的屬性,如下所示:

    var lastName = employee.lastName;

    var title = employee.title;

    employee.employee = 517;

    JSONXML

    Ø JSON 是一個輕量級的數據互換格式。

    Ø 如果用 XML 來描述同樣的employee對象,可能如下所示:

    <employee>

        <firstName>Zhou</firstName>

        <lastName>DaQing</lastName>

        <employeeNumbe>517</employeeNumbe>

        <title>Accountant</title>

    </employee >

    Ø 顯然,JSON編碼比XML 編碼簡短。

    Ø 如果在網絡上發送大量數據,可能會帶來顯著的性能差異。

    Ø www.Json.org 網站列出了至少與其他編程語言的14種綁定

    Ø 這說明,不論在服務器端使用何種技術,都能通過JSON與瀏覽器通信。

    JSON

    Ø 因為這些結構得到了如此眾多編程語言的支持,所以JSON 可以作為異構系統之間的一種數據互換格式。

    Ø 另外,由于JSON 是基于標準JavaScript 的子集,所以在所有當前Web 瀏覽器上都應該是兼容的。

    DEMO AJAX JSON 發送請求數據

    Ø DEMO

     * 使用JSON JavaScript 對象轉換為串格式,

     * Ajax 將這個串發送到服務器,

     * 服務器根據這個串創建一個對象.

    Ø 撰寫“jsonExample.html”,如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

            "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

     <title>JSON Example</title>

       <script type="text/javascript" src="/js/json2.js"></script>

        <script type="text/javascript">

            var xmlHttp;

                   function createXMLHttpRequest() {

                       if (window.ActiveXObject) {

                           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

                       } else if (window.XMLHttpRequest) {

                           xmlHttp = new XMLHttpRequest();

                       }

                   }

             function doJSON() {

                 var car = getCarObject();

                 var carAsJSON = JSON.stringify(car);

                 alert("Car object as JSON:"n" + carAsJSON);

                 var url = "JSONExample?timeStamp=" + new Date().getTime();

                 createXMLHttpRequest();

                 xmlHttp.open("POST", url, true);

                 xmlHttp.onreadystatechange = handleStateChange;

                 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                 xmlHttp.send(carAsJSON);

             }

            function handleStateChange() {

                if (xmlHttp.readyState == 4) {

                    if (xmlHttp.status == 200) {

                        parseResults();

                    }

                }

            }

            function parseResults() {

                var responseDiv = document.getElementById("serverResponse");

                if(responseDiv.hasChildNodes()) {

                    responseDiv.removeChild(responseDiv.childNodes[0]);

                }

                var responseText = document.createTextNode(xmlHttp.responseText);

                responseDiv.appendChild(responseText);

            }

            function getCarObject() {

                return new Car("Dodge","Coronet R/T",1989,"pink");

            }

            function Car(make, model, year, color) {

                this.make = make;

                this.model = model;

                this.year = year;

                this.color = color;

            }

        </script>

    </head>

    <body>

       <br/><br/>

    <form action="#">

        <input type="button" value="Click here to send JSON data to the server" onblur="doJSON();"/>

    </form>

       <h2>Server Response:</h2>

    <div id="serverResponse"></div>

    </body>

    </html>

    DEMO 服務器端接收JSON數據

    Ø 然后撰寫“JSONExample.java”文件,內容如下:

    package org.yifeng.webapp.servlet;

    import org.json.JSONObject;

    import org.json.JSONException;

    import javax.servlet.http.HttpServlet;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import javax.servlet.ServletException;

    import java.io.IOException;

    import java.io.BufferedReader;

    import java.text.ParseException;

    /**

     * Copyright:       晟軟科技

     * WebSit:          http://www.shengruan.com

     * Author:          憶風

     * QQ:              583305005

     * MSN:             YiFengs@msn.com

     * Email:           zhdqCN@gmail.com

     * CreationTime:    2008-8-26 0:49:12

     * Description:

     */

    public class JSONExample extends HttpServlet {

        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            String json = readJSONStringFromRequestBody(request);

            //返回輸出結果

            String responseText = null;

            //使用JSON綁字Ajax對象

            JSONObject jsonObject = null;

            try {

                jsonObject = new JSONObject(json);

                responseText = "You have a " + jsonObject.getInt("year") + " "

                        + jsonObject.getString("make") + " " + jsonObject.getString("model")

                        + " " + " that is " + jsonObject.getString("color") + " in color.";

            } catch (JSONException e) {

                e.printStackTrace(); 

            }

            response.setContentType("text/xml");

            response.getWriter().print(responseText);

        }

        private String readJSONStringFromRequestBody(HttpServletRequest request) {

            StringBuilder json = new StringBuilder();

            String line = null;

            try {

                BufferedReader reader = request.getReader();

                while ((line = reader.readLine()) != null) {

                    json.append(line);

                }

            } catch (IOException e) {

                System.out.println("Error reading JSON stirng: " + e.toString());

            }

            return json.toString();

        }

        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            doPost(request, response);

        }

    }

    Ø 點擊按鈕,顯示如下:

    OK,看看,數據都顯示出來了吧,呵呵?。。?br />



    作者:周大慶(zhoudaqing)
    網址:http://m.tkk7.com/yifeng
    >>>轉載請注明出處!<<<

    posted on 2008-08-26 02:57 憶風 閱讀(298) 評論(0)  編輯  收藏 所屬分類: Ajax
    主站蜘蛛池模板: 91丁香亚洲综合社区| 深夜免费在线视频| 青青青国产色视频在线观看国产亚洲欧洲国产综合 | 成年免费a级毛片| 亚洲va无码专区国产乱码| 亚洲精品视频免费在线观看| 精品国产日韩亚洲一区91 | 免费的黄色的网站| 久久亚洲日韩看片无码| 色吊丝永久在线观看最新免费| 黄色视频在线免费观看| 亚洲人配人种jizz| 精品国产综合成人亚洲区| 男男AV纯肉无码免费播放无码| 大妹子影视剧在线观看全集免费| www.亚洲日本| 亚洲Av无码精品色午夜| 国产网站免费观看| 国产a视频精品免费观看| 一区二区3区免费视频| 亚洲1区1区3区4区产品乱码芒果 | 久久久久亚洲av无码专区导航 | 性一交一乱一视频免费看| a级毛片免费全部播放无码| 亚洲乱码日产精品一二三| 亚洲韩国精品无码一区二区三区 | 亚洲婷婷天堂在线综合| 久久久久亚洲AV无码专区桃色| 999国内精品永久免费视频| 两个人看的www高清免费观看| 亚洲另类无码专区丝袜| 亚洲成人激情在线| 亚洲国产成人久久综合碰| 妞干网免费视频观看| 波多野结衣免费在线观看| 99久久免费国产特黄| 一级特黄aaa大片免费看| 亚洲AV无码专区亚洲AV桃| 亚洲一区二区三区深夜天堂| 久久精品亚洲综合| 亚洲美女又黄又爽在线观看|