Html通俗易懂的解释,jsonp通俗易懂的解释

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

1、Web页面上调用js文件时则不受是否跨域的影响，这是jsonp的基础。举个例子：

服务器端(地址：www.remoteserver.com)下有一个name.js

//name.js

alert("my name is"+"张三")

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

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

2、但是有一个问题，name.js这个文件是放在服务器端，我们不能改，如果现在前端的需求是console他的名字，这时你就需要找后端的同学帮个忙，让他把name.js里的内容改一下，改成console.log("his name is"+"张三")，恩，后台同学帮你改了，过两天你又找他改，还要改成alert，又过了两天不仅要有alert还要有console，。。。

这个“张三”这个名字的具体处理方法还是需要我们自己写，至于是alert还是console，是我的名字还是他的名字，后台也不关心，最后协商写成这个样子：

//name.js

handleName("张三")

var handleName = function(name){

console.log("his name is"+name);

}

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

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);

}

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

//people.json

{name:"张三",age:5,sex:"男"}

//最后传给前端的字符串

'handlePeople({name:"张三",age:5,sex:"男"})'