开发者社区> 技术小胖子> 正文

Jquery ajax实现跨域请求之json与jsonp本质区别

简介:
+关注继续查看

JSON 介绍


1、什么是 JSON?

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

> JSON 是一种轻量级的数据交换格式,比 XML 更小、更快、更易解析

> JSON 独立于语言的文本格式

> JSON 易于人阅读和编写,同时也易于机器解析和生成


JSON 最初来自于 JavaScript,后来被所有的编程语言支持,成为了一种通用的字符串数据格式。


2、JSON 字符串的格式

2-1、“名称/值”对的集合,一般理解为对象。例如:

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


2-2、值的有序列表,一般理解为数组。例如:

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


JSON 格式示例如下:

示例一:

1
2
3
4
5
6
7
{
    "web":[
        {"name":"HTML5.0","fullName":"HyperText Markup Language"},
        {"name":"CSS3.0","fullName":"Cascading StyleSheets"},
        {"name":"JSON","fullName":"JavaScript Object Notation"}
    ]
}

示例二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>了解JSON对象</h2>
  
用户名:<span id="uname"></span><br>
年  龄:<span id="uage"></span><br>
博  客:<span id="blog"></span><br>
  
<script src="//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>

wKioL1g8-FbwIvNdAAAUrxvze64168.png


3、JSON 具有以下这些形式

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


wKioL1g8-oTTOR8rAAAgNJhpkvc739.png

wKiom1g8-pWTmcCTAAAaBiLpE2M063.png


3-2、JSON 中所有的 string 必须使用 "", 包括 key。使用反斜线转义,如:\", \\, \b


wKioL1g8-0XDimjOAACLGnu8jxc874.png


3-3、JSON 对象的 value 只能是 string、number、object、array、true、false、null,不存在 Date 等类型

wKioL1g8-rWxuzLrAAA28X_7d_s534.png


4、JS 与 JSON 互转

    JSON 字符串  => JS 对象/数组:  var obj = JSON.parse( str );

    JS 对象/数组  => JSON 字符串:  var str = JSON.stringify( obj );


示例代码一:(JSON 转 JS 对象)

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


结果:

wKioL1g9DZvDtSlQAAAqSJYou2g033.png


示例代码二:(JS 转 JSON 字符串)

1
2
3
4
5
6
var jsObj = new Object( );
jsObj.car = "BMW";
jsObj.color = "black";
jsObj.price = 300,000;
var jsonStr = JSON.stringify( jsObj );
console.log(jsonStr);


结果:

wKiom1g9D3ayJIY3AAAapxGvn_4585.png


5、PHP 与 JSON 互转

    PHP 数组  => JSON 字符串:$str = json_encode( $arr );

    JSON 字符串  => PHP数组: $arr = json_decode( $str );


示例代码一:(PHP数组 转 JSON字符串)

1
2
3
4
5
6
7
8
<?php
header('Content-Type: application/json');
  
$arr = array('a'=>'apple', 'b'=>'banana', 'c'=>'cherry', 'd'=>'duria');
  
$str = json_encode( $arr );
  
echo ($str);


结果:

wKiom1g9EwSSGl8hAAAi7cJY6PI420.png


示例代码二:(JSON字符串 转 PHP数组)

1

2

3

4

5

6

<?php

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

 

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

 

var_dump( json_decode( $str) );

结果:

wKiom1g9FGqzNFw_AAAp96_jlvc734.png

JSONP 介绍


1、什么是 JSONP?

JSON with Padding填充式 JSON,是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据


我们知道 img、a、link 和 script 都是允许跨域的,JSONP的原理就是利用了这一点


2、JSONP的原理

在客户端动态的创建一个 script 标签,代替 XHR 对象,指定 script.src 向服务器发起请求,请求的PHP页面除了返回需要的数据外,还需要填充一个指定的函数名。


1

2

3

header('Content-Type: application/javascript');

$json = json_encode($data);

echo $cb '(' $json ')';

我们可以模拟一下前面的文字描述


  • 新建一个HTML 页面

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<button id="btn">发起跨域请求</button>

 

<script>

    //回调函数

    function doResponse(obj){

        console.log(obj.uname + obj.age);

    };

    var btn = document.getElementById('btn');

 

    //点击按钮发起跨域请求

    btn.onclick = function(){

        //动态创建一个 script 标签

        var s = document.createElement('script');

 

        //指定一个 script.src 向服务器发起请求

        s.src = "http://127.0.0.1:8081/Ajax/4.php?callback=doResponse";

        document.body.appendChild(s);

    };

 

</script>

</body>

</html>

  • 新建一个PHP页面

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
sleep(10); //延时10s,方便看到效果
  
header('Content-Type: application/javascript'); //MIME类型设置成 javascript,因为src只接受js,
//所以最终要把回调函数变成(或者说回调函数返回一个)JSON对象
  
$cb $_REQUEST['callback'];
  
$data = ['uname'=>'Tom','age'=>20];
  
$json =  json_encode($data);  //返回一个JSON数据  '{"":"","":20}'
  
echo $cb.'('.$json.')';  //把JSON数据作为回调函数的参数

看一眼这个PHP页面返回的内容,记住要在域名后面加一个callback 参数

wKiom1g-gFaQ852CAAAuQ5EwOhQ947.png


点击按钮以后,控制台可以看到,动态生成了一个 script 标签

wKiom1g-fbfQ_O_nAABXWooP5mg543.png


打开 Network,可以看到这个实际发起的是一个 script 请求,而且响应消息是一段 JSON字符串

wKiom1g-fzPSTVLdAABvWVItTs0819.png

响应消息

wKiom1g-f1CzRecSAABjR1Pm69s835.png


查看输出内容,成功拿到了数据

wKioL1g-f3ewiUBVAAAVqqDQ9QQ337.png

3、jQuery 封装的 JSONP


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


HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>

点击按钮,发起跨域请求,成功的拿到了响应数据

wKiom1g-g5DS9XXOAAA8WNV7Mjc257.png



HTML 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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>

同样也成功拿到了数据,效果截图同上

wKiom1g-hK_y2OqKAABvSr1lTfs236.png

wKioL1g-hL3BTKrbAABUf-6WpJM781.png




      本文转自asd1123509133 51CTO博客,原文链接:http://blog.51cto.com/lisea/1878395,如需转载请自行联系原作者





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析
29 0
ajax json list spring mvc接收
ajax json list spring mvc接收
18 0
jquery ajax 和servlet json 结合的简单小例子
jquery ajax 和servlet json 结合的简单小例子
38 0
JSON&Ajax(语法格式+解析json)
导读模块:发展史: 21世纪初,Douglas Crockford寻找一种简便的数据交换格式, 能够在服务器之间交换数据。当时通用的数据交换语言是XML, 但是Douglas Crockford觉得XML的生成和解析都太麻烦, 所以他提出了一种简化格式,也就是Json。
32 0
ajax前端传多维数组到php后台,关联数组转json到后台方法
ajax前端传多维数组到php后台,关联数组转json到后台方法
20 0
Springboot接收ajax提交JSON数组
Springboot接收ajax提交JSON数组
161 0
Ajax传递json数据
Ajax传递json数据
83 0
Ajax&Json 1|学习笔记
快速学习Ajax&Json 1
66 0
Ajax&JSON 4|学习笔记
快速学习Ajax&JSON 4
51 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的对象
立即下载
Javascript中的函数
立即下载
JavaScript函数
立即下载