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。

来个简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

  <title>Test Jsonp</title>

  <script type="text/javascript">

      function jsonpCallback(result)

      {

      alert(result.msg);

      }

    </script>

  <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>

</head>

<body>

</body>

</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一致的方式进行跨域请求：

$.ajax({

  url: 'http://crossdomain.com/jsonServerResponse',

  type: 'GET',

  dataType: 'jsonp',

  jsonp: "callback",

  jsonpCallback: 'functionName',

  success: function (data, textStatus, jqXHR) { }

  //……

});

　　

如上所示，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. Javascript高级编程学习笔记（32）—— 客户端检测（1）能力检测

    能力检测 浏览器厂商虽然在实现公共接口方面投入了大量的精力 但是每种浏览器仍旧存在许多差异 为了让网页能跨浏览器的运行,对浏览器差异做的兼容处理自然无法避免 其中最常用的也就是我们现在所说的能力检测 ...

  2. post上传和压缩、插件模拟请求

      gzip gzip一种压缩方式,或者是文件形式,它主要用于网络传输数据的压缩 gzip压缩好不好用 浏览器:网速一定.内容越小.请求响应的速度是不是更快 手机server:返回数据类型是json/ ...

  3. 如何将自己的jar包发布到mavan中央仓库

    最近自己写了一个关于网关限流的插件,然后想着肯定会有很多兄弟也需要使用到,所以就想着把jar包上传到Maven的中央仓库上让大家可以更方便的使用 现在咱们来看一下这个流程是什么样的呢. 首先呢,你得去 ...

  4. 性能瓶颈之Session

    如果Source,Target和Mapping都不存在性能上的瓶颈,则问题可能会出在Session 以下问题可导致Session有性能上的瓶颈 1) 缓存小 2) 缓冲内存小 3) commit提交间 ...

  5. Vue 中是如何解析 template 字符串为 VNode 的?

    在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...

  6. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  7. 什么是web标准？？

    web标准 不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要 ...

  8. mysql 开发进阶篇系列 18 MySQL Server(innodb_buffer_pool_size)

    从这篇开始,讲innodb存储引擎中,对于几个重要的服务器参数配置.这些参数以innodb_xx 开头. 1. innodb_buffer_pool_size的设置 这个参数定义了innodb存储引擎 ...

  9. 微信分享config:ok 但自定义内容无效

    一.问题 使用微信 JSSDK 分享,出现自定义内容无效 ,也就是分享出去的内容不是你配置的内容. 但在调试过程中发现 congfig 都是 ok 的 二.解决 检查config 配置是否正确 js ...

  10. [Java 泥水匠] Java Components 之二：算法篇之项目实践中的位运算符（有你不懂的哦）

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...