当前位置:首页 > 网站技术 > 前端技术 > 正文内容

json以及jsonp的跨域

小彬2021-01-07前端技术93

 什么是JSON?

JSON(javascript object notation)全称是javascript对象表示法,它是一 种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据,2001年由Douglas Crockford提出,目的是取代繁琐笨重的XML格式


JSON的语法规则

JSON的语法可以表示以下三种类型的值:

 简单值:

简单值使用与JavaScript相同的语法,可以在JSON中表示字符串、数值、布尔值和null字符串必须使用双引号表示,不能使用单引号,数值必须以十进制表示,

且不能使用NaN和Infinity

说明:JSON不支持JavaScript中的特殊值undefined

 对象:

对象作为一种复杂数据类型,表示的是一组有序的键值对儿,而每个键值对儿中的值可以是简单值,也可以是复杂数据类型的值

JSON中对象的键名必须放在双引号里面,因为JSON不是javascript语句,所以没有末尾的分号

说明:同一个对象中不应该出现两个同名属性

 数组:

数组也是一种复杂数据类型,表示一组有序的值的列表,可以通过数值索引来访问其中的值

说明:数组或对象最后一个成员的后面,不能加逗号


JSON对象的两个方法:

 stringify()

语法:JSON.stringify()

功能:用于将一个值转为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原

 parse()

语法:JSON.parse()

功能:用于将JSON字符串转化成对象


JSON对象总结

 JSON之所以流行,是因为可以把JSON数据结构解析为有用的javascript对象

 JSON对象的stringify()和parse()这两个方法可以分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值

 JavaScript的eval()类似于JSON.parse()方法,可以将json字符串转换为json对象,但是,eval()可以执行不符合JSON格式的代码,有可能会包含恶意代码,所以尽量少用




跨域问题

同源策略:域名,协议,端口均相同

跨域:协议、域名、端口任何一个的不同的请求。


如何解决跨域:

跨域资源共享(CORS)

使用JSONP(常用)

修改document.domain

使用window.name



jsonp

是填充式json的缩写。是应用json的一种新的方法,也是一种跨域解决办法。

jsonp由两部分组成:回调函数和数据。

回调函数是当响应到来时应该在页面调用的函数,而数据就是传入回调函数中的json数据。


jsonp原理

直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现。


1通过script标签引入js文件

2js文件引入成功后

3执行我们在url中指定的函数



//  封装jsonp

  function getJSONP(url,callback ){
    if(!url){
      return ;
    }
    // 声明数组用来随机生成函数名
    var a =['a','b','c','d','e','f','g','i','j','k']
    r1=Math.floor(Math.random()*10)
    r2=Math.floor(Math.random()*10)
    r3=Math.floor(Math.random()*10)
    name ='getjsonp'+a[r1]+a[r2]+a[r3]
    cbname ='getJSONP.'+name
    // 判断url地址中是否含有?号
    if(url.indexOf()===-1){
      url += '?jsonp='+cbname
    }else{
      url +='&jsonp='+cbname
    }
    // 动态创建script标签
    var script=document.createElement('script');
    // 定义被脚本执行的回调函数
    getJSONP[name]=function(data){
      try{
        callback && callback(data);
      }catch(e){
      }finally{
        // 最后删除该函数及script标签
        delete getJSONP[name]
        script.parentNode.removeChild(script)
      }
    }
    // 定义script的src
    script.src=url
    document.getElementsByTagName("head")[0].appendChild(script)
  }
  getJSONP('http://class.imooc.com/api/jsonp',function(data){
    console.log(data)
  })


标签: javascript
分享给朋友:

相关文章

Vue2.x进阶知识

Vue2.x进阶知识

1.自定义指令—directive指令用法官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html Vue.directive("...

基于Vue自定义上下轮播组件(原创)

基于Vue自定义上下轮播组件(原创)

当初拿到设计师设计的这个稿子,我也是花了好几天才写出来的这个轮播图效率极低,特此发表纪念一下,万一以后能用的到呢。效果:鼠标移入圆点,移动下一张图片。它也可以自动轮播。重点是右侧我标注的红框,它是固定...

vue-element-admin框架之动态路由配置及思路(个人实践,拒绝照搬)

vue-element-admin框架之动态路由配置及思路(个人实践,拒绝照搬)

思路:三步1、在路由拦截前对路由数据进行存储和处理2、在渲染路由的router里合并constRoutes和asyncRoutes3、在权限进行修改的时候进行存储和更新路由数据4、对后端返回的数据进行...

基于Vue自定义左右渐变图片轮播组件

基于Vue自定义左右渐变图片轮播组件

本文取自 https://github.com/zhangxiaoshang/va-carousel 的 一个基于 vue 的图片轮播组件 我在此基础上修改了一下,自己用...

常用正则表达式汇总

常用正则表达式汇总

来源:菜鸟教程http://c.runoob.com/front-end/854常用正则表达式正则表达式元字符和特殊字符移步6、第五章--引用类型(Date类型、RegExp类型)一、校验数字的表达式...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信