认识JSONP
jsonp 全称是JSON with Padding
我们大家都知道ajax是不能发起跨域请求,现在可以通过jsonp来弥补ajax的这一缺陷
通过script标签的src属性就可以实现跨域请求。如(CDN)现在的互联网调优,引用goole,百度等的常用js文件,通过浏览器的缓存机制可以实现互联网调优。
下面是原生js实现跨域请求,走码
方式一:
<script type="text/javascript" src="http://localhost:23415/2012Test/testJasonp.ashx?callback=mycallback"></script><!--这里的地址指跨域地址-->
方式二:
<script type="text/javascript">
function createScript()
{
var myScript = document.createElement("script");
myScript.setAttribute("type", "text/javascript");
myScript.setAttribute("src", "http://localhost:23415/2012Test/testJasonp.ashx?callback=mycallback");
document.body.appendChild(myScript);
} function mycallback(data)
{
alert(data.msg);
} window.onload = function () {
document.getElementById("getOtherDomainData").addEventListener("click", function () {
createScript();
});
}
</script>
<input type="button" id="getOtherDomainData" value="发起跨域请求" /> //testJasonp.ashx返回的数据为context.Response.Write("mycallback({\"msg\":\"ok\"})");
当然通过jquery就可以轻易实现jsonp
$(function () {
$("#jqGetOtherDomainData").click(function () {
$.ajax({
type: "GET", url: 'http://localhost:23415/2012Test/testJasonp.ashx', dateType: "jsonp", jsonp: "mycallback", success: function (data) {
alert(data.msg);
}
});
}); });
认识JSONP的更多相关文章
- 实例操作JSONP原理
絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...
- angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- 通过扩展让ASP.NET Web API支持JSONP
同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...
- 跨域的jsonP
1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问. 2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式 3.jsonp的get与p ...
- ASP.NET Web API 配置 JSONP
之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 跨域之jsonp
我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- JSONP的诞生、原理及应用实例
问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
随机推荐
- django获取某一个字段的列表,values/values_list/flat
class Building(models.Model): corporation = models.ForeignKey('company.Corporation', verbose_name=u' ...
- 八、桥接模式--结构模式(Structural Pattern)
桥梁模式:将抽象化(Abstraction)与实现化 (Implementation)脱耦,使得二者可以独立地变化. 桥梁模式类图: 抽象化(Abstraction)角色:抽象化给出的定义,并保存 一 ...
- ownCloud Virtual Machines(bitnami.com)
ownCloud Virtual Machines(bitnami.com)https://bitnami.com/stack/owncloud/virtual-machine
- 序列化与反序列化 - BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)
序列化的作用是什么?为什么要序列化? 1.在进程下次启动时读取上次保存的对象的信息. 2.在不同的应用程序域或进程之间传递数据. 3.在分布式应用程序中的各应用程序之间传输对象. 所为序列化,就是将对 ...
- FileAttributes枚举
FileAttributes枚举是一个专门用于标记硬盘上的文件属性的枚举,枚举的说明在这里:http://www.cnblogs.com/kissdodog/archive/2013/01/16/28 ...
- Grid++Report 报表开发工具
Grid++Report 报表开发工具 版本 更新日期 大小 下载 说明 Grid++Repoert6.0.0.6 2015/08/08 16.0M [下载] 锐浪报表工具最新版本,新增功能说 ...
- 3 x 8 = 23(火了)
颜回爱学习,德性又好,是孔子的得意门生.一天,颜回去街上办事,见一家布店前围满了人.他上前一问,才知道是买布的跟卖布的发生了纠纷. 只听买布的大嚷大叫:「三八就是二十三,你为啥要我二十四个钱?」颜回走 ...
- Yeslab现任明教教主数据中心第二门课程UCS 视频教程下载
Yeslab现任明教教主数据中心第二门课程UCS 视频教程下载 视频教程目录 Yeslab现任明教教主数据中心第二门课程UCS.1.介绍UCS.rar Yeslab现任明教教主数据中心第二门课程UCS ...
- 购买DigtalOcean VPS 以及 连接Linux
1.DigtalOcean简介 digitalocean是一家成立于2012年的总部设置在纽约的云主机商家,眼下在荷兰的阿姆斯特丹(AMS1.AMS2).美国的纽约(NYC1.NYC2)和旧金山(SF ...
- mobile web retina 下 1px 边框解决方案
本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...