位置: 编程技术 - 正文

Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别(json对象结构中,关键字key必须为什么类型)

编辑:rootadmin

推荐整理分享Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别(json对象结构中,关键字key必须为什么类型),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:json关键字和保留字,jsonp例子,jsoncpp rapidjson,json关键字和保留字,jsonp的用法,jsoncpp rapidjson,jsonp的用法,json关键字和保留字,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

  第一次听说jsonp,其实早在2年之前。当时在做一个活动页面的抽奖模块,要从服务端get一个概率,当时什么都不懂,同事说用ajax,我就用ajax,同事说dataType改成jsonp,我就改成jsonp。于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式...直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难。

为什么要用jsonp?

  相信大家对跨域一定不陌生,对同源策略也同样熟悉。什么,你没听过?没关系,既然是深入浅出,那就从头说起。

  假如我写了个index页面,页面里有个请求,请求的是一个json数据(不知道json数据的猛戳JSON简介以及用法汇总),简单思考写下如下代码:

  楼主把两个文件都放在wamp下的www文件夹下,ajax请求没有跨域,完美得到结果:

  但是如果我的json文件和index文件不在一个域下,即跨域(不懂跨域的可参考JavaScript 的同源策略)了呢?

  试着在wamp下新开个apache端口(不知道怎么开的可参考WampServer下使用多端口访问),将json文件放到该服务端口的文件夹下(楼主设置的端口号为,默认的是端口),试着发送请求:

  很显然,提示跨域了!怎么搞?这时jsonp就要出马了!

神奇的script标签

  与jsonp息息相关的是script标签,而xhr或者说传统意义上的ajax与之没有半毛钱关系!

  接着看上面的index.html代码,我们看到页面引用了百度cdn的jquery路径,对于这样的方式我们似乎已经习以为常,但是仔细一想,script标签可是完完全全的跨域的啊...没错,jsonp的实现核心就是利用script标签的跨域能力!于是我们灵机一动,似乎可以这么搞,动态生成一个script标签,把json的url赋值给script的src属性,然后再把这个script标签插入dom里...

  我们创建了一个script标签,而标签内包裹的内容正是需要的json数据,但是报错如下:

  原因是因为json数据并不是合法的js语句,把上面的json数据放在一个回调函数中是最简单的方法:

  当然,这时的a.json文件并不一定要这样命名,改成a.js也不会有一点问题。

  而如果是与服务端交互也是一样的道理,比如和php:

Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别(json对象结构中,关键字key必须为什么类型)

  需要注意的是,jsonp提供的url(即动态生成的script标签的src),无论看上去是什么形式,最终生成返回的都是一段js代码。

JQuery对jsonp的封装

  为了便于开发,jq对jsonp也进行了封装,封装在了ajax方法中。

  以上代码是针对请求文件中写死了callback函数名的情况。因为请求的是json文件,json不是服务器端的动态语言不能进行解析,如果是php或者其他的服务器端语言,则不用写死函数名,比如下面这样:

当然类似的封装好的方法还有几种:

  需要注意的是getJSON方法的请求地址url需要带上callback=&#;,因为jq对该方法进行封装的时候并没有默认回调函数变量名为callback,于是php中$_GET['callback']就找不到变量值了。

  而一般的jq方法url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说,callback 参数是自动添加的。默认情况下,jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery_ 这种根据看似随机的名字,对应的就是 success 那个处理函数,所以一般不用特意处理。二如果要写死callback名的话,可以参照上文。

总结

  由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求,这就是jsonp的核心。

  jsonp原理:

1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。 2.服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。 3.客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

json和jsonp的区别,ajax和jsonp的区别

json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系。

json是一种轻量级的数据交换格式。

jsonp是一种跨域数据交互协议。

json的优点:(1)基于纯文本传递极其简单,(2)轻量级数据格式适合互联网传递,(3)容易编写和解析。

ajax和jsonp的区别:

相同点:都是请求一个url

不同点:ajax的核心是通过xmlHttpRequest获取内容

    jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本。

