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

所属分类: 网络编程 / JavaScript 阅读数: 1503
收藏 0 赞 0 分享
这两天需要实现三级域名直接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到静态化页面跨域访问服务器动态类容问题圆满解决!
更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多