1 JSONP基础
众所周知，JSONP这是一个跨域解决方案。让我们一步一步地分析为什么JSONP能解决跨域问题。
基本思想
JSONP基本思想是在网页上添加一个< script >元素向服务器请求数据。服务器收到请求后，将数据放回指定名称的回调函数中。这应该是一种常见的解释JSONP请求的想法，但同源策略不允许向非同源发送请求，那么如何通过呢？JSONP解决跨域问题呢？这似乎是一个非常矛盾的点。
为什么JSONP跨域可以实现
从同源战略的角度来看，它确实嵌入了< script >发起的请求(非同源)违反了同源策略，但实际上这是因为浏览器为了方便而放弃了一些安全性js文件、css文件、图片等资源来自非同源服务器，这就解释了为什么script请求的资源分明跨域了但是仍有内容返回的原因，也正是由于浏览器出让了部分安全性(允许页面中可以嵌入第三方资源)，采用了JSONP的诞生。
2 手撕JSONP
上面说的是什么？JSONP、基本思想，为什么JSONP跨域可以一起实现。JSONP。
- 全局挂载接收数据的函数；
- 创建一个script并在其标签上onload和onerror相应的处理函数挂载在事件上；
- 将script将标签挂载到页面，并向服务端提出请求；
- 服务端接收传输的参数，然后以调用的形式输出回调函数和数据；
- 当script接收受影响的脚本代码后，元素会自动执行。
functioncreateScript(url,charset){constscript=document.createElement('script');script.setAttribute('type','text/javascript');charset&&script.setAttribute('charset',charset);script.setAttribute('src',url);script.async=true;returnscript;}functionjsonp(url,onsuccess,onerror,charset){consthash=Math.random().toString().slice(2);window['jsonp' hash]=function(data){if(onsuccess&&typeof(onsuccess)==='function'){onsuccess(data);}}constscript=createScript(url '?callback=jsonp' hash,charset);///监控加载成功的事件，获取数据，使用两个事件onload和onreadystatechange是为了兼容IE，因为IE9之前不支持onload只支持事件onreadystatechange事件script.onload=script.onreadystatechange=function(){//如果不存在readyState事件证明不是IE浏览器，可以直接执行，如果是，必须等到状态变成loaded或complete才可以执行if(!this.readyState||this.readyState==='loaded'||this.readyState==='complete'){script.onload=script.onreadystatechange=null;//移除该script的DOM对象if(script.parentNode){script.parentNode.removeChild(script);}///删除函数或变量window['jsonp' hash]=null;}};script.onerror=function(){if(onerror&&typeof(onerror)==='function'){onerror();}}///添加标签，发送请求document.getElementsByTagName('head')[0].appendChild(script);}本文转载自微信公众号「前端点线面」，请注意以下二维码。转载本文请联系前端点线面微信官方账号。
