jsonp通俗易懂的解释

可能有些人和我一样，对jsonp理解的一知半解，原因是有一个问题没搞清楚，就是这个jsonp请求的时候需要前后台的配合，以前一直只考虑前端应该怎么写，所以当时搞懂了，长时间不用就会忘记，今天就用整体的情况来通俗易懂的来解释一下。

1、Web页面上调用js文件时则不受是否跨域的影响，这是jsonp的基础。举个例子：
服务器端（地址：www.remoteserver.com）下有一个name.js

//name.js
alert("my name is"+"张三")

本地（地址和服务器不同源）有一个文件jsonp.html

<!-- jsonp.html -->
<head>
    <title></title>
    <script type="text/javascript" src="http://www.remoteserver.com/name.js"></script>
</head>

打开页面时是可以看到一个弹出框，内容是“my name is 张三”。

2、但是有一个问题，name.js这个文件是放在服务器端，我们不能改，如果现在前端的需求是console他的名字，这时你就需要找后端的同学帮个忙，让他把name.js里的内容改一下，改成console.log("his name is"+"张三")，恩，后台同学帮你改了，过两天你又找他改，还要改成alert，又过了两天不仅要有alert还要有console，。。。
这个“张三”这个名字的具体处理方法还是需要我们自己写，至于是alert还是console，是我的名字还是他的名字，后台也不关心，最后协商写成这个样子：

//name.js
handleName("张三")

<!-- jsonp.html -->
<head>
    <title></title>
    <script type="text/javascript">
          var handleName = function(name){
                console.log("his name is"+name);
          }
    </script>
    <script type="text/javascript" src="http://www.remoteserver.com/name.js"></script>
</head>

3、注意到handleName在name.js和jsonp中是一样的，这是前后台约定好的名字，每一次调数据都约定也太麻烦了，于是决定前端写一个名字，然后把这个名字当成参数传给后端就好，另外我们请求的数据很多，json格式的最好，前后台通用，于是改成了这样：

<!-- jsonp.html -->
<head>
    <title></title>
    <script type="text/javascript">
          var handlePeople= function(obj){
                console.log("his name is"+obj.name);
                console.log("his age is"+obj.age);
                console.log("his sex is"+obj.sex);
          }
    </script>
    <script type="text/javascript" src="http://www.remoteserver.com/people.json？callback=handlePeople"></script>
</head>

后台把callback这个变量保存下来，然后和json数据做了一下拼接，生成一个拼接的json字符串（js认识就行）“handlePeople（“+json+”）”传给了前台。

//people.json
{name:"张三",age:5,sex:"男"}

//最后传给前端的字符串
'handlePeople({name:"张三",age:5,sex:"男"})'