码迷,mamicode.com
首页 > Web开发 > 详细

跨域总结-JSONP和XHR2

时间:2016-12-16 22:20:19      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:jsonp   头信息   xhr   image   control   http   json   r.js   line   

说明:通过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

标签:jsonp   头信息   xhr   image   control   http   json   r.js   line   

原文地址:http://www.cnblogs.com/taoxiaodan/p/6188342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!