手写简单的 Jsonp 实现代码去百度了一下jsonp，并且手写了一份简易的代码示例。原理：jsonp其实就是利用了

今天爬虫时用到了jsonp，突然想到自己在前端开发中已经很久没使用到jsonp了，甚至都快忘了其原理了，所以马上去百度了一下jsonp，并且手写了一份简易的代码示例。
原理：jsonp其实就是利用了 src 属性允许跨域的特点。后端把参数放进函数中，并返回一个js，此js就是一个函数调用而已。无非是把数据当成了参数。

<body>
    <a href="javascript:" id="btn">按钮</a>
    <script>
    

    const btn = document.querySelector('#btn')
   
    function Ajax(config) {
        if (config.type === 'jsonp' && config.callback) {
            window[config.callback] = val => {
            	config.success(val)
            }

            const script = document.createElement('script')
            script.setAttribute('type', 'text/javascript')
            script.setAttribute('src', config.url)
            const head = document.querySelector('head')
           	head.appendChild(script)
           	head.removeChild(script)
        }
    }

    btn.onclick = function(){
    	Ajax({
    		url: './test.js',
    		type: 'jsonp',
    		callback: 'fn',
    		success: (val) => {
    			console.log(val)
    		}
    	})
    }

    </script>
</body>

//test.js
fn({
	name: '帅哥'
})

可以看到，Ajax 根据我们传的 callback 参数动态生成了一个函数，此函数就是后端调用的参数名，并调用了 success 函数。

手写 简单的 Jsonp 实现代码

手写简单的 Jsonp 实现代码