json与jsonp的使用

更新日期: 2019-11-25阅读: 1.7k标签: json

1.json与jsonp的引入
在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。
备注:跨域也可以通过服务器端代理来解决;
理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

2.JSON:是一种基于文本的数据交换方式,或者叫做数据描述格式,是否该选用它首先肯定要关注它所拥有的优点。 
JSON的优点:
    1) 基于纯文本,跨平台传递极其简单;
    2) Javascript原生支持,后台语言几乎全部支持;
    3) 轻量级数据格式,占用字符数量极少,特别适合互联网传递;
    4) 可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;
    5) 容易编写和解析,当然前提是你要知道数据结构;

    JSON的格式或者叫规则:
    JSON能够以非常简单的方式来描述数据结构,XML能做的它都能做,因此在跨平台方面两者完全不分伯仲。
    1) JSON只有两种数据类型描述符,大括号{}和方括号[],其余英文冒号:是映射符,英文逗号,是分隔符,英文双引号""是定义符。
    2) 大括号{}用来描述一组“不同类型的无序键值对集合”(每个键值对可以理解为OOP的属性描述),方括号[]用来描述一组“相同类型的有序数据集合”(可对应OOP的数组)。
    3) 上述两种集合中若有多个子项,则通过英文逗号,进行分隔。
    4) 键值对以英文冒号:进行分隔,并且建议键名都加上英文双引号"",以便于不同语言的解析。
    5) JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null 这么几个,字符串必须用双引号引起来,其余的都不用,日期类型比较特殊,这里就不展开讲述了,只是建议如果客户端没有按日期排序功能需求的话,那么把日期时间直接作为字符串传递就好,可以省去很多麻烦。
示列1:{} 用来描述一组“不同类型的无序键值对集合”

var person = {
            "Name": "Bob",
            "Age": 32,
            "Company": "IBM",
            "Engineer": true
 }

示列2:[] 用来描述一组“相同类型的有序数据集合”

var members = [
            {
                "Name": "Bob",
                "Age": 32,
                "Company": "IBM",
                "Engineer": true
            },
            {
                "Name": "John",
                "Age": 20,
                "Company": "Oracle",
                "Engineer": false
            },
            {
                "Name": "Henry",
                "Age": 45,
                "Company": "Microsoft",
                "Engineer": false
            }
        ]
        //读取其中John的公司名称
        var johnsCompany = members[1].Company;

示列3:{}中包含的[]使用

var conference = {
            "Conference": "Future Marketing",
            "Date": "2012-6-1",
            "Address": "Beijing",
            "Members":
            [
                {
                    "Name": "Bob",
                    "Age": 32,
                    "Company": "IBM",
                    "Engineer": true
                },
                {
                    "Name": "John",
                    "Age": 20,
                    "Company": "Oracle",
                    "Engineer": false
                },
                {
                    "Name": "Henry",
                    "Age": 45,
                    "Company": "Microsoft",
                    "Engineer": false
                }
            ]
        }
     
        // 读取参会者Henry是否工程师
        var henryIsAnEngineer = conference.Members[2].Engineer;


    
3.什么是JSONP
JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 html 的 <script> 元素是一个例外。利用<script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
3.1 JSOPN跨域的原理:script标签的src属性,支持跨域;它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
3.2 JSOP包含两部分:回调函数和数据,回调函数是在响应到来时应该调用的函数,一般通过查询字符串添加; 数据就是传入回调函数中的JSON数据,确切的说,是一个JSON对象,可以直接访问。
3.3 JSONP的缺点:
        1) 只能实现GET,没有POST;
        2) 从其他域中加载的代码可能不安全;难以确定JSONP请求是否失败(XHR有error事件),常见做法是使用定时器指定响应的允许时间,超出时间认为响应失败。
为了方便客户端使用数据逐渐形成非正式传输协议jsonp该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据
        
示列:

function ajaxFun(){
            var strUrl="http://www.b.com/demo/json.txt";
             $.ajax({ 
                type:"get",
                url:strUrl, 
                dataType: ‘jsonp‘,
                jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                jsonpCallback: "flightHandler",//自定义的jsonp回调函数名称,默认为jquery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                success: function(data){ 
                    alert(‘您查到的信息:票价‘ + data.price + ‘元,余-票‘ + data.tickets + ‘张。‘);
                },
                error: function(XMLHttpRequest,textStatus,errorThrown){
                    alert("error");
                    // 状态码
                    console.log(XMLHttpRequest.status);
                    // 状态
                    console.log(XMLHttpRequest.readyState);
                    // 错误信息   
                    console.log(textStatus);
                 }
            }); 
        }

 备注:其中  sucess中的代码片段也可以不写,可以单独建立一个回调函数来调用返回的数据。如下一样可以获得数据。

