转自：温德馨的博客，哈哈，向东的博客早就O了，链接还是xiangdong.org，哎，我转了一席，他对mysql的io调度和DAS、NAS、SAN存储系统完全分析都有研究和关注，哈哈
一直对JS的跨域概念很迷惑，记得是在刚学ajax的时候才了解了一下这个概念，后来就再没有接触。主要工作上是做PHP为主，前端的东西几乎不需要插手。今天看了膘叔的一篇文章《孟宪会之AJAX（XMLHttpRequest）进行跨域请求方法详解》，一直是知道跨域会存在问题，但是自己就没有动过手体验一下具体会造成什么问题，于是决定试验一下。在blog服务器上写了个test.php测试脚本
<?php
$data = array('status' => 1, ‘msg’ => ‘hello’);
echo json_encode($data);
?></p>
<p>
前端测试页面
<script>
var xhr = new XMLHttpRequest();
var url = "http://jackywdx.cn/test.php";
function test(){
if(xhr)
{
xhr.open('GET', url, true);
xhr.onreadystatechange = handler;
xhr.send();
}
}
function handler(evtxhr)
{
if(xhr.readyState == 4){
if(xhr.status == 200){
var re = xhr.responseText;
alert(re);
}else{
alert('status not 200');
alert(xhr.status);
}
}else{
alert('readyState not 4');
alert(xhr.readyState);
}
}</p>
<p><body onload="test()">
hello
</body>
在本地访问，http://test.cn/test.html 结果是失败，没有alert出responseText; 在test.php文件里面增加一句： header(”Access-Control-Allow-Origin:http://test.cn”); 这样就可以了。我用的FF版本是3.5.7，所以支持这个Access-Control-Allow-Origin HTTP头部参数。用HTTPFOX抓包看到结果：
(Request-Line)
GET /test.php HTTP/1.1
Host jackywdx.cn
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Keep-Alive 300
Connection keep-alive
Referer http://test.cn/test.html
Origin http://test.cn
(Status-Line) HTTP/1.1 200 OK
Server nginx/0.7.61
Date Fri, 29 Jan 2010 02:43:39 GMT
Content-Type text/html
Transfer-Encoding chunked
Connection close
X-Powered-By PHP/5.2.6
Access-Control-Allow-Origin http://test.cn
Author jackywdx
X-Via US_RASHOST_VPS
Content-Encoding gzip
解决JS跨域问题还有一些解决办法：
如果是同一主域的话可以设置document.domain
另外还可以通过flash来作为中转角色，flash跨域可以通过crossdomain.xml来解决，不过这种方法速度会比较慢。毕竟多了一层中间层。
还有一种比较土的方法就是在相册的域下面做一个同样的接口-.-
一直对JS的跨域概念很迷惑，记得是在刚学ajax的时候才了解了一下这个概念，后来就再没有接触。主要工作上是做PHP为主，前端的东西几乎不需要插手。今天看了膘叔的一篇文章《孟宪会之AJAX（XMLHttpRequest）进行跨域请求方法详解》，一直是知道跨域会存在问题，但是自己就没有动过手体验一下具体会造成什么问题，于是决定试验一下。在blog服务器上写了个test.php测试脚本
<?php
$data = array('status' => 1, ‘msg’ => ‘hello’);
echo json_encode($data);
?></p>
<p>
前端测试页面
<script>
var xhr = new XMLHttpRequest();
var url = "http://jackywdx.cn/test.php";
function test(){
if(xhr)
{
xhr.open('GET', url, true);
xhr.onreadystatechange = handler;
xhr.send();
}
}
function handler(evtxhr)
{
if(xhr.readyState == 4){
if(xhr.status == 200){
var re = xhr.responseText;
alert(re);
}else{
alert('status not 200');
alert(xhr.status);
}
}else{
alert('readyState not 4');
alert(xhr.readyState);
}
}</p>
<p><body onload="test()">
hello
</body>
在本地访问，http://test.cn/test.html 结果是失败，没有alert出responseText; 在test.php文件里面增加一句： header(”Access-Control-Allow-Origin:http://test.cn”); 这样就可以了。我用的FF版本是3.5.7，所以支持这个Access-Control-Allow-Origin HTTP头部参数。用HTTPFOX抓包看到结果：
(Request-Line)
GET /test.php HTTP/1.1
Host jackywdx.cn
User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Keep-Alive 300
Connection keep-alive
Referer http://test.cn/test.html
Origin http://test.cn
(Status-Line) HTTP/1.1 200 OK
Server nginx/0.7.61
Date Fri, 29 Jan 2010 02:43:39 GMT
Content-Type text/html
Transfer-Encoding chunked
Connection close
X-Powered-By PHP/5.2.6
Access-Control-Allow-Origin http://test.cn
Author jackywdx
X-Via US_RASHOST_VPS
Content-Encoding gzip
解决JS跨域问题还有一些解决办法：
如果是同一主域的话可以设置document.domain
另外还可以通过flash来作为中转角色，flash跨域可以通过crossdomain.xml来解决，不过这种方法速度会比较慢。毕竟多了一层中间层。
还有一种比较土的方法就是在相册的域下面做一个同样的接口-.-
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/2683/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
北京地铁情况，2009-2015
用rsync对网站进行镜像备份评论列表
2010-2-4 15:01 | 孩子
留爪。
分页： 1/1 
1 
1
