当前位置: 首页 > 编程日记 > 正文

AJAX跨域访问解决方案

Case I. Web代理的方式 (on Server A)

即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求A网站提供Web代理的支持,因此A网站与B网站之间必须是紧密协作的,且每次交互过程,A网站的服务器负担增加,且无法代用户保存session状态。

Case II. on-Demand方式 (on Server A)

MYMSN的门户就用的这种方式,不过 MYMSN中不涉及跨域访问问题。在页面内动态生成新的<script>,将其src属性指向别的网站的网址,这个网址返回的内容必须是合法的Javascript脚本,常用的是JSON消息。此方案存在的缺陷是, script的src属性完成该调用时采取的方式时get方式,如果请求时传递的字符串过大时,可能会无法正常运行。不过此方案非常适合聚合类门户使用。

   1: <html>
   2: <head>
   3: <script>
   1:  
   2: function loadContent()
   3: {
   4: var s=document.createElement('SCRIPT');
   5: s.src='http://www.anotherdomain.com/TestCrossJS.aspx?f=setDivContent';
   6: document.body.appendChild(s);
   7: }
   8: function setDivContent(v)
   9: {
  10: var dv = document.getElementById("dv");
  11: dv.innerHTML = v;
  12: }
</script>
   4: </head>
   5: <body>
   6: <div></div>
   7:  
   8: <input value="Click Me">
   9: </body>
  10: </html>
  11: //其中的www.anotherdomain.com/TestCrossJS.aspx是这样的,
  12: <script runat="server">
   1:  
   2: void Page_Load(object sender, EventArgs e)
   3: {
   4:   string f = Request.QueryString["f"];
   5:   Response.Clear();
   6:   Response.ContentType = "application/x-javascript";
   7:   Response.Write(String.Format(@"
   8:                    {0}('{1}');", 
   9:                    f,
  10:                    DateTime.Now));
  11:   Response.End();
  12: }
</script>

点击“Click Me”按钮,生成一个新的script tag,下载对应的 Javascript 脚本,结束时回调其中的setDivContent(),从而更新网页上一个div的内容。

Case III. iframe方式 (on Server A)

查看过醒来在javaeye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无法完成对父窗口效果的影响。

在页面内嵌或动态生成指向别的网站的IFRAME,然后这2个网页间可以通过改变对方的anchor hash fragment来传输消息。改变一个网页的anchor hash fragment并不会使浏览器重新装载网页,所以一个网页的状态得以保持,而网页本身则可以通过一个计时器(timer)来察觉自己anchor hash的变化,从而相应改变自己的状态。

1. http://domain1/TestCross.html:

   1: <html>
   2: <head>
   3: <script>
   1:  
   2: var url = "http://domain2/TestCross.html"
   3: var oldHash = null;
   4: var timer = null;
   5:  
   6: function getHash()
   7: {
   8: var hash = window.location.hash;
   9: if ((hash.length >= 1) && (hash.charAt(0) == '#'))
  10: {
  11: hash = hash.substring(1);
  12: }
  13:  
  14: return hash;
  15: }
  16: function sendRequest()
  17: {
  18: var d = document;
  19: var t = d.getElementById('request');
  20: var f = d.getElementById('alienFrame');
  21: f.src = url + "#" + t.value + "<br/>" + new Date();
  22: }
  23:  
  24: function setDivHtml(v)
  25: {
  26: var d = document;
  27: var dv = d.getElementById('response');
  28: dv.innerHTML = v;
  29: }
  30:  
  31: function idle()
  32: {
  33: var newHash = getHash();
  34:  
  35: if (newHash != oldHash)
  36: {
  37: setDivHtml(newHash);
  38: oldHash = newHash;
  39: }
  40:  
  41: timer = window.setTimeout(idle, 100);
  42: }
  43: function window.onload()
  44: {
  45: timer = window.setTimeout(idle, 100);
  46: }
</script>
   4: </head>
   5: <body>

请求:<input> <input value="发送" /><br/>
回复:<div></div>

<iframe src="http://domain2/TestCross.html"></iframe>

</body>
</html>

