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. [CareerCup] 14.5 Object Reflection 对象反射

    14.5 Explain what object reflection is in Java and why it is useful. Java中的对象反射机制可以获得Java类和对象的反射信息,并 ...

  2. swift第一季基础语法

    同: 一.基础 同: 1常量和变量 2数据类型和数据类型转换 3别名 不同: 1可选类型optional 2BOOL类型 3元组类型 4断言Assertion 二.基本操作符 同: 1赋值和算术运算及 ...

  3. i春秋——春秋争霸write up

    i春秋--春秋争霸write up 第一关 题目给出一张图 提示中,这种排列源于古老的奇书,暗含了两个数字,可以得出第一关的答案是两个数字 百度识图来一发, 得到图中排列是来自于洛书,点开洛书的百度百 ...

  4. ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC ...

  5. C#基础之Attribute

    1.什么是Attribute 特性简单点理解就是为目标元素添加一些附加信息,这些附加信息我们可以在运行期间以反射的方式拿到.目标元素指的是程序集.模块.类.参数.属性等元素,附加信息指的是特性类中的成 ...

  6. Unity3D 游戏计时功能实现

    最近工作实在是太忙了,没办法认真写博客,但是还是要好好记录下日常的学习. 需求 各类游戏中都大量运用到计时功能,不管是直接显示的在前端UI,还是后台运行. 思路 Unity中提供了Time类可以方便的 ...

  7. IE10访问apache 2.4会奇慢的解决办法

    Windows版的apache 2.4. IE10访问apache 2.4会特别慢.有时Apache挂起了.只好重新开apache,但是重开后,也会好景不长,刚处理几个请求,就又变得奇慢了.Firef ...

  8. 小记：事务(进程 ID 56)与另一个进程被死锁在 锁 | 通信缓冲区 资源上，并且已被选作死锁牺牲品。

    今天在做SQL并发UPDATE时遇到一个异常:(代码如下) //Parallel 类可产生并发操作(即多线程) Parallel.ForEach(topics, topic => { //DBH ...

  9. ASP.NET加JS方式

    一.如果是asp.net中的控件有OnClientClick事件,可以在控件中直接加 OnClientClick--客户端点击事件 二.如果asp.net中的控件没有OnClientClick事件,可 ...

  10. Linux_Centos使用mutt+msmtp发送邮件

    一.软件环境 1.centos 6.5 2.msmtp-1.4.32 3.Mutt 1.5.20 (2009-12-10) 二.实现步骤 1.安装配置Mutt $ yum install mutt - ...