jquery 跨域访问问题解决方法(笔记)
更新时间：2011年06月08日 01:26:48 作者：
对于js跨域访问，在先前也曾碰到过，但可能并没有认真去对待，可能查看过相关资料，但当着两天再次碰到这个问题时，走了不少弯路才找到问题原因。记下这次解决过程，为自己不再强大的记忆力默哀一下。
这两天需要实现三级域名直接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到静态化页面跨域访问服务器动态类容问题圆满解决！
说到这里，也许和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到静态化页面跨域访问服务器动态类容问题圆满解决！
您可能感兴趣的文章:
- 利用nginx解决cookie跨域访问的方法
- 用jQuery与JSONP轻松解决跨域访问的问题
- jQuery 跨域访问问题解决方法
- Ajax实现跨域访问的三种方法
- Javascript 跨域访问解决方案
- js iframe跨域访问(同主域/非同主域)分别深入介绍
- Ajax 设置Access-Control-Allow-Origin实现跨域访问
- jquery下利用jsonp跨域访问实现方法
- JQuery Ajax 跨域访问的解决方案
- AJAX javascript的跨域访问执行
- 解决AJAX中跨域访问出现''没有权限''的错误
- Python的Django应用程序解决AJAX跨域访问问题的方法
- AJAX的跨域访问-两种有效的解决方法介绍
- 深入浅析同源策略和跨域访问
- 关于Iframe如何跨域访问Cookie和Session的解决方法
- js实现跨域访问的三种方法
- AJax与Jsonp跨域访问问题小结
- 浅谈Ajax跨域Session和跨域访问
- 解决nginx/apache静态资源跨域访问问题详解
相关文章
此作品是一款jquery+html5实现的时钟插件clock，效果非常棒，推荐给大家参考下，小伙伴们可以直接拿走使用。2015-04-04
jQuery each()小议，对于具体的使用方法， 可以参考脚本之家的下一篇文章。2010-03-03
这篇文章主要介绍了jquery简单实现图片切换效果的方法,涉及jQuery链式操作及图片操作的相关技巧,需要的朋友可以参考下2015-05-05
下面小编就为大家带来一篇jQuery用noConflict代替$的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
需要知道iframe何时加载完成，用JQuery很简单就能实现，具体如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。2010-12-12
Bootstrap插件非常的好用了，今天小编通过本教程给大家介绍Bootstrap中点击按钮后变灰并显示加载中实例代码，非常不错，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了JQuery基于FormData异步提交数据文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了jquery+css实现动感的图片切换效果，效果实现很精致，动画简洁大方，推荐给大家，感兴趣的小伙伴们可以参考一下2015-11-11
IE中的File域无法清空，可能你看到的是已经没有值了，其实它还是存在的，下面有个不错示例，大家可以参考下2014-04-04
最新评论