2. http://domain2/TestCross.html:

   1: <html>
   2: <head>
   3: <script>
   1:  
   2: var url = "http://domain1/TestCross.html"
   3: var oldHash = null;
   4: var timer = null;
   5:  
   6: function getHash()
   7: {
   8: var hash = window.location.hash;
   9: if ((hash.length >= 1) && (hash.charAt(0) == '#'))
  10: {
  11: hash = hash.substring(1);
  12: }
  13:  
  14: return hash;
  15: }
  16: function sendRequest()
  17: {
  18: var d = document;
  19: var t = d.getElementById('request');
  20: var f = parent;
  21: //alert(f.document); //试着去掉这个注释,你会得到“Access is denied”
  22: f.location.href = url + "#" + t.value + "<br/>" + new Date();
  23: }
  24:  
  25: function setDivHtml(v)
  26: {
  27: var d = document;
  28: var dv = d.getElementById('response');
  29: dv.innerHTML = v;
  30: }
  31:  
  32: function idle()
  33: {
  34: var newHash = getHash();
  35:  
  36: if (newHash != oldHash)
  37: {
  38: setDivHtml(newHash);
  39: oldHash = newHash;
  40: }
  41:  
  42: timer = window.setTimeout(idle, 100);
  43: }
  44:  
  45: function window.onload()
  46: {
  47: timer = window.setTimeout(idle, 100);
  48: }
</script>
   4: </head>
   5: <body>

请求:<input> <input value="发送" /><br/>
回复:<div></div>

</body>
</html>

两个网页基本相同,第一个网页内嵌一个IFRAME,在点击“发送”按钮后,会将文本框里的内容通过hash fragment传给IFRAME。点击IFRAME里的“发送”按钮后,它会将文本框里的内容通过hash fragment传给父窗口。因为是只改动了hash fragment,浏览器不会重新load网页内容,这里使用了一个计时器来检测URL变化,如果变化了,就更新其中一个div的内容 。

Case IV. 用户本地转储方式 (local)

IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置Interval进行轮询,获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF 也没有提供支持(无法通过Cookie跨域完成数据传递),致使这种技巧性的方式只能在IE中使用。

Case V: (其实还是在服务端A用iframe解决了与服务器B通信的问题)

要解决的问题:发生在用户提交网页 URL (还包括 Tag, Notes 等)给 Bookmark 服务器时。

关于 URL 的提交至少可以有三种方式:

1.       登陆 Bookmark 服务器的提交页面,将要收藏的 URL 通过该页面提交给服务器。

2.       安装浏览器插件,通过插件将 URL 提交给服务器。

3.       从 Bookmark 服务器动态加载 javascript 小工具到当前页面,通过它来完成提交工作。

第一种方式开发起来最简单,但对用户来讲比较麻烦,每次都需要先登陆 Bookmark 服务器才能完成提交;第二种方式我并不熟悉插件开发,而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小,又避免了每次登陆服务器的麻烦,所以最终采用它。第三种方式中动态加载的 javascript 小工具除了需要生成 UI 供用户填写信息( URL , tag , notes 等),当用户点击提交的时候,还要完成与服务器通信的功能。

跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。写过跨域访问 ajax 的朋友相信都遇到过被告知“没有权限”的情况。通过 XMLHttp 来发送数据给 Bookmark 服务器的尝试失败了。于是,看到网上的一些资料,我又开始尝试用 javascript 小工具在用户网页动态创建一个隐藏的 iframe, iframe 的 src 指向服务器的一个 servlet ,试图通过调用 iframe 中提供的 javascript 来完成与服务器的通信。但不幸的是,用户网页中的 javascript 代码访问 iframe 也被浏览器归为跨域访问(特指 iframe 的 src 指向其它网站的情形),尝试再次失败。

最终,在一篇文章中看到,与 iframe 不同,如果 A 网站从 B 网站加载 javascript , A 网站可以自由的访问该 javascript 的内容,并不会被浏览器认为是跨域访问。模仿刚才 iframe 的思路,当用户点击提交时,可以动态创建一个 javascript 对象,该对象的 src 指向 Bookmark 服务器的一个 servlet ,注意: URL 、 Tag 、 Notes 、 User 、Password 等信息被作为 src URL 参数传给服务器。请看下面的代码:

   1: var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +
   2:  
   3: "url=" + url_source + "&" + "title=" + title + "&" +
   4:  
   5: "tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;
   6:  
   7: url = encodeURI(url);
   8:  
   9: //Submit to server with a trick
  10:  
  11: var js_obj = document.createElement( "script" );
  12:  
  13: js_obj.type = "text/javascript" ;
  14:  
  15: js_obj.setAttribute( "src" , url);
  16:  
  17: //Get response from server by appending it to document
  18:  
  19: document.body.appendChild(js_obj);
  20:  

上面例子中, js_obj.setArrribute() 将信息作为 src 的 URL 参数提交给了 Bookmark servlet 。那么用户又如何取得服务器的响应信息呢?答案就是最末一行代码, servlet 的输出必须是 javascript 代码,它可以调用用户网页上的其他 javascript 函数,以及操作 dom 对象。下面的 servlet 代码生成了一个 javascript 函数调用:

out.write("onServerResponse(INADEQUATE_INFORMATION);");

document.body.appendChild(js_obj) 执行后 onServerResponse( INADEQUATE_INFORMATION) 就会得到执行,使客户网页响应服务器结果。这样一个完整的通信过程就完成了。

CaseVI:Tomcat + PHP + HTML(含JS)(on Server A)

服务器A上已经装好了Tomcat, 我们写一个test.html(含JS),再写一个PHP文件(由其来完成跨域通信要求)。

转载于:https://www.cnblogs.com/sunBolg/archive/2012/09/13/2683914.html

相关文章:

什么是生成器?

在python中&#xff0c; 要产生一个列表&#xff0c;可以这样写&#xff1a; a[] for i in range(10): a.append(i*2) 但是&#xff0c;这样挺麻烦的&#xff0c;产生一个列表&#xff0c;需要三行语句。所以&#xff0c;有人就想到能不能一行代码来表示呢&#xff1f;其实&a…

一项横断面人群研究中比较放射学阴性的中轴脊柱关节炎患者与强制性脊柱炎患者之间的差别...

原文 译文 Patients with Non-Radiographic Axial Spondyloarthritis Differ From Patients with Ankylosing Spondylitis in Several aspects– Results of a Cross-Sectional Cohort Study Uta Kiltz 1, Xenofon Baraliakos2, Pantelis Karakostas2, Manfred Igelmann…

day12-事务

day12总结[c1] 今日内容 l 事务 l 连接池 事务 事务概述 为了方便演示事务&#xff0c;我们需要创建一个account表&#xff1a; CREATE TABLE account( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(30), balance NUMERIC(10.2) ); INSERT INTO…

ThinkPHP基础概念

OOP 面向对象编程&#xff08;Object Oriented Programming&#xff0c;OOP&#xff0c;面向对象程序设计&#xff09;是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。OOP 达到了软件工程的三个主要目标&#xff1a;重…

008本周总结报告

这周主要做了下PTA的编程题目的练习和学习和了解了java的多线程&#xff0c;了解了进程和线程的定义&#xff0c;区别&#xff0c;联系等&#xff0c;并知道了多线程的利与弊&#xff0c;并了解了JVM下的多运行机制&#xff08;本质是CPU 对应用程序的快速换&#xff09;&#…

python3.8.5是python3吗_Python 升级到3.8.5

mac osx 安装最新版本的3.8.5 将/usr/local/bin目录下的python3.8和pip3.8复制一份并修改为python和pip。 修改python的路径&#xff0c;之后source文件。 输出requirements.txt到桌面 安装新版本的第三方库&#xff0c;我使用的第三方库很多&#xff0c;更新很慢。头大啊。 验…

不看后悔 如何删除WIN7的100M隐藏分区

http://notebook.it168.com/a2010/1101/1120/000001120453_2.shtml

tomcat下面web应用发布路径配置 ( 即虚拟目录配置 )

https://blog.csdn.net/AnQ17/article/details/52122236转载于:https://www.cnblogs.com/gangpao/p/9223504.html

strcpy +memcpy实现循环右移

#include<stdio.h>#include<assert.h>#include<string.h>char *strcpy(char*strDest,const char*strSrc){assert(strDest!NULL&&strSrc!NULL);char * addr strDest;while( *strSrc!\0)*strDest *strSrc;*strDest \0;return addr;}//循环移动steps…

