zoukankan      html  css  js  c++  java
  • AJAX 跨域请求

    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

    如何使用JSONP?

    下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

    Html代码  
    1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
    2. <script type="text/javascript">  
    3.     function jsonpCallback(result) {  
    4.         //alert(result);  
    5.         for(var i in result) {  
    6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
    7.         }  
    8.     }  
    9.     var JSONP=document.createElement("script");  
    10.     JSONP.type="text/javascript";  
    11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
    12.     document.getElementsByTagName("head")[0].appendChild(JSONP);  
    13. </script>  

    服务端PHP代码 (services.php):

    Php代码  
    1. <?php  
    2.   
    3. //服务端返回JSON数据  
    4. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
    5. $result=json_encode($arr);  
    6. //echo $_GET['callback'].'("Hello,World!")';  
    7. //echo $_GET['callback']."($result)";  
    8. //动态执行回调函数  
    9. $callback=$_GET['callback'];  
    10. echo $callback."($result)";  

    Jsonp原理: 
    首先在客户端注册一个callback, 然后把callback的名字传给服务器。

    此时,服务器先生成 json 数据。
    然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

    最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

    客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

  • 相关阅读:
    XCOJ1250: 语言战争
    XCOJ 1249: 全自动奖学金计算系统
    杭电 2159 fate(二维背包费用问题)
    杭电 1059 Dividing
    背包问题的模版
    Shell解析器
    Shell简介
    SpringBoot配置文件占位符
    @ImportResource、@Bean
    @ImportResource注解;
  • 原文地址:https://www.cnblogs.com/DaBing0806/p/4710645.html
Copyright © 2011-2022 走看看