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>
     
  • 相关阅读:
    陶瓷电容的结构、工艺、失效模式
    Vue.js最佳实践
    Vue 超快速学习
    CSS 小技巧
    HTML5 Canvas
    webkit下面的CSS设置滚动条
    Some untracked working tree files would be overwritten by checkout. Please move or remove them before you can checkout. View them
    JSCS: Please specify path to 'JSCS' package
    React中ref的使用方法
    React 60S倒计时
  • 原文地址:https://www.cnblogs.com/xuzhaocai/p/8290566.html
Copyright © 2011-2022 走看看