JSON与JSONP的区别，有百度提示的例子哟~~

最新推荐文章于 2021-04-02 11:44:08 发布

二哈汪汪叫

最新推荐文章于 2021-04-02 11:44:08 发布

阅读量201

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/wei1273356078/article/details/106546582

版权

这两个长的差不多，但是用起来就不一样了。。

JSON 数据格式

JSON是一种数据交换格式，用来存储和表示数据的。看下面的json格式的数据

// 必须是双引号，中间使用逗号隔开，两边使用大括号包裹，这只是一种格式，还有数组格式
{"name":"张三","age":18,"sex":"boy"}

JSON与js的关系

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
看例子：

// 这是一个对象，注意键名也是可以使用引号包裹的
var obj = {a: 'Hello', b: 'World'}; 
// 这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}';

JSON 和 JS 对象互转

从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
// 结果是 obj = {a: 'Hello', b: 'World'}

从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
// 结果是 json = '{"a": "Hello", "b": "World"}'

如果想要了解更多可以看百度百科

JSONP 跨域技术

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

什么是同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
看概念确实有点不好理解，我大概的说下吧
同源就是必须满足3个相同：协议相同、域名相同、端口相同
例如：
http://www.lisi.com:80/dir/server/ceshi.html与下面比
http://www.lisi.com/ceshi/ceshi.php 同源
http://www.zhangsan.com:80/dir/h.html 不同源域名不同
http://www.lisi.com:81/ceshi/cs.php 不同源端口不同
https://www.lisi.com/dir/ceshi.html 不同源协议不同

什么是跨域

简单的理解下，就是想要的数据不在自己的服务器中，需要从别人的服务器中获取数据，这就是跨域。
跨域的本质：服务器返回了一个方法调用，这个方法是事先定义好的，而方法中的参数就是我们需要的数据。
跨域的实现：因为script标签不受同源策略的影响，所以使用script标签的src属性引入一个外部文件。
做一个简单的跨域实现的例子：
下面是一个百度提示词接口文档
地址 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
作用描述 获取百度提示词
请求类型 Get
参数 Wd:关键字 cb:回调函数名称
返回数据格式 Jsonp格式
全部代码，最后有效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度提示词</title>
</head>

<body>
    <input type="text" id="keyWord">
    <input type="button" id="btn" value="百度一下">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script>
    var btn = document.querySelector('#btn');
    var head = document.querySelector('head');
    var ul = document.querySelector('ul');
    var keyWordValue1 = document.getElementById('keyWord');
    btn.onclick = function () {
        var keyWordValue = keyWordValue1.value;
        //创建动态script标签
        var script = document.createElement('script');
        //给script标签添加src属性值
        script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=j&wd="+keyWordValue;
        //把script标签添加到head标签中
        head.appendChild(script);
    }
    // 将获取的数据展示在页面
    function j(data) {
        console.log(data);
        var liTag = '';
        for(var i=0;i<data.s.length;i++){
            var temp = data.s[i];
            liTag += '<li>'+temp+'</li>';
        }
        ul.innerHTML = liTag;
    }
</script>

</html>

效果图

在这里插入图片描述

希望对小伙伴们有所帮助

二哈汪汪叫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON与JSONP的区别，有百度提示的例子哟~~

这两个长的差不多，但是用起来就不一样了。。JSON 数据格式JSON是一种数据交换格式，用来存储和表示数据的。看下面的json格式的数据// 必须是双引号，中间使用逗号隔开，两边使用大括号包裹，这只是一种格式，还有数组格式{"name":"张三","age":18,"sex":"boy"} JSON与js的关系JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。看例子：// 这是一个对象，注意键名也是可以使用引号包裹的var obj = {a:
复制链接

扫一扫