詳解JSON和JSONP

JSON 介紹

廣饒網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

1、什么是 JSON？

> JSON 指的是 JavaScript 對象表示法 (JavaScript Object Notation)

> JSON 是一種輕量級的數(shù)據(jù)交換格式，比 XML 更小、更快、更易解析

> JSON 獨立于語言的文本格式

> JSON 易于人閱讀和編寫，同時也易于機器解析和生成

JSON 最初來自于 JavaScript，后來被所有的編程語言支持，成為了一種通用的字符串?dāng)?shù)據(jù)格式。

2、JSON 字符串的格式

2-1、“名稱/值”對的集合，一般理解為對象。例如：

'{"uid":101, "uname":"Roger", "isMarried":true}'

2-2、值的有序列表，一般理解為數(shù)組。例如：

'[10,20,true,"Roger",{},[] ]'

JSON 格式示例如下：

示例一：

{
    "web":[
        {"name":"HTML5.0","fullName":"HyperText Markup Language"},
        {"name":"CSS3.0","fullName":"Cascading StyleSheets"},
        {"name":"JSON","fullName":"JavaScript Object Notation"}
    ]
}

{
  "Array": [
    1,
    2,
    3
  ],
  "Boolean": true,
  "Null": null,
  "Number": 123,
  "Object": {
    "a": "b",
    "c": "d"
  },
  "String": "Hello World"
}

示例二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h3>了解JSON對象</h3>

用戶名：<span id="uname"></span><br>
年  齡：<span id="uage"></span><br>
博  客：<span id="blog"></span><br>

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    var jsonObject= {
        "name":"Roger",
        "age":26,
        "blog":"http://dapengtalk.blog.51cto.com/"
    };
    $('#uname').html(jsonObject.name);
    $('#uage').html(jsonObject.age);
    $('#blog').html(jsonObject.blog);

    
</script>

</body>
</html>

詳解 JSON 和 JSONP

3、JSON 具有以下這些形式

3-1、JSON 字符串要么是一個{ }，要么是一個 [ ]

詳解 JSON 和 JSONP

3-2、JSON 中所有的 string 必須使用 "", 包括 key。使用反斜線轉(zhuǎn)義，如：\", \\, \b

詳解 JSON 和 JSONP

3-3、JSON 對象的 value 只能是 string、number、object、array、true、false、null，不存在 Date 等類型

詳解 JSON 和 JSONP

4、JS 與 JSON 互轉(zhuǎn)

JSON 字符串 => JS 對象/數(shù)組： var obj = JSON.parse( str );

JS 對象/數(shù)組 => JSON 字符串： var str = JSON.stringify( obj );

示例代碼一：(JSON 轉(zhuǎn) JS 對象)

var str = '{"name":"Roger", "age":26}';
var obj = JSON.parse( str);
console.log(obj);

結(jié)果：

詳解 JSON 和 JSONP

示例代碼二：（JS 轉(zhuǎn) JSON 字符串）

var jsObj = new Object( );
jsObj.car = "BMW";
jsObj.color = "black";
jsObj.price = 300,000;
var jsonStr = JSON.stringify( jsObj );
console.log(jsonStr);

結(jié)果：

詳解 JSON 和 JSONP

5、PHP 與 JSON 互轉(zhuǎn)

PHP 數(shù)組 => JSON 字符串：$str = json_encode( $arr );

JSON 字符串 => PHP數(shù)組： $arr = json_decode( $str );

示例代碼一：（PHP數(shù)組轉(zhuǎn) JSON字符串）

<?php
header('Content-Type: application/json');

$arr = array('a'=>'apple', 'b'=>'banana', 'c'=>'cherry', 'd'=>'duria');

$str = json_encode( $arr );

echo ($str);

結(jié)果：

詳解 JSON 和 JSONP

示例代碼二：（JSON字符串轉(zhuǎn) PHP數(shù)組）

<?php
header('Content-Type: application/json');

$str = '{"a":"apple","b":"banana","c":"cherry","d":"duria"}';

var_dump( json_decode( $str) );

結(jié)果：

詳解 JSON 和 JSONP

JSONP 介紹

1、什么是 JSONP?

JSON with Padding：填充式 JSON，是 JSON 的一種“使用模式”，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。

我們知道 img、a、link 和 script 都是允許跨域的，JSONP的原理就是利用了這一點

2、JSONP的原理

在客戶端動態(tài)的創(chuàng)建一個 script 標(biāo)簽，代替 XHR 對象，指定 script.src 向

我們可以模擬一下前面的文字描述

新建一個HTML 頁面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">發(fā)起跨域請求</button>


<script>
    //回調(diào)函數(shù)
    function doResponse(obj){
        console.log(obj.uname + obj.age);
    };
    var btn = document.getElementById('btn');

    //點擊按鈕發(fā)起跨域請求
    btn.onclick = function(){
        //動態(tài)創(chuàng)建一個 script 標(biāo)簽
        var s = document.createElement('script');

        //指定一個 script.src 向服務(wù)器發(fā)起請求
        s.src = "http://127.0.0.1:8081/Ajax/4.php?callback=doResponse";
        document.body.appendChild(s);
    };

</script>
</body>
</html>

新建一個PHP頁面

<?php
sleep(10); //延時10s，方便看到效果

header('Content-Type: application/javascript'); //MIME類型設(shè)置成 javascript，因為src只接受js，
//所以最終要把回調(diào)函數(shù)變成（或者說回調(diào)函數(shù)返回一個）JSON對象


$cb = $_REQUEST['callback'];

$data = ['uname'=>'Tom','age'=>20];

$json =  json_encode($data);  //返回一個JSON數(shù)據(jù)  '{"":"","":20}'

echo $cb.'('.$json.')';  //把JSON數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)

看一眼這個PHP頁面返回的內(nèi)容，記住要在域名后面加一個callback 參數(shù)

點擊按鈕以后，控制臺可以看到，動態(tài)生成了一個 script 標(biāo)簽

打開 Network，可以看到這個實際發(fā)起的是一個 script 請求，而且響應(yīng)消息是一段 JSON字符串

響應(yīng)消息

查看輸出內(nèi)容，成功拿到了數(shù)據(jù)

3、jQuery 封裝的 JSONP

$.getJSON('http://其它域名/xx.php?callback=?', fn)

HTML頁面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button id="btn">跨域請求按鈕</button>

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script>
    function doResponse(obj){
        console.log(obj.uname + obj.age);
    };

    $('#btn').click(function(){
        $.getJSON('http://127.0.0.1:8081/Ajax/4.php?callback=?',doResponse);
    });

</script>
</body>
</html>

點擊按鈕，發(fā)起跨域請求，成功的拿到了響應(yīng)數(shù)據(jù)

$.ajax({

url: ' http://其它域名/xx.php',

dataType: 'jsonp',

success: fn

});

HTML 頁面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button id="btn">跨域請求按鈕</button>

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script>
    function doResponse(obj){
        console.log(obj.uname + obj.age);
    };

    $('#btn').click(function(){
        $.ajax({
            url:'http://127.0.0.1:8081/Ajax/4.php',
            dataType:'jsonp',
            success:doResponse
        })
    });

</script>
</body>
</html>

同樣也成功拿到了數(shù)據(jù)，效果截圖同上

文章名稱：詳解JSON和JSONP
網(wǎng)頁鏈接：http://muchs.cn/article28/ijogjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、App設(shè)計、網(wǎng)站設(shè)計公司、域名注冊、虛擬主機、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容