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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
javascript实现2048游戏示例
May 04 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
vue实现购物车选择功能
Jan 10 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
精通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
PHP 日,周,月点击排行统计
2012/01/11 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
浅析php工厂模式
2014/11/25 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
python 字符串格式化代码
2013/03/17 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
Python API自动化框架总结
2019/11/12 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
《童年》教学反思
2014/02/18 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
行政复议决定书
2015/06/24 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android
DQL数据查询语句使用示例
2022/12/24 MySQL