python查看目录下的文件_Python——查看目录下所有的目录和文件

原博文 2019-05-06 19:31 − 写程序我们经常会遇到需要遍历某一个目录下的所有文件这个操作&#xff0c;然而python有现成的库&#xff0c;只需要2个循环就可以搞定。 1 import os 2 3 def all_path(dirname): 4 5 result []#所有的文件 6 7 for ma... 相关推荐 2019-12-10 14…

负载均衡策略深入剖析

在实际应用中&#xff0c;我们可能不想仅仅是把客户端的服务请求平均地分配给内部服务器&#xff0c;而不管服务器是否宕机。而是想使Pentium III服务器比Pentium II能接受更多的服务请求&#xff0c;一台处理服务请求较少的服务器能分配到更多的服务请求&#xff0c;出现故障的…

js 验证数据类型的4中方法

1.typeof 可以检验基本数据类型 但是引用数据类型&#xff08;复杂数据类型&#xff09;无用&#xff1b; 总结 &#xff1a; typeof 无法识别引用数据类型 包括 bull; 2.instanceof是一个二元运算符&#xff0c;左操作数是一个对象&#xff0c;右操作数是一个构造函数。如…

有关 ecshop 属性 {$goods.goods_attr|nl2br} 标签的赋值问题

1、nl2br() 函数在字符串中的每个新行 (\n) 之前插入 HTML 换行符 (<br />)。 2、 如果要向{$goods.goods_attr|nl2br}赋新值&#xff0c;这个值是保存在数据库中的&#xff0c;用户在商品页(goods.php)选择了商品属性(goods.attr)之后&#xff0c;点击"购买"就…

linux cp 强制覆盖_Linux基本操作教程

Linux基本操作教程点击蓝字关注我们01.Linux系统简介Linux&#xff0c;全称GNU/Linux&#xff0c;是一套免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹于1991年第一次释出&#xff0c;它主要受到Minix和Unix思想的启发&#xff0c;是一个基于…

火焰图(Flame Graphs)的安装和基本用法

火焰图&#xff08;Flame Graphs&#xff09; 一、概述&#xff1a; 火焰图&#xff08;flame graph&#xff09;是性能分析的利器&#xff0c;通过它可以快速定位性能瓶颈点。 perf 命令&#xff08;performance 的缩写&#xff09;是 Linux 系统原生提供的性能分析工具&#…

用TCP/IP进行网际互联一

地址解析协议ARP主机知道某个目的主机的IP就可以知道该目的主机的物理地址。改进ARP每个ARP广播分组中都包含有发送方自身的IP和物理地址的绑定&#xff0c;接收方在处理ARP分组时&#xff0c;先在自己的缓存中更新发送方IP到物理地址的绑定信息。ARP是一个隐藏底层网络物理编址…

【learning】矩阵树定理

问题描述 给你一个图&#xff08;有向无向都ok&#xff09;&#xff0c;求这个图的生成树个数    一些概念 度数矩阵&#xff1a;\(a[i][i]degree[i]\)&#xff0c;其他等于\(0\) 入度矩阵&#xff1a;\(a[i][i]in\_degree[i]\)&#xff0c;其他等于\(0\) 出度矩阵&#xff1…

各大知名企业的Research展示

大公司為了要拉開彼此的差距, 除了專注於目前的產品外, 都會為了未來做準備, 而這些研究通常都會做一個 Research 的專區來呈現成果, 如下述列表: Google ResearchYahoo! ResearchThe Facebook ProjectMicrosoft Research - Turning Ideas into Reality微軟亞洲研究院IBM Resea…

解决Eclipse添加新server时无法选择Tomcat7的问题

关闭Eclipse删除WorkSpace目录下/.metadata/.plugins/org.eclipse.core.runtime/.settings目录中的org.eclipse.wst.server.core.prefs和org.eclipse.jst.server.tomcat.core.prefs重启Eclipse转载于:https://www.cnblogs.com/tnsay/p/11466746.html

java 判断object类型_Java学习-方法与多态的学习心得

