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. Linux及安全课程——相关链接总结

    附录:学习笔记链接总结 MOOC课程学习笔记与实验: 第一周:计算机是如何工作的 第二周:操作系统是怎么工作的 -- 一个简单的时间片轮转多道程序内核代码及分析 第三周:构造一个简单的Linux系统M ...

  2. 【iOS功能实现】之利用UIDocumentInteractionController打开和预览文档

    iOS提供了使用其他app预览文件的支持,这就是Document Interaction Controller.此外,iOS也支持文件关联,允许其他程序调用你的app打开某种文件.而且,从4.2开始, ...

  3. 零散知识记录-Jira的安装

    Jira不支持openjdk,在linux下需要卸载后,装个jdk才行.

  4. [转]Extundelete--数据恢复软件

    前言 作为一名运维人员,保证数据的安全是根本职责,所以在维护系统的时候,要慎之又慎,但是有时难免会出现数据被误删除的情况,在这个时候该如何快速.有效地恢复数据显得至关重要,extundelete就是其 ...

  5. 【MyEclipse 2015】 逆向破解实录系列【终】（纯研究）

    声明 My Eclipse 2015 程序版权为Genuitec, L.L.C所有. My Eclipse 2015 的注册码.激活码等授权为Genuitec, L.L.C及其付费用户所有. 本文只从 ...

  6. Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio

    Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问 ...

  7. Flex ObjectHandles 构建绘图程序!

    模型 主画布组件:com/components/graph/GraphContainer.mxml <?xml version="1.0" encoding="ut ...

  8. Qt webkit插件相关知识

    1.在Qt中使用 WebKit 浏览器核心 使用 QtWebKit 需要在工程文件(*.pro)中加入: 1.           QT +=webkit   2.           QT += n ...

  9. jQuery 选择器语法

    jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...

  10. 【HDU 5115】Dire Wolf

    题意 n只狼排成一行,每次击败第i只狼需要ai+bi-1+bi+1代价,击败后,相当于出列了,与i相邻两只狼成了相邻的.求击败所有狼的最小总代价. 分析 我开始一直以为是个环TAT.. 区间dp,dp ...