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的更多相关文章

  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. a^b的前n位数

    假设我们现在需要知道 ab  的后 n 位数或前 n 位数,简单直观的做法就是求出 ab  的值,然后在分别取前 n位或后 n位,不过在 a,b很大的情况下显然是无法存储的.所以,直接求是不可能的了. ...

  2. Ext JS中Button的一般使用

    Ext JS中Button按钮的显示,以及按钮的部分事件 一.属性 renderTo:将当前对象所生成的HTML对象存放在指定的对象中 text:得到按钮名称 minWidth:按钮最小宽度 hidd ...

  3. HDU-简单计算器-1237

    这道题我做了一天,把中缀表达式转化为后缀表达式,但遇到了储存的问题,考虑了好久,写出后又调试,弄了一天,下面说一下中缀表达式转换后缀表达式: 算法: 中缀表达式转后缀表达式的方法: 1.遇到操作数:直 ...

  4. R语言学习笔记(数据预处理)

    setwd("d:/r/r-data/")data=read.table("salary.txt",header=T)attach(data)mean(Sala ...

  5. JSON序列化选项

    JSON.stringify()除了接受序列化js对象外,还可以接受另外的两个参数,这两个参数用于指定使用什么样的方式序列化js对象. 第一个参数是个过滤器,可以一个数组或者一个函数:第二个参数是一个 ...

  6. Web数据采集

    http://blog.csdn.net/pqhdp/article/details/4352769 http://blog.csdn.net/CharlesSimonyi/article/detai ...

  7. 分布式文件系统 Mogilefs 安装步骤

    我这里的环境都是 RHEL 5 的环境. MySQL 数据库 和 tracker 都放到一台服务器上, 为 192.168.2.85 storage server两台, 分别为 192.168.2.9 ...

  8. Asp.net web服务处理程序(第六篇)

    四.Web服务处理程序 对于Web服务来说,标准的方式是使用SOAP协议,在SOAP中,请求和回应的数据通过XML格式进行描述.在Asp.net 4.0下,对于Web服务来说,还可以选择支持Ajax访 ...

  9. 序列化与反序列化 - BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)

    序列化的作用是什么?为什么要序列化? 1.在进程下次启动时读取上次保存的对象的信息. 2.在不同的应用程序域或进程之间传递数据. 3.在分布式应用程序中的各应用程序之间传输对象. 所为序列化,就是将对 ...

  10. ubuntu cenots 禁止本地登陆

    auth required pam_succeed_if.so user != root