一 1.什么是方法重写方法的重写或方法的覆盖&#xff08;overriding&#xff09;子类根据需求对从父类继承的方法进行重新编写重写时&#xff0c;可以用super.方法的方式来保留父类的方法构造方法不能被重写 2.方法重写规则(1)方法名相同(2)参数列表相同(3)返回值类型相同或者是…

实习日志(2)2011-12-30

这篇文章并没有给出如何使用ResultSet的具体例子&#xff0c;只是从ResultSet的功能性上进行了详细的讲述。希望这篇文章对大家理解ResultSet能够有所帮助。下面就是这篇文章的具体内容。 结果集(ResultSet)是数据中查询结果返回的一种对象&#xff0c;可以说结果集是一个…

Javascript使用三大家族和事件来DIY动画效果相关笔记(一)

1.offset家族◆offsetWidth和offsetHeight表示盒子真实的宽度高度&#xff0c;这个真实的宽度包括 四周的边框、四周的padding、及定义的宽度高度或内容撑开的高度和宽度&#xff0c;可以用来检测盒子实际的大小&#xff0c;属性也是只读不可写的&#xff0c;返回的是不带单位的…

React 学习

一、搭建webpack4.x环境 1.创建工程文件夹&#xff08;ReactDemo&#xff09; 2.在工程文件夹下&#xff0c;快速初始化项目 npm init -y // 创建一个package.json文件 3.在工程文件夹下&#xff0c;创建源码文件夹&#xff08;src&#xff09;和编译打包文件夹&#xf…

python创建mysql数据库_python 怎么创建create mysql的数据库

展开全部 我采用的是MySQLdb操作的MYSQL数据库。先来一个简单的例2113子吧&#xff1a; import MySQLdb try: connMySQLdb.connect(hostlocalhost,userroot,passwdroot,dbtest,port3306) curconn.cursor() cur.execute(select * from user) cur.close() conn.close() except My…

杂谈---改变个人习惯

在提升编码技术的过程&#xff0c;自己也在生活中学到了很多。发现了自己的很多缺陷&#xff1a;不够勇敢、不够冒险、骄傲的无厘头&#xff0c;还有自己对情绪的掌控远没有自己想象的那么有火候&#xff0c;这段时间也得好好谢谢她&#xff0c;要不然我压根意识不到问题有多严…

ldconcig详解

ldconfig是一个动态链接库管理命令&#xff0c;为了让动态链接库为系统所共享,还需运行动态链接库的管理命令--ldconfigldconfig 命令的用途,主要是在默认搜寻目录(/lib和/usr/lib)以及动态库配置文件/etc/ld.so.conf内所列的目录下,搜索出可共享的动态链接库(格式如前介绍,lib…

第3章—高级装配—条件化的Bean

条件化的Bean 通过活动的profile&#xff0c;我们可以获得不同的Bean。Spring 4提供了一个更通用的基于条件的Bean的创建方式&#xff0c;即使用Conditional注解。 Conditional根据满足某个特定的条件创建一个特定的Bean。比如&#xff0c;当某一个jar包在一个类路径下时&#…

c#委托与事件(二)

这篇博客是在上篇的基础开始讲述了一下委托的一些用法&#xff0c;首先我举一个例子说明了一下前面章节的知识点&#xff0c;接下来我说了将方法作为参数传递的一个案例&#xff0c;接下来实现了一个委托实现冒泡排序的方法&#xff0c;如果你们和我一样正在学习&#xff0c;希…

互联网公司java面试题(一)

1、JDK和JRE区别&#xff1f; JDK是整个JAVA的核心&#xff0c;包括了Java运行环境JRE&#xff0c;一堆Java工具和Java基础的类库。通过JDK开发人员将源码文件(java文件)编译成字节码文件(class文 件)。JRE是Java运行环境&#xff0c;不含开发环境&#xff0c;即没有编译器和调…

python属于哪种类型的语言_Python是什么类型的编程语言,有什么特性

由于近几年人工智能的不断发展&#xff0c;Python也跟着火了&#xff0c;因为Python是深度学习技术的主流应用编程语言。同时它的应用场景很多&#xff0c;被称为“胶水语言”。下面给大家科普一下Python这门神奇的编程语言&#xff0c;以及语言特性&#xff0c;帮大家更清晰的…