Json和Jsonp

時間 2019-11-29

原文原文鏈接

前言javascript

　　JSON和JSONP雖然只有一個字母的差異，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。html

什麼是Json?java

　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON採用web

徹底獨立於語言的文本格式，可是也使用了相似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成爲理想的數據交換語言。易於人ajax

閱讀和編寫，同時也易於機器解析和生成。json

　　JSON有兩種結構： json簡單說就是javascript中的對象和數組，因此這兩種結構就是對象和數組2種結構，經過這兩種結構能夠表示各類複雜的結構跨域

一、對象：對象在js中表示爲「{}」擴起來的內容，數據結構爲 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key爲對象的屬性，value爲對應的屬性值，因此很容易理解，取值方法爲對象.key 獲取屬性值，這個屬性值的類型能夠是數字、字符串、數組、對象幾種。數組

二、數組：數組在js中是中括號「[]」擴起來的內容，數據結構爲 ["java","javascript","vb",...]，取值方式和全部語言中同樣，使用索引獲取，字段值的類型能夠是數字、字符串、數組、對象幾種。通過對象、數組2種結構就能夠組合成複雜的數據結構了。服務器

JSON的格式或者叫規則：數據結構

　　JSON可以以很是簡單的方式來描述數據結構，XML能作的它都能作，所以在跨平臺方面二者徹底不分伯仲。一、JSON只有兩種數據類型描述符，大括號{}和方括號[]，其他英文冒號:是映射符，英文逗號,是分隔符，英文雙引號""是定義符。二、大括號{}用來描述一組「不一樣類型的無序鍵值對集合」（每一個鍵值對能夠理解爲OOP的屬性描述），方括號[]用來描述一組「相同類型的有序數據集合」（可對應OOP的數組）。三、上述兩種集合中如有多個子項，則經過英文逗號,進行分隔。四、鍵值對以英文冒號:進行分隔，而且建議鍵名都加上英文雙引號""，以便於不一樣語言的解析。五、JSON內部經常使用數據類型無非就是字符串、數字、布爾、日期、null 這麼幾個，字符串必須用雙引號引發來，其他的都不用，日期類型比較特殊，這裏就不展開講述了，只是建議若是客戶端沒有按日期排序功能需求的話，那麼把日期時間直接做爲字符串傳遞就好，能夠省去不少麻煩。

JSON實例

    // 描述一我的
    var Person = {
        "Name": "aehyok",
        "Age": 25,
        "Company": "aehyok",
        "Engineer": true
    }

    //獲取這我的的信息
    var PersonAge = Person.Age;
    alert(PersonAge);

    //描述幾我的
    var members = [
        {
            "Name": "aehyok",
            "Age": 25,
            "Company": "aehyok",
            "Engineer": true
        },
        {
            "Name": "lqm",
            "Age": 25,
            "Company": "Oracle",
            "Engineer": false
        },
        {
            "Name": "thl",
            "Age": 22,
            "Company": "Microsoft",
            "Engineer": false
        }
    ]

    // 讀取其中lqm的公司名稱
        var lqmCompany = members[1].Company;
        alert(lqmCompany);

    // 描述一次會議
    var conference = {
        "Conference": "Future Marketing",
        "Date": "2013-5-22",
        "Address": "ShenZhen",
        "Members":
        [
            {
                "Name": "aehyok",
                "Age": 25,
                "Company": "IBM",
                "Engineer": true
            },
            {
                "Name": "lqm",
                "Age": 25,
                "Company": "Oracle",
                "Engineer": false
            },
            {
                "Name": "Thl",
                "Age": 20,
                "Company": "Microsoft",
                "Engineer": false
            }
        ]
    }

        // 讀取參會者Thl是否工程師

        var ThlIsAnEngineer = conference.Members[2].Engineer;
        alert(ThlIsAnEngineer);

關於Json，就先到這裏。

http://www.cnblogs.com/aehyok/archive/2013/05/01/3052697.html

http://www.cnblogs.com/aehyok/archive/2013/05/18/3085499.html

能夠看看我以上兩篇文章，關於jQuery ajax提交Json數據，在Asp.Net Mvc中如何實現的。

什麼是Jsonp

一、一個衆所周知的問題，Ajax直接請求普通文件存在跨域無權限訪問的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一概不許；二、不過咱們又發現，Web頁面上調用js文件時則不受是否跨域的影響（不只如此，咱們還發現凡是擁有"src"這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>）；三、因而能夠判斷，當前階段若是想經過純web端（ActiveX控件、服務端代理、屬於將來的HTML5之Websocket等方式不算）跨域訪問數據就只有一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶端調用和進一步處理；四、恰巧咱們已經知道有一種叫作JSON的純字符數據格式能夠簡潔的描述複雜數據，更妙的是JSON還被js原生支持，因此在客戶端幾乎能夠爲所欲爲的處理這種格式的數據；五、這樣子解決方案就呼之欲出了，web客戶端經過與調用腳本如出一轍的方式，來調用跨域服務器上動態生成的js格式文件（通常以JSON爲後綴），顯而易見，服務器之因此要動態生成JSON文件，目的就在於把客戶端須要的數據裝入進去。六、客戶端在對JSON文件調用成功以後，也就得到了本身所需的數據，剩下的就是按照本身需求進行處理和展示了，這種獲取遠程數據的方式看起來很是像AJAX，但其實並不同。七、爲了便於客戶端使用數據，逐漸造成了一種非正式傳輸協議，人們把它稱做JSONP，該協議的一個要點就是容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了。若是對於callback參數如何使用還有些模糊的話，咱們後面會有具體的實例來說解。

Jsonp的客戶端具體實現：

1.先來個最簡單的一個。首先我在IIS中創建了兩個網站，固然端口一個是888另一個是8888，咱們就把888做爲本地服務器，8888做爲遠程服務器的。

如今本地有這樣一個網頁

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

其中JavaScript文件引用的是8888的remote.js文件。

alert('我是遠程文件');

運行本地服務器網站後效果爲

如今最簡單的跨域成功了。

2.咱們在1的基礎上進行修改一下，先看代碼

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

先將本地文件中添加一個js函數，而後調用遠程服務器的js文件。

aehyok({"result":"我是遠程js帶來的數據"});

這是在遠程服務端js文件中的代碼。運行後效果

調用成功。顯示本地函數被跨域的遠程js調用成功，而且還接收到了遠程js帶來的數據。很欣喜，跨域遠程獲取數據的目的基本實現了，可是又一個問題出現了，我怎麼讓遠程js知道它應該調用的本地函數叫什麼名字呢？畢竟是jsonp的服務者都要面對不少服務對象，而這些服務對象各自的本地函數都不相同啊？咱們接着往下看。

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "../Home/aehyok",
            dataType: "jsonp",
            jsonp: "callback", //傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
            jsonpCallback: "aehyok", //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
            success: function (json) {
                alert("第二次"+json.result);
            },
            error: function () {
                alert('fail');
            }
        });
    });


    function aehyok(data) {
        alert("第一次"+data.result);
    }
</script>

我是在asp.net mvc3.0項目中，因此後臺在控制器中

        public string aehyok()
        {
            return "aehyok({\"result\":\"我是遠程js帶來的數據\"})";
        }

而後執行結果爲

經過調試能夠發現URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641

callback=aehyok就是回調函數，在調用完後臺返回是先執行aehyok(data)。

而後又執行success(json)。因此有兩次的彈窗。

我如今只不過是在一個項目下進行，其實道理仍是同樣的。

總結

感受上很實用，但願之後能多多在項目中實踐呀。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。