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("张三")


    
    
    

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



    
    
    

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

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

你可能感兴趣的:(jsonp通俗易懂的解释)