var flightHandler = function (data) {
         alert(‘您查到的信息:票价‘ + data.price + ‘元,余票‘ + data.tickets + ‘张。‘);
    };

需要注意的是,ajax跨域请求(jsonp)中,服务端返回数据格式必须是:flightHandler({ "price":"120","tickets":"20"});如果直接这样的json格式{ "price":"120","tickets":"20"},将会报parser error的错误.请注意这个函数最后的分号";",必须加上,否则,如果同一个页面有多个ajax请求, 并且在数据没有返回时,再发出其它ajax请求时,有可能出现parsererror出错提示.这种错误很隐敝,在开发时,不容易发现,在并发测试时,就很容易暴露出.

服务端代码示列:

public String jsonReturn(HttpServletResponse response, String callback, Map<String, Object> jsonMap) {
        if (org.apache.commons.lang.StringUtils.isEmpty(callback)) {
            return appAjaxJson(response, getJson(jsonMap));
        }
        return appAjaxJson(response, callback + "(" + getJson(jsonMap) + ")");
    }

    public String appAjaxJson(HttpServletResponse response, String jsonString) {
        return appAjax(response, jsonString, "text/html");
    }

    public String appAjax(HttpServletResponse response, String content, String type) {
        try {
            response.setContentType(type + ";charset=UTF-8");
            response.setHeader("Access-Control-Allow-Origin", "*");//表示支持跨域请求
            // 如果IE浏览器则设置头信息如下
            if ("IE".equals(type)) {
                response.addHeader("XdomainRequestAllowed", "1");
            }
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);
            response.getWriter().write(content);
            response.getWriter().flush();
        } catch (IOException e) {
            this.logException(e);
        }
        return null;
    }

查看博文: https://blog.csdn.net/SmCai/article/details/86647288


4、JSON.stringify()、JSON.parse()、toString()
4.1 JSON.stringify():将入参(JavaScript值)转换为 JSON 字符串;
示列1:

let arr = [1,2,3];
    JSON.stringify(arr);//"[1,2,3]"
    typeof JSON.stringify(arr);//"string"

示例2:

//判断数组是否包含某对象
    let data = [
        {name:‘echo‘},
        {name:‘听风是风‘},
        {name:‘天子笑‘},
        ],
        val = {name:‘天子笑‘};
    JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

    //判断两数组/对象是否相等
    let a = [1,2,3],
        b = [1,2,3];
    JSON.stringify(a) === JSON.stringify(b);//true


4.2 JSON.parse():将JSON字符串转为一个对象;
示列:

let string = ‘[1,2,3]‘;
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object


4.3 JSON.stringify()与 toString()的区别    

let arr = [1,2,3];
    JSON.stringify(arr);//‘[1,2,3]‘
    arr.toString();//1,2,3


链接: https://www.fly63.com/article/detial/7055

web数据格式中关于:XML/HTML/JSON学习总汇

这篇文章讲解关于XML/HTML/JSON的学习,大家都知道服务器端可以返回的数据格式,主要就是:XML、HTML、JSON,当我们做数据抓取,ajax请求的时候都需要熟悉它们的使用。

解决IE8下JSON.stringify()自动将中文转译成unicode的方法

在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即u****的形式。查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况。

js实现json格式化,以及json校验工具的简单实现

这篇文章主要讲解:json结构及形式、json字符串转化为json对象【通过eval( ) 方法,new Function形式,使用全局的JSON对象】、json校验格式化工具简单实现

解析Json字符串的三种方法

在很多时候,我们的需要将类似 json 格式的字符串数据转为json,下面将介绍日常中使用的三种解析json字符串的方法

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

js 将json字符串转换为json对象的方法解析

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

聊聊JSON Schema

json现在已经成为比较通用灵活的数据交换格式,尤其是在web方面,总是少不了它的身影,js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中,特别是在前后端分离的开发中,后端提供接口,前端通过接口拿取数据;

百度JSON LD结构化数据代码分享

百度JSON LD结构化数据代码分享,搞外贸网站,企业网站这么就,对谷歌的 schema 结构化数据比较熟悉,但是对百度的结构化数据就了解太少了

什么是JWT(JSON WEB TOKEN)

Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!