首页 > 代码库 > 跨域总结-JSONP和XHR2

跨域总结-JSONP和XHR2

说明:通过node.js的express框架简易搭建,和跨域有关内容均已标出。

jsonp方式

1.服务器搭建:

文件jsonpcli.js:作为客户端服务器   jsonp.html:请求页

技术分享

文件jsonpser.js:作为服务端服务器  process_get:响应页

技术分享

运行这两个文件,客户端端口为8082,服务端端口为8081,跨域。

技术分享

2.跨域请求

文件jsonp.html(三种方式任选一个)jsonp.html向process_get发出请求

技术分享

技术分享

技术分享

技术分享

在浏览器中输入网址:http://127.0.0.1:8082/jsonp.html

如图,请求成功!

技术分享


 

PS:后台打印的响应数据:

方式一($.ajax):

技术分享

方式二($.get):

技术分享

方式三(script标签):

技术分享

XHR2方式

文件jsonp.html和文件jsonpser.js,修改部分如下。

1.请求页ajax不用jsonp方式

技术分享

2.响应页头信息中加了字段"Access-Control-Allow-Origin"

技术分享

在浏览器中输入网址:http://127.0.0.1:8082/jsonp.html

如图,请求成功!

技术分享


 

PS1:后台打印的响应数据

技术分享

 

PS2:浏览器中查看HTTP头信息和响应数据

jsonp.html页

技术分享

process_get页

技术分享

技术分享技术分享

 

跨域总结-JSONP和XHR2