Jsonp其实就是一个跨域解决方案。

Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的

所以可以把要请求的数据封装成一个js语句,做一个方法的调用。

跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。

可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

jsonp原理:

浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据。

淘淘商城的理解:

在taotao-portal中访问taotao-rest中的category数据,

一个是8082的端口,一个是8081的端口,同一个域名,但是端口不一样,所以跨域访问数据是不可以的。可以利用上面的jsonp的方式来进行访问。

在js中定义一个url,用于访问服务上面的category.json的数据,这样子是获取不到数据的

定义一个方法利用script的方式获取脚本

将category的数据封装成一个js类型的语句,它调用一个js的方法,即最后一个图的方法,在调用方法时将参数传递过去。

js脚本中的参数传递过来,获取到数据,在回调方法中获取数据即可。

什么是jsonp的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. POJ2155 Matrix二维线段树经典题

    题目链接 二维树状数组 #include<iostream> #include<math.h> #include<algorithm> #include<st ...

  2. 东大OJ-最大子序列问题的变形

    1302: 最大子序列 时间限制: 1 Sec  内存限制: 128 MB 提交: 224  解决: 54 [提交][状态][讨论版] 题目描述 给定一个N个整数组成的序列,整数有正有负,找出两段不重 ...

  3. 59-chown 简明笔记

    改变文件的所有者或与文件相关联的组 chown [options] owner file-list chown [options] owner: group file-list chown [opti ...

  4. MyBatis学习--SqlMapConfig.xml配置文件

    简介 SqlMapConfig.xml是MyBatis的全局配置文件,在前面的文章中我们可以看出,在SqlMapConfig.xml主要是配置了数据源.事务和映射文件,其实在SqlMapConfig. ...

  5. Ceph: validate that the RBD cache is active

    Ceph: validate that the RBD cache is active Quick and simple test to validate if the RBD cache is en ...

  6. Boundary Representations

    用所有属于boundary的点来表示boundary, 有两个主要的缺点, 一是数据量大, 二是对噪声敏感. 用boundary的一些representation而非精确的boundary本身来表示b ...

  7. Ext-设置form表单不可编辑

    1. var formEach = win.down('form').items.items; Ext.each(formEach,function(item){ console.log(item); ...

  8. ASP.NET MVC 4 异步加载控制器

    ASP.NET 4 Developer preview中的异步操纵器 在放弃了对.NET 3的支持之后, ASP.NET MVC 4 彻底拥抱了Task类库, 你不需求再蛋疼的给每个Action写两个 ...

  9. AngularJs学习之一使用自定义的过滤器

    script: 参数item是由AngularJs提供的,是应当被过滤的对象集合.而showComplete是我们传入的参数. {{item.action}} 用ng-model创造一个名为showC ...

  10. Pycharm设置

    File->settings->Editor->File and Code Templates->Python Script #!/usr/bin/env python # e ...