首页 > 代码库 > 实例操作JSONP原理
实例操作JSONP原理
絮语:按这个步骤走，你就会明白JSONP是什么鬼。
1.工程目录:
ng-mywork 80 demo.html 90 test.js
2.nginx的server配置
server { listen 80; server_name scan_80; root E:/ng-mywork/80; location / { } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } server { listen 90; server_name scan_90; root E:/ng-mywork/90; location / { } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
配置了两个域名不同，端口不同的域。
不会配置？
请看:nginx+php的使用
nginx的使用
3.get的xhr的异步请求
//XMLHttpRequest // true:异步请求 //监听onreadystatechange事件句柄 //设置timeout,回调 var xhr = new XMLHttpRequest(); xhr.open(‘get‘, ‘http://scan_90:90/test.js‘, true); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ alert("请求成功!") } } } xhr.ontimeout = function(){ alert("请求超时") } xhr.timeout = 1000; xhr.send(null);
谷歌下请求没问题，因为我设置对浏览器设置了跨域参数。
但是火狐确是不行的，因为是跨域。
4.get的xhr的同步请求
//不能设置超时 因为系统会默认设置为0 var xhr = new XMLHttpRequest(); xhr.open(‘GET‘, ‘http://scan_90:90/test.js‘, false); xhr.send(null); if(xhr.readyState === 4){ if(xhr.status === 200){ alert("请求成功") }
注意这里的超时注释，同步是不能设置的。
5.使用jsonp进行跨域解决不能跨域请求的问题
//进行jsonp跨域请求 var script = document.createElement(‘script‘); script.src = ‘http://scan_90:90/test.js?callback=dothings‘; script.type = "text/javascript"; document.body.insertBefore(script, document.body.children[0]);
请求成功了，但是好像跟我们想象的是有点区别的?因为我们常见的返回是这样的。
dothings([1,2,3]);//然后我们可以调用:function dothings(arr){ //....}
那是因为这不只是前端做的，还有服务端也需要做些修改来配合返回值。
增加php文件:
<?php $callback = $_GET[‘callback‘]; $data = array(‘1‘,‘2‘,‘3‘); echo $callback.‘(‘.json_encode($data).‘)‘;?>
改下js:
var script = document.createElement(‘script‘); script.src = ‘http://scan_90:80/test.php?callback=dothings‘; script.type = "text/javascript"; document.body.insertBefore(script, document.body.children[0]); //请求完毕后立即执行dothings function dothings(arr) { console.log(arr) }
OK,大功告成!
总结:jsonp的跨域使用的就是script可以跨域的特性（还有其他很多标签都可跨域,如img）。通过服务端跟前端的配合使得返回的js是我们定义的方法，以便可以在前端调用执行。
实例操作JSONP原理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。