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. IOS开发之—— 上传头像的使用

    static NSString *const uploadSuccess = @"更改头像成功"; @interface DMAccountInformationViewContr ...

  2. C# 有关命名法

    常用的几种:匈牙利命名法,骆驼命名法,帕斯卡(pascal)命名法就说了. 总结下VS所用的标准命名: 1 ADO.NET 命名规范 数据类型 数据类型简写 标准命名举例 Connection con ...

  3. GCC：条件判断中赋值语句和函数结尾时无返回值的警告

    有下面非常经典的一个字符串复制程序. test1.c #include <stdio.h> int main() { char str_t[]="This String come ...

  4. 在线富文本编辑器FckEditor配置（.Net Framework 3.5）

    进入FCKeditor文件夹,编辑 fckconfig.js 文件.1.上传设置  .  var _FileBrowserLanguage         = 'php' ;         // a ...

  5. margin的理解

    1.盒子模型 在进行网页设计的时候,我们使用的是盒子模型,其内容如下: 整个网页就是大盒子套小盒子,小盒子又套更小的盒子来实现的.但是在做网页设计时总是搞不清margin和padding的使用方式,在 ...

  6. jQuery使用之（三）处理页面的元素

    对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.本节将介绍一些常用的内容. 1.直接获取 ...

  7. ios------进度轮

    UIActivityIndicatorView实例提供轻型视图,这些视图显示一个标准的旋转进度轮.当使用这些视图时,最重要的一个关键词是小.20×20像素是大多数指示器样式获得最清楚显示效果的大小.只 ...

  8. java线程技术6_线程的挂起和唤醒[转]

    转自:http://blog.chinaunix.net/uid-122937-id-215913.html 1. 线程的挂起和唤醒      挂起实际上是让线程进入“非可执行”状态下,在这个状态下C ...

  9. Photoshop之渐变工具使用

    最上面两个游标控制不透明度 下面两个控制渐变位置 点击游标可以设置颜色 基于每个游标进行操作

  10. python_元组

    元组 元组是用圆括号括起来的,其中的元素之间用逗号隔开.(都是英文半角) >>># 变量引用 str >>> s = "abc" >> ...