zoukankan      html  css  js  c++  java
  • jsonp理解

    jsonp理解

    一.jsonp是什么?

        jsonp是一种非官方的跨域请求协议,通俗的说就是数据交互的方法,他解决了ajax不能跨域请求的困境。他与json完全不是一回事,json是一种数据传输的格式,jsonp是传输的渠道

    二.原理

      1.我们在使用javascript的引入外部js文件时,<script>标签有个src的属性,用于引入外部的.js文件。我们在使用的时候,这个src的文件路径可以是本域名下的,也可以是其他网站上的,这就为跨域创造条件。

      2.javascript又可以创建元素,操作元素。这样我们就可以使用js动态的创建<scrpit>标签,然后添加src属性,这样他就会使用get方法请求路径。利用这个请求原理,可以在客户端定义一个带参数函数,然后在服务器端返回  调用客户端函数的字符串,这样数据就参数的形式被传回了客户端。

    原理图解:

      3.原理代码的简单实现(摘自于:木子月

    <script>

    创建并且插入script标签

     function createscript(reqUrl){

      var Ocreatescript = document.createElement('script');

      Ocreatescript .type = 'text/javascript';

      Ocreatescript.src = reqUrl;

      document.getElementsByTagName('head')[0].appendChild(Ocreatescript);

    }

    创建一个hello方法

    function hello(res){

      console.log(res);

    }

     createscript('http://loveme.com/index.php?callback=hello ');

    请求回来的内容:

    hello({ 'hi': 'nihao' }); //调用了上面的hello方法

     </script>

    服务端:index.php

    <?php

    $a=$_GET["callback"];

    echo $a.'({ 'hi': 'nihao' })'

    ?>

     

     4.jquery实现:(摘于:随它去吧
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" >
     <head>
         <title>Untitled Page</title>
          <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
         jQuery(document).ready(function(){ 
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
         </script>
         </head>
      <body>
      </body>
     </html>
     
  • 相关阅读:
    asp.net Core 中间件Hello world
    MVC2 ,MVC3 ,MVC4,MVC5的区别,EF的各个版本的区别;LocalDB是个啥
    EF6 MVC5译文
    发布一个C++版本的ORM库SmartDB
    ORM
    Git图形化界面客户端大汇总
    Model工具
    HTTP协议的8种请求类型介绍
    五大主流数据库模型
    店铺装修——进阶模块介绍
  • 原文地址:https://www.cnblogs.com/xuzhaocai/p/8290566.html
Copyright © 2011-2022 走看看