<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,看看,數據都顯示出來了吧,呵呵!!!




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

    posted on 2008-08-26 02:57 憶風 閱讀(310) 評論(0)  編輯  收藏 所屬分類: Ajax
    主站蜘蛛池模板: 亚洲中文字幕丝袜制服一区| 99热亚洲色精品国产88| 免费看片A级毛片免费看| 国产高潮久久免费观看| 亚洲精品无码久久久久牙蜜区| 亚洲精品无码精品mV在线观看| 精品免费久久久久久成人影院| 91成人在线免费视频| 午夜无遮挡羞羞漫画免费| 日韩电影免费观看| 四虎精品免费永久免费视频| 国产在线观看免费视频播放器| 91免费在线播放| 永久在线观看免费视频| 美女被艹免费视频| 亚洲欧洲免费无码| 亚洲毛片免费观看| 亚洲最大的成网4438| 亚洲精品美女久久777777| 亚洲天堂中文字幕在线| 日本一区免费电影| 免费无码又爽又高潮视频| 99久久这里只精品国产免费| 2019中文字幕在线电影免费| 暖暖日本免费中文字幕| 你是我的城池营垒免费看 | 亚洲精品无码专区在线| 亚洲香蕉久久一区二区| 亚洲大片免费观看| 亚洲手机中文字幕| 亚洲毛片基地日韩毛片基地| 亚洲成人免费网址| 亚洲w码欧洲s码免费| 亚洲不卡在线观看| 亚洲最大的黄色网| 狠狠色伊人亚洲综合网站色| 亚洲国产日韩精品| 亚洲AV永久无码天堂影院| 国产综合激情在线亚洲第一页| 无码天堂亚洲国产AV| 色窝窝亚洲AV网在线观看|