【黑马程序员济南中心】jsonp解决跨域访问问题的实现过程

使用jQuery的ajax一步请求调用百度LBS云服务会出现跨域问题,解决方案是使用$.getJSON('LBS云服务请求路径&callback=?',function(json){})来完成请求发的发起和响应接收,本文通过几个简单的示例来说明JSONP的基本原理。

    我们在通过ajax异步请求跨域请求json数据都会出现跨域报错,但是通过标签访问远程资源却不会出现跨域报错问题,那么,是否可以使用模拟标签请求方式将json数据从远程服务器上加载过来并提供给本地js代码使用?下面来做个演示:

    提前准备好一个web项目作为远程服务数据提供方,项目访问端口为9004,项目目录如下:


【黑马程序员济南中心】jsonp解决跨域访问问题的实现过程_第1张图片

    准备其他项目作为客户端请求方(本文中我使用几个静态页面作为客户访问端)

    【演示一】使用标签测试远程加载服务端car1目录下的js文件

    服务端blueCar.js的代码仅有一行:

alert("我是蓝色的车");

    客户端加载服务端js代码如下:

   

当在浏览器中打开该静态页面(直接访问页面路径 /bos_map/src/main/webapp/jsonP/jsonp_demo1.html)代码,会弹出窗口如下,

【黑马程序员济南中心】jsonp解决跨域访问问题的实现过程_第2张图片

也就是说,我们在客户端jsonp_demo1.html中通过script标签加载的远程服务端js代码被执行了,那么,可以想象,能否让远程服务端的js代码把json数据传过来呢?

    【演示二】利用json被js原生支持,从远程服务端加载json数据

我们先来看一下客户端代码:

在代码中,通过script标签加载远程服务器的redCar.js文件,在代码中还有一个JS函数,其中有一个data参数,下面我们来准备远程服务端的代码:

myOwnFun({"id":1,"value":"我是红色的车"})

【黑马程序员济南中心】jsonp解决跨域访问问题的实现过程_第3张图片

这样,我们就可以通过script表现远程访问服务端的响应数据了,只需要远程服务器将函数名和数据拼接成字符串交给客户端的script标签加载即可

    【演示三】访问远程服务端的servlet

准备客户端代码如下:

你可能感兴趣的:(【黑马程序员济南中心】jsonp解决跨域访问问题的实现过程)