js跨域问题

问题重现

在我们的WEB项目中，JS文件保存在客户端，有时候某个JS函数需要请求服务端的数据，如ajax动态请求服务器端的数据，客户端和服务器端不在一个主机上，这个时候就有这样的一个问题：JS跨域请求。

 

问题原因

同源策略：同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

这个策略可以追溯到 Netscape Navigator 2.0。如果两个页面的协议、端口（如果指明了的话）和主机名都相同，Mozilla 认为这两个页面拥有相同的源。

 

如何解决

我们关键的问题是，不能通过JS请求服务器上面的数据，那么还有没有另一种方法可以代替呢？

我们发现，通过script标签中的src,可以请求到user模块中index方法返回的数据，这个src标签，不受同源协议的限制。

<script type="text/javascript" src="http://192.168.114.3/user/index"></script>

　

最终的目的是保证，本地的JS函数要处理服务器端返回的数，所以，需要保证服务器返回的数据有一定的格式！

例如可是是这样的格式：

public  function index()
{
   echo "testJS('this data is from server')";
}

　　

然后，在本地js文件中实现testJs（data）这个函数：

<script type="test/javascript">
testJs(data)
{
   alert(data);
}

</script>

　　

这样当数据返回的时候，就可以执行本地JS文件中 testJS(data)方法了。

 

在jquery中，已经给我集成这样的函数 JSONP  用于解决跨域问题 JSONP的原理是：在创建一个回调函数，然后再远程服务器上调用这个函数，然后以JSON的数据形式返回到客户端，在客户端执行这个函数。

客户端JS代码这样写：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
   $.ajax({
        url:"http://localhost:20002/MyService.ashx?callback=?",   
        dataType:"jsonp",
        jsonpCallback:"person",
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
   });
</script>

　　

服务器端：

public function index()
{
  $jsonData ={"name": "sunli", "sex" : "man"};

echo $_GET['callback']. "(". $jsonData . ")"; 
}