星空网 > 软件开发 > Java

实例操作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的异步请求


 

//// true:异步请求 //监听onreadystatechange事件句柄 //设置timeout,回调  var xhr = new '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);

 

谷歌下请求没问题,因为我设置对浏览器设置了跨域参数。

但是火狐确是不行的,因为是跨域。

 

实例操作JSONP原理

 

4.get的xhr的同步请求


 

//不能设置超时 因为系统会默认设置为0  var xhr = new '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]);

实例操作JSONP原理

 

请求成功了,但是好像跟我们想象的是有点区别的?因为我们常见的返回是这样的。

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)  }

实例操作JSONP原理

 

实例操作JSONP原理

 OK,大功告成!

 

总结:jsonp的跨域使用的就是script可以跨域的特性(还有其他很多标签都可跨域,如img)。通过服务端跟前端的配合使得返回的js是我们定义的方法,以便可以在前端调用执行。

 




原标题:实例操作JSONP原理

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流