jquery 跨域访问问题解决方法(笔记)_jquery
程序员文章站
2022-06-08 10:15:00
...
这两天需要实现三级域名直接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 = "
$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 = "
this is test
$arr['str'] = $str;
$json = json_encode($arr); //用Json_encode函数处理php的数组
echo $_GET['callback']."(".$json.")";
到此通过三级域名URLREWRITE到静态化页面跨域访问服务器动态类容问题圆满解决！