Underscore源码分析 几年前就有人说javascript是最被低估一种编程语言,自从nodejs出来后,全端(AllStack/FullStack)概念日渐兴起,现在恐怕没人再敢低估它了。javascrip是一种类C

JavaScript小技巧整理 本文整理总结了JavaScript的小技巧。分享给大家供大家参考,具体如下:1.组织默认事件阻止默认事件,h5默认的inputtype='date'在某些浏览器和android设备上

JavaScript阻止回车提交表单的方法 大家对回车键的功能应该比较熟悉,比如在windows系统的很多应用程序中,只要点击回车键就可以进入此程序或者开启某项功能,不过有时候我们希望阻

标签: json对象结构中,关键字key必须为什么类型

本文链接地址:https://www.jiuchutong.com/biancheng/385595.html 转载请保留说明!

上一篇:javascript实现禁止复制网页内容汇总(js如何禁用按钮)

下一篇:Underscore源码分析(under code)

  • 什么叫抵扣进项
  • 企业关于发票的管理及要求
  • 股东投入款
  • 开模费用计入什么科目
  • 报表申报错误怎么作废重报
  • 合伙企业有一般账户吗
  • 财务软件计提所得税分录
  • 购买基金会计分录怎么填
  • 办理产权证费用明细
  • 环评费用包括哪些
  • 公司委托财务去银行办理业务
  • 车辆租赁费可以一次性计入费用吗
  • 营改增 贷款服务
  • 地方教育附加费是什么意思
  • 关于开票时纳税的规定
  • 购买债券发生的交易费用计入哪个科目
  • 股东房产用于公司经营的是否交房产税
  • 税务总局关于四流一致解答
  • 政府会计财政拨款收入借贷方向
  • 公司破产清算的清偿顺序为
  • 华为p30分屏怎么操作
  • 进项税和销项税怎么算
  • 无形资产原值增加,净值减少的原因
  • 取得成本tc
  • windows11怎么设置ipv4地址
  • win7系统中回收站的内容清空后还能恢复吗
  • 网络环境中存在不同网段的nvr
  • 出售固定资产减按2%会计处理1%怎么处理
  • 工程施工暂估的成本的依据
  • php和py
  • php获取当前定位
  • thinkphp django
  • 已知税额和不含税额求税率
  • idea如何导入sql文件
  • 城投公司政府购买棚改
  • 国际货运代理公司个人货物
  • 免征增值税的规定
  • 异地托收承付结算金额起点为
  • 限定性净资产是指什么
  • 暂估应付款怎么录入
  • 物流公司进项包括什么
  • 冲销管理费用怎么写凭证
  • 企业代扣个人社保最新会计处理
  • 累计扣税标准2021标准
  • 存货跌价准备的账务处理
  • 颁发数字证书要符合什么条件
  • 小规模纳税人中标一般计税
  • 开红字发票需要具备什么条件
  • windowsserver2016安装完成后怎么是命令模式
  • mac虚拟机安装教程win10正版
  • linux的df命令是什么单词的缩写
  • 怎么用uefi装win7
  • 进程是什么 进程类型
  • 巧用 Windows 系统控制台删除病毒文件
  • Nymse.exe - Nymse是什么进程 有何作用
  • PasSrv.exe - PasSrv是什么进程 有什么用
  • linux apache怎么启动
  • win7耳机和外放一起响
  • android界面切换与数据传递
  • 网页设计需要多少分辨率
  • linux进程运行的两种方式
  • 慎用是能用还是不能用
  • node.js网站
  • 举例讲解水生花卉栽培管理
  • js限制输入字符长度
  • nodejs apply
  • JavaScript中Number.MIN_VALUE属性的使用示例
  • unity shader视频教程
  • python multinomial
  • 个体工商户定期定额核定
  • 车位过户需要契税发票吗
  • 国家税务总局遴选拟录取名单
  • 深圳税务开票软件发票下载
  • 车辆购置税查询怎么查
  • 供热基础设施配套费
  • 什么叫发票信息对比
  • 江苏国税电子国税局
  • 解放服务站总部电话
  • 税务局社保服务
  • 零税率,免税不免增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设