jsonp

时间 2019-12-08

标签 jsonp 栏目 JSON 繁體版

原文原文链接

Json with Padding只是是解决跨域问题而提出的一种方案。因为同源策略的限制，XMLHttpRequest只容许请求前源（域名、协议、端口）的资源，为了实现跨域请求，能够经过script标签实现跨域请求，而后再服务端输出JSON数据并执行回调函数，从而解决跨域数据请求javascript

通讯原理：首先在客户端注册一个callback，而后把callback的名字传给服务器。此时，服务器先生成json数据，而后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script变迁，并执行返回javascript文档，此时数据做为参数，传入了客户端预先定义好的callback函数里。简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通信的目的。php

jsonp 是一种数据调用的方式，带callback的json就是jsonphtml

jsonp弊端：须要服务端改动参数；只支持get请求；发送的不是xhr请求；java

例：ajax

https://blog.csdn.net/weixin_44083075/article/details/84985147#_4
 1. $.ajax({
                type: "get",
                async: false,
                url: "http://t2.com/jsonp.php",
                dataType: "jsonp",
                jsonp: "callback",//传递给请求处理程序或页面的，用以得到jsonp回调函数名的参数名(通常默认为:callback)
                jsonpCallback: "localHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
                success: function (json) {
                    $('body').append('<h2>您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。</h2>');
                },
                error: function () {
                    alert('fail');
                }
            });
            
            
json.php
            
header('Content-Type:application/json; charset=utf-8');
$callback='localHandler';
$data=array(
    'price'=>26358,
    'tickets'=>56
);
echo $callback.'('.json_encode($data).');';



2.<script type="text/javascript" src="http://localhost/Service.ashx?callback=jsonpCallback" />
//回调函数function jsonpCallback(content){ alert(content); } </script>
运行的结果显示test jsonp,能够看出整个过程：
~~~~~~~jsonpCallback的回调函数和ajax中的success中的成功回调均可以操做返回的数据


3.用jQuery中提供的$.getJson方法来跨域访问。getJson有3个参数：
I.   url：请求地址；
II.  data：发送到服务端的参数；
III. callback：成功时的回调函数。

PS：getJson的使用方法和普通的$.get方法基本一致，不一样的地方在于getJson须要在url后面的参数部分加上callback=?这一固定部分，jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。而后在回调函数中操做从异域返回的json对象，回调函数callback的参数即为该json对象。

 $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
    
** 服务端编写
服务端的逻辑主要是将数据序列化为json字符串，而后封装成"callback(json)"的形式，callback为jQuery自动生成并传到服务端的函数名称。下面使用C#实现：

public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format("{0}({1})", callback, json);
  }
}


思考：若是服务端已经写死了callback（如：return string.Format("moty({0})", json);）,那么客户端该怎么写呢？

$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

 
复制代码

jsonp实现input搜索内容--返回后端数据json

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
            width: 500px;
            margin: 100px auto 0;
        }

        #wrap input {
            width: 486px;
            height: 40px;
            padding-left: 10px;
        }

        #list {
            margin-top: 10px;
            background: #333;
        }

        #list li {
            width: 490px;
            line-height: 40px;
            background: #ccc;
            padding-left: 10px;
            margin-bottom: 3px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <input type="text" placeholder="请输入内容" id="ipt">
        <ul id="list">
        </ul>
    </div>
    <script>
        var ipt = document.getElementById('ipt'),
            list = document.getElementById('list');
        var Script = null;
        ipt.onkeyup = function () {
            if (Script) {
                document.body.removeChild(Script);//清除屡次建立script标签
            }
            Script = document.createElement('script');
            Script.src = 'http://suggestion.baidu.com/su?wd=' + ipt.value + '&cb=mycallbacks&t=' + new Date().getTime();
            document.body.appendChild(Script);
        }
        function mycallbacks(json) {  mycallbacks是回调后端动态建立的函数（此函数名可自定义）
            list.innerHTML = '';
            for (var i = 0; i < json.s.length; i++) {
                list.innerHTML += '<li>' + json.s[i] + '</li>';
            }
            console.log(json);
        }
    </script>
</body>

</html>

复制代码