jsonp理解

2018-06-24 01:18:10来源：未知阅读 ()

jsonp理解

一.jsonp是什么？

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

二.原理

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

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

原理图解：

　　3.原理代码的简单实现（摘自于：木子月）

创建并且插入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>