jquery 跨域访问问题解决方法(笔记)


Posted in Javascript onJune 08, 2011

这两天需要实现三级域名直接url rewrite到网站静态页面,如 http://123.456.789.com/ UrlRewrite到http://www.789.com/news/123.html

说到这里,也许和js跨域访问没有半点关系,在脑海里排列这的问题都是和UrlRewrite相关的。好吧现在URLRewrite一切就绪,直接在浏览器地址栏中输入http://123.456.789.com/ 会发现,这个在地址栏直接通过http://www.789.com/news/123.html来访问的页面出现了异常,网页上的图片和样式还有JS好像都失去了作用。

看看两个地址栏中的URL, 突然拍拍自己脑袋,有点思路了。原来这个页面的源代码中对图片、CSS、JS 都是通过相对路径来请求的。当然这在 直接访问http://www.789.com/news/123.html的路径是不会有问题的,但是当使用http://123.456.789.com/访问后 看看地址栏两个URL 明显路径已经完全不一样了,比如images/1.gif 在1中 相当于请求http://www.789.com/news/1.gif 而再2中变成什么http://123.456.789.com/images/1.gif很显然这个图片你是永远也请求不到。因为这个路径下你永远也找不到这个图片。好了为了简便,我们不用网上别人介绍的很多种方法,就用绝对路径解决吧。好的,一切看起来这么的自然,这么的畅快。但是真正的麻烦还在后边。

一直到这里,好像和我们的标题都不搭噶。别急,问题总是解决一个再冒出第二个。

首先讲讲我这个页面吧,这个页面是通过程序将本来动态呈现的东西进行了静态化,但是静态化页面里边又必须显示一些变化的信息,这里很多人可能会想到使用IFRAME来解决,但是这样的解决办法不是我想使用的,1.IFRAME比起其它方法,效率低,2.IFRAME对爬行蜘蛛不友好。所以我这里最开始是使用JQUERY的load函数还直接去请求动态页面然后将返回来的动态信息显示在静态化页面里。好了,讲到这里可能有些朋友已经知道为什么这篇日记的名字叫“jquery跨域访问问题”了。

首先看看 jquery load函数里我的参数$("#head").load("http://www.cnblogs.com/project/ajax.php"{"Action":"head"}); 当然通过上边的教训 已经将参数换成了$("#head").load("http://www.789.com/project/ajax.php"{"Action":"head"}); 但是还是出现了“jquery.js 138行无权访问”直接跑去查看juqery138行 哄哄原来是load函数这里出问题(没看懂源码,说实话太折磨人了,一堆压缩后的JS代码看得人想死)好吧去网上谷歌一下,有几个人的答案引起了我的注意。他们都说这是JS跨域操作的问题。而本身JS是无法直接跨域操作的。再联系自己三级域名URLRewrite 再想想跨域的问题,三级域名下 所在的域是789 下的456 下的123 而本身请求的是789.com域名下 所以这不是跨域是什么呢?豁然开朗。我确定我找到问题所在了。

继续谷歌,很多人推荐jquery getJson使用回调函数解决,关于原理等解决了再慢慢研究,呵呵继续搜http://blog.ossxp.com/2010/02/462/这篇文章很好给了我很大帮助,直接在自己项目中还是依葫芦画瓢。问题解决!

 html页面 jquery代码

$.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?", 
function(data){ // 往后台传递的参数1; 
var html = decodeURI(data.str) 
$('#head').html(html); //调用用来显示内容的div 
});

服务器端PHP代码
$str = "<ul> 
this is test 
</ul>"; 
$arr['str'] = $str; 
$json = json_encode($arr); //用Json_encode函数处理php的数组 
echo $_GET['callback']."(".$json.")";

到此通过三级域名URLREWRITE到静态化页面跨域访问服务器动态类容问题圆满解决!
Javascript 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
精通Javascript系列之数据类型 字符串
Jun 08 #Javascript
精通Javascript系列之Javascript基础篇
Jun 07 #Javascript
精通Javascript系列之数值计算
Jun 07 #Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 #Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 #Javascript
JqGrid web打印实现代码
May 31 #Javascript
16个最流行的JavaScript框架[推荐]
May 29 #Javascript
You might like
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php实现算术验证码功能
2018/12/05 PHP
永不消失的title提示代码
2007/02/15 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js实现进度条的方法
2015/02/13 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
纪念一二九运动演讲稿
2014/09/16 职场文书
优秀教师推荐材料
2014/12/16 职场文书
质量保证书
2015/01/17 职场文书
公司地址变更通知
2015/04/25 职场文书
爱护环境建议书
2015/09/14 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL