封装jsonp

1.写一个类封装jsonp：

　　jsonp(url, params, success, funName)

　　参数url：请求地址

　　参数params：请求数据，可以是json对象，或形如"name=zs&age=10"的字符串，或null

　　参数success：jsonp请求成功回调函数

　　参数funName：指定服务端响应数据包裹json对象的函数名，也可以不传该参数

/*
 * jsonp必须是get请求
 * 参数: 
 *   url：请求地址，
 *   params：请求体，
 *   success：回调函数
 *   funName: 函数名，jsonp返回数据会调用该函数
 */
function jsonp(url, params, success, funName) {
　　// 如果params是json对象，转换成字符串，格式为"name=张三&age=10"
    if(params && typeof params == 'object') {
        var tempArray = [];
        for(var key in params) {
            var value = params[key];
            tempArray.push(key + "=" + value);
        }
        // tempArray ==> [ 'key1=value1', 'key2=value2']
        // params ==> 'key1=value1&key2=value2'
        params = tempArray.join("&");
        //alert("params:" + params); // params:name=张三&age=10
    }
    
    var script = document.createElement("script");
    
    if(!funName) {
        // 定义一个随机的函数名
        var funName = 'callback_' + Date.now() + Math.random().toString().substr(2, 5);
    }
    
    // 函数定义，jsonp返回数据会调用该函数
    window[funName] = function(data) {
        success(data);
        delete window[funName];
        document.body.removeChild(script);
    }
    
    //script.src = "http://localhost/Demo01/jsonResult?jsonp=funName";
    url = url + "?" + "jsonp=" + funName;
    if(params) {
        url += "&" + params;
    }
    
    script.src = url;
    document.body.appendChild(script); // 发送跨域请求，服务器返回数据：funName({"name":"李四","age":20})
}

2.测试

　　调用自己封装的函数：jsonp(url, params, success, funName)，服务端响应：fun1({"name":"测试","age":10})

<script type="text/javascript">
    window.onload = function() {
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            jsonp("http://localhost/Demo01/jsonResult", null, function(data) {
                var fontEle = document.getElementById("font");
                fontEle.innerHTML = data.name + "-" + data.age;
            }, "fun1");
        };
    };
</script>
<input type="button" id="btn" value="点击发送Ajax请求"/>
<h1><font color="red" id="font"></font></h1>

3.服务端controller：

@Controller
public class JsonResultController {
    @RequestMapping("/jsonResult")
    @ResponseBody
    public String fun1(String jsonp) {
        if(jsonp.length() > 0) { // jsonp请求
            return jsonp + "(" + "{\"name\":\"李四\",\"age\":20}" + ")";
        } else {
            return "{\"name\":\"李四\",\"age\":20}";
        }
    }
}

猜你喜欢