本文共 2885 字，大约阅读时间需要 9 分钟。

手动封装一个jQuery版的Ajax请求：深入理解JSONP原理

在前后端分离的现代Web开发中，AJAX技术是连接前端与后端的纽带。然而，跨域请求（尤其是JSONP）时，传统的AJAX请求可能会受到浏览器同源政策的限制。了解JSONP的工作原理，能够帮助我们更高效地处理跨域数据获取需求。

JSONP的基本原理

JSONP（JSON with Padding）是一种用于跨域数据获取的技术，它通过动态生成JavaScript代码来绕过浏览器的同源限制。具体来说，JSONP请求的处理流程如下：

jQuery封装实现

以下是一个手动封装的jQuery版JSONP请求示例：

var $ajax = function(obj) {
    var url = obj.url;
    var type = obj.type;
    var dataType = obj.dataType;
    // 判断URL是否为同源
    var targetProtocol = '';
    var targetHost = '';
    if (url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1) {
        var targetUrl = new URL(url);
        targetProtocol = targetUrl.protocol;
        targetHost = targetUrl.host;
    } else {
        targetProtocol = location.protocol;
        targetHost = location.host;
    }
    if (dataType === 'jsonp') {
        // 同源域时直接使用普通AJAX
        if (targetProtocol === location.protocol && targetHost === location.host) {
            var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
            xhr.open(type, url, false);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    obj.success(data);
                }
            };
            xhr.send();
        } else {
            // 非同源域，使用JSONP
            var callback = 'jsonp_callback_' + Math.floor(Math.random() * 10000000);
            window[callback] = function(data) {
                obj.success(data);
            };
            var script = document.createElement('script');
            script.src = (url.indexOf('?') !== -1 ? url : url + '?') + 'callback=' + callback;
            document.head.appendChild(script);
        }
    } else {
        // 其他数据类型，使用普通AJAX
        var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
        xhr.open(type, url, false);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                obj.success(data);
            }
        };
        xhr.send();
    }
};

###关键点解析

实现总结

通过上述封装，可以在不同域之间安全且高效地进行数据交互。这种方法不仅兼容了传统的AJAX请求，还为跨域数据获取提供了一个灵活的解决方案。在实际应用中，根据项目需求选择合适的数据类型（jsonp、json、xml等）和请求方式（get、post等），以达到最佳的性能和用户体验。