Jsonp函数的封装

Jsonp函数的封装

jsonp 全称是 json with padding 意味 json 填充，其作用可以模拟 ajax 请求（但不同于ajax）。
对jsonp 函数的具体封装如下：

1. 在jsonp函数中创建script标签
2. 对传递对象中的参数对象进行参数拼接
3. 对调用的函数进行作用域提升，并且随机产生一个名称避免函数的覆盖
4. 向页面中添加script标签
5. 当script标签产生作用后，删除该标签（避免产生代码冗余）

对jsonp函数的调用时，需要传递一个obj对象，该对象中含有：请求地址、请求的参数对象、请求的函数，形如：

jsonp({
		// 请求地址
		url: 'http://localhost:3000/test', // 初始服务器为 80 端口
		data: {
			name: 'lxz',
			age: 22
		},
		success: function (data) {
			console.log('success')
			console.log(data) // 服务器后端传递的数据
		}
	})

具体的jsonp封装代码如下：

// 封装一个jsonp函数
function jsonp(obj) {
    // 创建script标签
    var script = document.createElement('script');

    // 定义一个变量用来传递参数
    var param = "";
    // 对传递过来的参数进行遍历
    for (var attr in obj.data) {
        param += '&' + attr + '=' + obj.data[attr];
    }

    /**
     * 使用math.random()随机生成一个数，并对其进行相应的处理后将其添加到callback参数后，避免每次产生的函数一致；
     * 使用window将函数的作用域进行提升，否则在调用jsonp函数的时候函数将无法执行。(为window设置一个任意属性赋值为该函数)；
     * 当script标签执行的时候将相当于调用了window某属性的函数
     */
    var funcName = 'func' + Math.random().toString().replace('.', '');
    window[funcName] = obj.success;
    // 将服务器地址设置在src中
    script.src = obj.url + '?callback=' + funcName + param;
    // 在页面中添加script标签
    document.body.appendChild(script);
    // 监听script标签的onload事件，当script标签执行后将其删除，避免代码结构的冗余
    script.onload = function() {
        // 从body的删除掉添加的script标签
        document.body.removeChild(script);
    }
}