• 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 函数里.(动态执行回调函数)

  • 相关阅读:
    nginx 服务企业应用
    3D模型展示以及体积、表面积计算
    php实现MySQL读写分离
    three.js实现3D模型展示
    thinkphp5.1+think-queue
    GIT记住远端仓库地址密码
    php实现采集(仅做参考)
    phpStudy集成环境apche+openssl配置本地https
    HTTP与HTTPS区别
    在父页面用Iframe加载子页面时,将父页面的title替换成子页面title
  • 原文地址:https://www.cnblogs.com/DaBing0806/p/4710645.html
Copyright © 2020-2023  润新知