jsonp主要是利用script的跨域。简单点说就是像img,css,js这样的文件是跨域的,这也就是为什么我们能够利用cdn进行加速的原因。而且像js这样的文件,如果里面是一个自执行的代码,比如:

(function(){
alert(22);
})();

那么请求之后就会弹出alert对话框。

那么如果我们有个全局函数:

function showdata(data){
console.log(data);
}

而且返回的js里有这样的代码:

showdata({"name":"a14907"});

那么我们就可以在控制台显示数据。同理可以自定义数据的处理方式。

这就是jsonp了。

jquery帮我们封装了jsonp的使用方式:

 $.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
console.log(json);
},
error: function(){
alert('fail');
}
});

jsonp简介的更多相关文章

  1. 【转】JSONP简介

     原文链接:说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 先说说JSONP是怎么产生的: 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面. ...

  2. Jsonp简单认识(后端使用的是asp.net mvc)

    一.Jsonp简介:由于浏览器基于安全有同源策略(同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)机制,所以前端无法使用Ajax来获取来获取其他域名下返回的数据,而Jsonp可 ...

  3. JSONP的学习(收集整理)

    JSONP和JSON之间有什么联系吗? JSON(JavaScript Object Notation) 是一种轻量级.可读的基于文本的的数据交换格式.,是一种轻量的数据交换开放标准.源于JavsSc ...

  4. JSONP 劫持漏洞实例

    0x01 Jsonp简介 Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从 ...

  5. jQuery使用JSONP时的错误处理

    概述 什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域.跨域,就是在一个域中访问另一个域的数据. 如果只是加载另一个域的内容,而不需要访问其中的数据的话,跨域是很 ...

  6. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  7. 用jsonp 解决跨域问题

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 将获取的txt 文件 展示出 ...

  8. js读取本地json/txt/xml存在跨越问题,可以用jsonp 读取本地json文件

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 <div id=&qu ...

  9. php处理ajax请求,ajax+php实现跨域

    第一种方法通过设置Access-Control-Allow-Origin来实现跨域 1.首先要了解什么是域? 什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域.跨 ...

随机推荐

  1. idea右键无法新建Java Class

    项目中新建目录之后,要在该目录下新增java Class文件,右键——>New发现无对应选项. 原因:新建目录之后需要设置目录作用,从而让idea识别. 方法:File-Project Stru ...

  2. 22 python 初学(类,面向对象)

    python: 函数式 + 面向对象 函数式可以做所有的事,是否合适? 面向对象: 一.定义: 函数: def + 函数名(参数) 面向对象: class  -> 名字叫 Bar 类 def   ...

  3. 性能测试监控平台:InfluxDB+Grafana+Jmeter

    前面的博客介绍了InfluxDB.Telegraf.Grafana的安装和使用方法,这篇博客,介绍下如何利用这些开源工具搭建性能测试监控平台... 前言 性能测试工具jmeter自带的监视器对性能测试 ...

  4. openstack-mitaka部署

    详见我在51cto的一篇博客:http://egon09.blog.51cto.com/9161406/1839667

  5. python购物车demo

    product_list = [        ('Iphone',11800),        ('Mac Pro',13800),        ('BMW CAR',480000),      ...

  6. MacOS搭建本地服务器

    MacOS搭建本地服务器 一,需求分析 1.1,开发app(ios android)时通常需往app中切入web页面,直接导入不行,故需搭建本地的测试网站服务,通过IP嵌入访问页面. 1.2,开发小程 ...

  7. CKEditor 4.5 filetools, XHR.withCredentials = true,

    var editor = CKEDITOR.replace( 'editor1', { extraPlugins: 'uploadimage,filetools', imageUploadUrl: ' ...

  8. Python——迭代器

    一.概述 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 二.可迭代的对象 序列:字符串.列表.元组 非序列:字典.文件 三 ...

  9. bugku web web基础

    web基础$_GET $what=$_GET['what'];echo $what;if($what=='flag')echo 'flag{****}'; 看了这段代码知道,需要用get提交what= ...

  10. SQL 中左连接与右链接的区别

    在微信公众号中看到的sql左连接与右链接的总结,这个图总结的很好,所以单独收藏下: