jsonp学习二验证跨域数据访问

最新推荐文章于 2024-04-04 04:13:10 发布

会编程的阿强

最新推荐文章于 2024-04-04 04:13:10 发布

阅读量311

点赞数

分类专栏： jsonp

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/53585704

版权

jsonp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

假入我们有一个远程的服务器，域名是http://www.xukaiqiang.com

我们在这个远程服务器的根目录下面添加一个romote.js文件，然后我们使用本地服务器进行获取远程服务器的数据。

remote.js文件中的内容很简单

alert("I'm a remote file!");

然后我们在本地服务器中的jsp页面中进行引用

<script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script>

当我们访问本地jsp的时候，就可以看到，页面中弹出 I'm a romote file!。

说明了，本地服务器通过<script>标签可以访问远程服务器的js。

然后我们对代码进行改进一下

remote.js文件中的内容改为

localHandler({"result":"I'm remote data!"});

本地服务器中的jsp页面中改为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>远程js调用本地函数测试</title>  
<script type="text/javascript">  
    //回调方法
    var localHandler = function(data) {  
        alert('Im local js method,called by remote js ,return data is":"' + data.result);  
    };  
</script>  
<script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script>  
</head>  
<body>  
  
</body>  
</html>

最终，本地服务器会弹出I' m remote data!

证明了，本地服务器可以通过script标签跨域访问远程服务器的数据。

为了更灵活的调用远程服务器上面的数据，我们不会像上面所讲的那样，在远程服务器上面新建一个remote.js文件，我们使用例如servlet，接收本地服务器传递的参数，动态产生js脚本。例如：我获取远程服务器上面的所有的男同学的信息，我们本地服务器就传递一个性别为男的参数，服务器就会根据这个参数动态生成js文件，然后返回到本地来，实现更灵活地跨域访问。