前端百题斩之浏览器出让安全性造就Jsonp

[[432964]]

1 JSONP基础

众所周知，JSONP是一种跨域解决方案，下面来一步步剖析一下为什么JSONP能够解决跨域问题。

基本思想

JSONP基本思想是在网页中添加一个< script >元素，向服务器请求数据，服务器收到请求后，将数据放在一个指定名字的回调函数中传回来。这应该是经常看到的一种解释JSONP请求的思路，但是同源策略不是不允许向非同源发送请求的，那怎么又怎么可以通过JSONP解决跨域呢?看起来是一个很矛盾的点。

为什么JSONP能够实现跨域

从同源策略的角度考虑，确实嵌入的< script >发起的请求(非同源)违背了同源策略，但其实这是由于浏览器为了便利性让出了部分安全性，允许js文件、css文件、图片等资源来自于非同源服务器，这也就解释了为什么script请求的资源分明跨域了但是仍有内容返回的原因，也正是由于浏览器出让了部分安全性(允许页面中可以嵌入第三方资源)，采用了JSONP的诞生。

2 手撕JSONP

上述聊了什么是JSONP、其基本思想以及为什么JSONP能够实现跨域，下面一起来实现JSONP。

• 全局挂载一个接收数据的函数;
• 创建一个script标签，并在其标签的onload和onerror事件上挂载对应处理函数;
• 将script标签挂载到页面中，向服务端发起请求;
• 服务端接收传递过来的参数，然后将回调函数和数据以调用的形式输出;
• 当script元素接收到影响中的脚本代码后，就会自动执行它们。

function createScript(url, charset) { 
    const script = document.createElement('script'); 
    script.setAttribute('type', 'text/javascript'); 
    charset && script.setAttribute('charset', charset); 
    script.setAttribute('src', url); 
    script.async = true; 
    return script; 
} 
 
function jsonp(url, onsuccess, onerror, charset) { 
    const hash = Math.random().toString().slice(2); 
    window['jsonp' + hash] = function (data) { 
        if (onsuccess && typeof(onsuccess) === 'function') { 
            onsuccess(data); 
        } 
    } 
 
    const script = 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); 
} 

本文转载自微信公众号「前端点线面」，可以通过以下二维码关注。转载本文请联系前端点线面公众号。