平时项目中处理ajax跨域资源请求时,例如www.example2.com上的某个页面要请求www.example1.com的数据,我们使用得较多的是jsonp方式。jsonp通过JavaScript callback的形式实现跨域访问,其实现原理是:

在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

前端使用jsonp的demo:

1. 使用jquery或zepto

其中callback是前端准备好的回调函数,在ajax请求中,会附加在get请求url的参数后面。服务器端以JavaScript语法的方式生成一个function,function的名字就是传递过来的callback。如getresult.cgi返回以下结果:

callback({'ret':0, 'data':[]});

客户端浏览器解析script标签(jqeury和zepto的实现代码中,动态生成了script标签并添加到页面中),并执行返回的JavaScript语句。

2. 直接创建script标签

在需要跨域请求的地方,动态创建script标签,并添加到页面中。

脚本加载后立即执行callback,即实现了跨域请求。

注意:jsonp只能处理get请求。

jsonp实现跨域资源访问的更多相关文章

  1. CORSFilter 跨域资源访问

    CORS 定义 Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 ...

  2. JAVA跨域资源访问CORSFilter

    当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求.跨域资源共享机制允 ...

  3. apache如何解决跨域资源访问

    很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实 ...

  4. ubuntu-apache如何解决跨域资源访问

    参考:http://blog.csdn.net/emily201314/article/details/52877277 步骤1 #打开apache的headers模块 sudo a2enmod he ...

  5. WebApi系列~开放的CORS,跨域资源访问对所有人开放

    回到目录 之前有客户问我,如何AJAX跨域post,这个问题挺有意思,在我们看来,我是不被允许的,因为它是不安全的,但随着web api的火热,这个东西也被人们一步步的接受了,确实,有时,我们的接口希 ...

  6. Spring Security (CORS)跨域资源访问配置

    1.CORS介绍 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源(协议 + 域名 + 端口)服务 ...

  7. 来吧学学.Net Core之登录认证与跨域资源使用

    序言 学习core登录认证与跨域资源共享是越不过的砍,所以我在学习中同样也遇到啦这两个问题,今天我们就用示例来演示下使用下这2个技术点吧. 本篇主要内容如下: 1.展示一个登录认证的简单示例 2.跨域 ...

  8. JSONP、图片Ping、XMLHttpRequest2.0等跨域资源请求(CORS)

    跨域:当协议.主域名.子域名.端口号中任意一个不相同时都不算同一个域,而在不同域之间请求数据即为跨域请求.解决方法有以下几种(如有错误欢迎指出)以请求图片url为例: 1.通过XMLHttpReque ...

  9. 004. 前端跨域资源请求: JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

随机推荐

  1. 【移动开发】Android中WIFI开发总结(一)

     WIFI就是一种无线联网技术,常见的是使用无线路由器.那么在这个无线路由器的信号覆盖的范围内都可以采用WIFI连接的方式进行联网.如果无线路由器连接了一个ADSL线路或其他的联网线路,则又被称为“热 ...

  2. jQuery.each() 的5个案例

    1.基本的jQuery.each实例 看看 each() 函数是如何处理一个 jQuery 对象的.首先选取所有的a标签 并且打印出他们的href属性. 需要注意的是, 在 each() 当中使用 j ...

  3. IntelliJIdea快捷键

    Ctrl+Shift+方向键Up/Down 代码向上/下移动. Ctrl+X 删除行 Ctrl+Y 也是删除行,不知道有啥区别 Ctrl+D 复制行 Ctrl+Alt+L 格式化代码 Ctrl+N 查 ...

  4. 使程序能够引入.json文件, 为网站添加 MIME 映射

    确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...

  5. Vs2010发布Asp.Net网站及挂到IIS服务上

    首先用vs2010打开一个Asp.Net项目, 也可以通过vs菜单->生成->发布网站                           选择发布网站的路径 这样发布就OK了 下面就吧发 ...

  6. MySQL性能调优与架构设计读书笔记

    可扩展性设计之数据切分 14.2 数据的垂直切分 如何切分,切分到什么样的程度,是一个比较考验人的难题.只能在实际的应用场景中通过平衡各方面的成本和利益,才能分析出一个真正适合自己的拆分方案. 14. ...

  7. Wcf序列化的循环引用问题1

    1.Wcf数据契约序列化,使用的类DataContractSerializer 默认如果类不指定[DataContract],则序列化类的所有字段,并且在出现循环引用的时候回抛出异常,服务终止 msd ...

  8. [php基础]PHP.INI配置:文件上传功能配置教程

    昨天分享了在PHP网站开发中如何在php.ini中配置实现session功能的PHP教程,今天继续分享在利用PHP实现文件上传功能时几点关键php.ini的配置. 说到在php.ini中的文件上传的配 ...

  9. Visual Studio使用技巧记录

    1.关闭调试,iis express仍显示在托盘中: 工具 ---> 选项 ---> 调试 ---> 编辑并继续,取消选择“编辑并继续”的选择框 2.关闭浏览器一直请求: 在调试旁边 ...

  10. MySQL索引和锁

    索引和锁可以让查询锁定更少的行.如果你的查询从不访问那些不需要访问的行,那么就会锁定更少的行,从两个方面来看这对性能都有好处.首先,虽然innodb的行锁效率很高,内存使用也很少,但是锁定行的时候仍然 ...