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

JSONP与CORS的对比与应用

JSONP（JSON with Padding）是一种用于跨域数据获取的技术，通过 script 标签实现对外域资源的请求。在传统的 AJAX 中，XMLHttpRequest 对于跨域请求受到 Same Origin Policy 的限制，但 JSONP 提供了一种绕过限制的方式。

JSONP的工作原理

JSONP 的核心思想是利用 script 标签的 src 属性，请求外域服务器返回的 JavaScript 代码。这个脚本包含一个回调函数，用于接收并处理返回的 JSON 数据。例如：

foo({ id: 123, name: '张三' });

当 script 标签加载完成后，回调函数 foo 会被执行，参数中传递 JSON 数据。这种方式无需 XMLHTTPRequest 对象，适用于不支持 AJAX 的旧浏览器。

JSONP在 jQuery 中的应用

在 jQuery 中，使用 JSONP 实现跨域请求有两种主要方法：

$.ajax({
    dataType: 'jsonp',
    url: 'http://www.zxx.com/user?name=zxx',
    success: function(data) {
        // 处理数据
    }
});

2. 使用 $.getJSON() 方法

$.getJSON('http://www.zxx.com/user?name=zxx&callback=?', function(data) {
    // 处理数据
});

通过这种方式，开发者可以在支持 JSONP 的浏览器中轻松实现跨域数据获取。

JSONP的优缺点

优点：

• 无需 XMLHTTPRequest 对象支持，兼容更广泛的浏览器。
• 简单易于实现，适合只需 GET 请求的场景。
• 支持回调函数返回数据，方便处理。

缺点：

• 仅支持 GET 请求，无法实现 POST 或其他 HTTP 方法。
• 数据接收依赖于脚本加载，较难处理错误状态。
• 安全性较低，可能引入恶意代码。

CORS 与 JSONP 对比

CORS（Cross-Origin Resource Sharing，跨域资源共享）是现代浏览器支持的更先进技术，相比 JSONP 有以下优势：

3. 支持所有 HTTP 方法：CORS 不受限于 GET 请求，可以实现 POST、PUT 等。
4. 更好的错误处理：CORS 使用标准的 HTTP 状态码和错误事件，处理起来更直观。
5. 更广泛的浏览器支持：现代浏览器普遍支持 CORS，而 JSONP 的支持较弱。

JSONP 与 JSON 的区别

JSONP 与 JSON 并非直接关联：

• JSONP 是一种技术，用于跨域数据获取。
• JSON 是数据格式，用于数据描述和交换。

简单来说，JSONP 是一种技巧，用于绕过跨域限制，而 JSON 是数据交换的标准格式。

总结

JSONP 是 AJAX 跨域获取的重要方法之一，尽管其优缺点明显，但在特定场景下仍然有用。随着 CORS 技术的普及，未来 JSONP 的应用可能会逐渐减少，但对于旧浏览器的支持和简单场景的需求，它仍然具有重要价值。

转载地址：http://goko.baihongyu.com/