JS跨域知识总结：

在“跨域”一词经常性地出现以前，我们其实已经频繁地使用它了。如在A网站的img，src指向B网站的某一图片地址，毫无疑问，这在通常情况下都是能正常显示的（且不论防盗链技术）；同样，可以使script标签的src属性指向其它网站的脚本资源（在某些情况下甚至鼓励这样做，以便充分利用其它网站的负载优势，减小自身服务器的并发量）。然而，如若使用js去主动请求其它网站的数据，比如ajax方式，就会遇到让人郁闷的跨域问题，这也是我们平常所说的跨域。由于安全原因，跨域访问是被各大浏览器所默认禁止的。这里涉及到同源策略的概念：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。

跨域带来的具体安全问题博主没有深究，大伙可以自行脑补。

然而，很多情况下，特别是在互联网持续发展的今天，我们需要请求来自不同合作伙伴或数据提供商的前端接口，在跨域访问的方式没有规范化前（client端跨域访问的需求看来也引起w3c的注意了，看资料说html5 WebSocket标准支持跨域的数据交换，应该也是一个将来可选的跨域数据交换的解决方案），有什么方法能绕过它的限制呢？答案有很多（虽然都很麻烦），最常用的当属所谓的JSONP跨域了。

JSONP原理

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码。 这种跨域的通讯方式称为JSONP。

来个简单的例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.   <title>Test Jsonp</title>
  5.   <script type="text/javascript">
  6.       function jsonpCallback(result)
  7.       {
  8.       alert(result.msg);
  9.       }
  10.     </script>
  11.   <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

　　

简述原理与过程：首先在客户端注册一个callback, 然后把callback的名字传给服务器（这里客户端和服务器约定以key为jsonp的查询字符串值传递）。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，即执行了预定义的callback函数。

从上述简述可以推出：除了返回函数形式的js代码片段，服务端自然能返回所有符合规范的可执行js片段。

JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。（下面还有）

jQuery的Jsonp

如前所述，jsonp并非ajax请求，但是jQuery仍提供与jQuery.ajax一致的方式进行跨域请求：

  1. $.ajax({
  2.   url: 'http://crossdomain.com/jsonServerResponse',
  3.   type: 'GET',
  4.   dataType: 'jsonp',
  5.   jsonp: "callback",
  6.   jsonpCallback: 'functionName',
  7.   success: function (data, textStatus, jqXHR) { }
  8.   //……
  9. });

　　

如上所示，dataType设为jsonp表示这是一次跨域请求，jsonp设为服务端预定的传递函数名称的查询字符串key，而jsonpCallback即为js函数名称；假如jsonpCallback不设置，那么jQuery将自动生成的随机函数名（在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除），可推断该自动生成的函数会回调上述代码中的success函数。（当手动为jsonpCallback赋值时，不知道success函数会否回调，还是说jQuery会寻找预定义的函数，若找不到则报错？博主懒，以后再试吧。）当然jQuery为我们提供了一个简易版本，$.getJSON，这里就不赘述了。

需要注意的是success函数中的jqXHR参数，在ajax请求中，它是正宗的jqXHR对象，亦可看作是XMLHTTPRequest对象（继承or封装），但是在jsonp请求中却并非如此，几乎不能带给我们如XMLHTTPRequest中最有用的那些信息：它缺少XMLHTTPRequest的请求状态信息，所以并不能触发绝大部分的回调函数，比如error、complete等（jQuery1.9.0），而可以被回调的success函数推测应该是由script标记的load事件触发，这也同ajax依靠XMLHTTPRequest的状态的机制完全不同。经试验，脱胎于jQuery的zepto（v1.1.3），在jsonp请求出现错误，比如加载js文档时头部返回401错误时，error函数会执行，但是该函数的jqXHR参数也同样不是正宗的jqXHR类型，甚至不能通过它获取响应的头部信息，在这种情况下，我们只是被告知某个环节出错了，却并不知道具体的错误信息。类似响应头承载有用信息的场景，博主不建议使用jsonp，可以说，使用jsonp的一个前提是：除了网络异常等非业务异常外，所有业务异常（概括地说，乃是从服务器接收请求到返回响应这段时间内抛出的所有异常）都需要以请求结果的形式直接返回给客户端，便于客户端回调分析。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Javascript 跨域知识详细介绍的更多相关文章

  1. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  2. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  3. javascript跨域訪问探索之旅

    需求:         近期工作负责一个互联网应用A(我公司应用)与还有一个互联网应用B进行通讯.通讯的方式是这种:还有一个互联网应用某些表单信息须要从我公司的互联网应用获取.首先用户訪问互联网应用B ...

  4. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  5. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  6. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  7. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

  8. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  9. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

随机推荐

  1. 【sql注入】浅谈JSP安全开发之SQL注入

    [sql注入]浅谈JSP安全开发之SQL注入 本文转自:i春秋社区 前言不管是用什么语言编写WEB应用程序,他们都或多或少有一些地方存在漏洞.如果你想知道漏洞的运行原理,和防御方案,那么请看完本篇文章 ...

  2. JavaScript实现input输入框限制输入值的功能

    限制只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.val ...

  3. 【MySQL】sql_mode引起的一个问题和总结

    [背景] 之前项目中,项目组计划将现场的MySQL5.5升级到5.7,以提升主从同步性能.使用半同步复制,以及解决一些现场问题等.安排测试组进行验证,测试同事反馈实验室环境中发现有入库失败,我查看了e ...

  4. HTML一些有趣的东西

    1.<head>标签里: <meta http-equiv="Refresh" content="3"/><!--三秒自动刷新-- ...

  5. 记录js new Date日期处理的一个坑

    记录js日期处理的一个坑   当前时区为北美东部时区时, new Date('2019-4-1') new Date('2019-04-01') 结果是相关一个月的. 如下图   new Date(' ...

  6. ubuntu16.04 离线安装nginx

    场景描述: 客户生产环境服务器,内网隔离无法访问互联网,需要准备好相应的安装包,离线部署. 服务器&软件包版本: 环境: ubunt16.04 gcc-4.8.4 包: nginx-1.8.1 ...

  7. 基于Mono和VSCode打造轻量级跨平台IDE

      近期Visual Studio推出Mac版本号的消息迅速在技术圈里刷屏,当project师们最喜欢的笔记本电脑Mac,邂逅地球上最强大的集成开发环境Visual Studio的时候,会碰撞出如何精 ...

  8. 解决关于:TypeError: Class constructor Model cannot be invoked without 'new'

    问题描述:在工作过程中出现 TypeError: Class constructor Model cannot be invoked without 'new' 这个错误 以下是报错代码: class ...

  9. idea启动多个tomcat失败

    Intellij idea中,为在本地调试两个系统之间的调用,配置两个本地tomcat server,设置不同的端口号,如8081和8082,Deploy中加入两个系统各自的Artifact xxx: ...

  10. Ansible--Ad-Hoc

    什么是Ad-Hoc (这其实是一个概念性的名字,是相对于写Ansible playbook来说的.类似于在命令行敲入shell命令和写shell scripts两者之间的关系)... 如果我们敲入一些 ...