ajax跨域请求   qzfl实现

　　跨子域的xhr

  • 原生xhr不支持跨域，通过iframe+proxy.html达到跨子域
  • 假如A页面要请求B页面，A、B跨子域。A创建指向B的proxy页的iframe，将目的url、回调方法挂在iframe属性上，proxy通过frameElement获取目的url发送xhr请求后回调由A页面设置在iframe上的回调方法达到代理请求的目的。

　　跨全域的get请求jsonp

  • jsonp可以跨全域，但只支持get方式。利用的是script标签没有域名限制的特性

　　跨全域的post请求formSend

  • 通过构造带form表单的iframe，并将回调方法挂在iframe，提交form产生post请求，调用frameElement.callback回调。需要cgi返回符合协议格式

      <html>
    
      <head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /></head>
    
      <body><script type="text/javascript"> document.domain="qq.com"; frameElement.callback({JSON:"Data"}); </script></body>
    
  </html>

下载源码：qzfl_2.1.27.js

xhr2.0

　　HTML5的XMLHttpRequest 2.0 在旧浏览器支持的XMLHttpRequest对象升级后，且向前兼容。

如何判断是否支持XHR 2.0?

网页端

　　new XMLHttpRequest().withCredentials==="undefined" 有withCredentials属性则支持XMLHttpRequest 2.0。

　　如果是使用jquery，ajax参数要设置下

    $.ajaxSetup({

       // dataType: 'json',

        xhrFields: {withCredentials: true}

    });

服务器端

例如PHP：header('Access-Control-Allow-Origin: http://someotherdomain.com');

　　withCredentials 默认为false，不会发送目标域名的cookie。手动设为true后，且服务器Access-Control-Allow-Credentials设置为true时，则可发送和接受到目标域名的cookie。

header('Access-Control-Allow-Origin: http://qgroup.qq.com');

header("Access-Control-Allow-Credentials: true");

XHR2.0的新特性?

　　1.可发送跨域(子域)请求,在请求头中携带Origin属性，这个属性由浏览器生成无法修改。用来给服务器判断来源是否合法。

　　2.XHR的新接口api在保持向前兼容的同时，更简洁实用。

　　　　XMLHttpRequest(.upload)--onload、onerror、onabort、onprogress =fn  上传请求和返回响应阶段都可以定义回调方法,特别是onprogress是完全新增的功能

　　　　xhr.upload.onprogress=function(e){

　　　　　　e.loaded/e.total　　　　

　　　　}

　　3.支持二进制数据,xhr.send(ArrayBuffer/Bolb)

 跨域通信

　postMessage+navigator方式

　　　　iframe跨域通信在高级浏览器上可以通过html5 postMessage接口实现，在ie6、7下可以通过navigator共享来解决。

　　　　参考链接：http://www.alloyteam.com/2013/11/the-second-version-universal-solution-iframe-cross-domain-communication/

　　postMessage通信

　　A主页面要跟B iframe嵌入页面通信

　　A.js:

　　　　document.getElementById("B").contentWindow.postMessage(data,domain);

　　B.js:

　　　　B.addEventListener("message",callbackB,true);

　　B iframe页面要跟A主页面通信

　　B.js:

　　　　window.top.postMessage(data,domain);

　　A.js:

　　　　window.addEventListener("message",callbackA,true);

　　window.name方式

　　　　实现跨域主动拉取页面数据，页面数据应该是无状态的静态数据。

　　　   事例：A页面存有一个UI组件的dom、js、css，B页面非同域情况下要获取A的ui组件信息我们通常会用<script>方式，但这一script里要包含html和css格式会很难看，通过A页面将UI数据存在window.name中，B页面创建　　　　   iframe先请求A页面获取window.name值后跳转到about:blank页，因为每个域名下都有个about:blank页面，这样B就能取得window.name，间接与A通信成功了。

　　　　但这种业务场景比较特殊，适用不广泛。参考链接：http://www.cnblogs.com/rubylouvre/archive/2012/07/30/2614904.html

web前端跨域方案的更多相关文章

  1. IIS反向代理解决Web前端跨域

    1.1 IIS7反向代理解决跨域问题IIS的版本必须是IIS7及其以上,否则没有反向代理功能:按照以下步骤来配置IIS,以实现反向代理: 1.2 配置步骤1. 下载安装ARR(Application ...

  2. 前端跨域方案-跨域请求代理（node服务）

    前端开发人员在本地搭建node服务,调用接口首先走本地服务,然后转发到api站点,node服务代码如下: var express = require('express'), request = req ...

  3. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  4. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  5. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  6. Web CORS 跨域方式使用方式

    CORS 参考 http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_ ...

  7. 前端跨域（二）：JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  8. JAVA解决前端跨域问题。

    什么是跨域? 通俗来说,跨域按照我自己的想法来理解,是不同的域名之间的访问,就是跨域.不同浏览器,在对js文件进行解析是不同的,浏览器会默认阻止,所以 现在我来说下用java代码解决前端跨域问题. 用 ...

  9. 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

    问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...

随机推荐

  1. Linux10.11-10.18）学习笔记（

    1Y86指令集体系结构 ISA:指令集体系结构,一个处理器支持的指令和指令的字节级编码 程序员可见的状态 Y86程序中的每条指令都会读取或修改处理器状态的某些部分,称为程序员可见状态.其中包括: 8个 ...

  2. 分享一个JavaScript嗅探工具Tracker

    今天发现一个好用的JS侦测工具,实时监测JS代码的使用效率,运行状态等. 期待插件作者添加更好的功能. 运行效果 运行效果如下(我把它放到标签里了): 1.点击Tracker书签工具 2.选择查看选项 ...

  3. Fiddler工具的基本功能

    Fiddler是一款用于网页数据分析,抓取的工具,里面集成了对网页强大的功能外,还可以通过设置,使其对手机的数据也可以进行抓取 Fiddler的原理是: 通过在客户端和服务器之间创建一个代理服务器来对 ...

  4. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

  5. Javascript基础系列之（六）循环语句（do while循环）

    do/while 循环是 while 循环的变体.该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环. 语法结构如下 do { statement } while ...

  6. DOM（六）事件类型

    对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件 <script language="javascript&quo ...

  7. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  8. 编写兼容性JS代码

    前文介绍了: 1 DOM四个常用的方法 2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编 ...

  9. 网站开发技巧, 使用byte[]持久化用户个性设置

    场景, 网站用户的个性化配置较多, 而且容易发生增加和改变, 如何在数据库保存是个问题. 为了避免数据库表字段经常变更, 我们设计在表增加一个varbinary(max)字段存储个性化配置. 个性化的 ...

  10. Moqui学习Day1

    运行时目录以及Moqui的xml配置文件 Moqui框架部署运行主要有三个核心部分: 可执行的war包文件 运行时目录 Moqui配置文件XML格式 不管怎么使用这个可执行的war文件,你必须拥有一个 ...