浅谈JSONP 的工作原理

小编最近在工作中经常用到 jsonp 这个东西, 表示之前从来没用过  最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~

话说我们访问一个页面的时候 需要像另一个网站获取部分信息, 这就是所谓的跨域请求才能完成的功能, 现实生活中有很多 比如引入外部js, img 等等, 说到发送请求, 在web2.0的时代 我们避免不了 ajax 请求了, 当然我们在

工作中用到 ajax 跨域请求 是必须遇到的,当然ajax 是不支持跨域请求的 说到这里我比较汗颜啊, 当然天无绝人之路,有个叫jsonp 的家伙 可以解决这个问题, 下面我们就来分析一下在这个东西是怎么工作的额 。

说道JSONP,很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: 
<script src="http://www.example.net/api?param1=1&param2=2"></script> 
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: 
callback({"name":"hax","gender":"Male"}) 
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

可能多数人对它的知晓程度仅限于jQuery,jQuery提供了发送jsonp请求的方法。比如在使用$.ajax()方法的时候

   jQuery(document).ready(function(){
        $.ajax({
             type: "p",
             url: "http://hf-test.haoju.cn/esf/ajax/test",
             dataType: "jsonp",
             jsonp: "callback",
             success: function(json){
             //  alert(json);
             },
             error: function(){

             }
         });
     });

jQuery将jsonp请求封装成类似ajax请求的样子,这样能让开发者在使用的时候更加方便,但是实际上,jsonp压根不是通过XMLHttpRequest来实现的。不得不说你们被骗了

下面的代码你就知道jsonp的如何实现的了

var callbackName = ‘callback‘;
window[callbackName] = function (data) {
alert(data);
// 对返回的数据做后续处理
}
var script = document.createElement(‘script‘);
script.src = ‘http://hf-test.haoju.cn/esf/ajax/test?callback=‘+callbackName;
document.body.appendChild(script);

这是前端部分的代码,要想真正实现JSONP的功能,还需要后端的配合。针对上面这个例子,当前端请求这个script地址的时候,后端只要按以下内容响应就会有神奇的效果:

echo   callback(‘my is jsonp‘);

说道这儿,很多人也许就恍然大悟了。JSONP名字听着高端,其实也不过如此嘛。

实际上,jQuery发JSONP请求时也是这么做的。

时间: 2024-10-16 07:38:02

浅谈JSONP 的工作原理的相关文章

TODO:浅谈pm2基本工作原理

要谈Node.js pm2的工作原理,需要先来了解撒旦(Satan)和上帝(God)的关系. 撒旦(Satan),主要指<圣经>中的堕天使(也称堕天使撒旦),他是反叛上帝耶和华的堕天使(Fallen Angels),曾经是上帝座前的天使,后来他因骄傲自大妄想与神同等而堕落成为魔鬼,被看作与上帝的力量相对的邪恶.黑暗之源. 简单的说Satan是破坏神,就是进程的异常退出.kill等:God是守护神,保护进程.重启进程等. 一图胜千言,pm2的 RPC基本框架.Client与Daemon是采用了R

[转自SA]浅谈nginx的工作原理和使用

nginx apache 简单对比 nginx 相对 apache 的优点: 轻量级,同样起web 服务,比apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而 apache 则是阻塞型的,在高并发下 nginx 能保持低资源低消耗高性能 高度模块化的设计,编写模块相对简单 社区活跃 配置简洁 apache 相对nginx 的优点: rewrite ,比 nginx 的 rewrite 强大 模块超多 少 bug ,nginx 的 bug 相对较多 超稳定 配置复杂

jsonp的工作原理,观后必然懂!!!

jsonp的工作原理: 动态创建script标签,通过script标签中的src跨域属性,连接对方接口,并将回调函数通过接口传递给对方. 对方服务器在准备好数据后再通过调用回调函数并以传递参数的方式将数据返回来. 用代码给大家封装一个函数: function getDate(url,req){ var newData = ''; var oScr = document.createElement('script'); oScr.src = url + 'wd=' + req + '&cb=' +

Ajax和Jsonp的工作原理,以及区别。

Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求.AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据. 过程的话 第一步:创建一个ajax引擎对象,ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象 第二步 调用open方法启动一个请求以备

Ajax和Jsonp的工作原理,以及区别

Ajax工作原理是: 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求.AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据. 过程的话 第一步:创建一个ajax引擎对象,ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象 第二步 调用open方法启动一个请求以

浅谈计算机程序的工作过程

---------------------------------------------------------------------------------------------------------------------------------------- 本文为<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000.第一课课后作业.学生姓名:刘征 本文主要内容是写一个简单的C语言程序,将其转换成汇编代

浅谈jsonp

要谈jsonp,首先要弄明白jsonp是什么,它是用来干嘛的.jsonp其实就是我们常用的script标签,用来解决跨域的,只不过这个标签是动态创建的,为啥要动态创建涅. 举个小栗子: 假如我们远程文件remote.js是这样的: handle({result:'我是远程文件派来的数据'}) 我们在本地中这样引入: <script type="text/javascript"> var handle= function(data){ alert(data.result);

jsonp的工作原理

JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了,可以简单的理解为 带callback的json就是jsonp. 就是利用<script>标签没有跨域限制原理来达到与第三方通讯的目的.当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src=

浅谈软件销售工作

自技术领域转做销售有几年了.由于长期耕耘在技术领域,对于销售的角色进入有点晚,只是近期几年也逐渐的摸出些门道,而且按照这些门道来指导团队的实践,确实可以看到比較可喜的进步,在此总结一下.跟大家一起分享一下. 销售分为例如以下三种类型:1. 技术型销售.典型特征是逢人必谈技术,对于技术的内因外果非常清楚,当跟客户沟通时特别在技术沟通时,能说会道,涛涛不绝.但一到关系项目譬如玩.喝酒.K歌等表现平平.2. 关系型销售.典型特征是碰到人必称"哥"."老师"."领