详细分析jsonp的原理和实现方式

详细分析JSONP的原理和实现方式

JSONP概述

JSONP（JSON with Padding）是一种JSON数据格式的应用方式。由于同源策略的限制，XMLHttpRequest只允许请求与页面在同一域下的资源，而使用JSONP技术可以实现跨域访问。JSONP通过动态插入script标签，从而实现跨域请求。JSONP的工作原理是：在页面中创建一个 script 标签，利用script标签没有跨域限制的漏洞，通过src属性调用后端接口，同时在 url 后加上一个回调函数名，告诉服务器返回一个JS函数调用的代码，服务器收到请求后，将数据拼接成JS函数的调用，返回给前端页面，前端页面再执行该JS函数。

JSONP的实现方式

JSONP的主要实现方式就是动态添加script标签，以达到跨域请求的效果。以下是一个简单的JSONP实现的示例。

function jsonp(url, callback) {
    var script = document.createElement("script");
    script.src = url + "&callback=" + callback;
    document.body.appendChild(script);
}

上述代码中，我们定义了一个jsonp函数，参数url是请求地址，callback是JSONP接口返回的数据需要执行的函数。实际在调用jsonp函数时，需要传入将要被执行的该函数名称，实现代码如下：

jsonp('http://example.com/data.php', 'callback');

在数据返回后，JSONP会自动执行该函数，我们可以在函数内部对数据进行处理。如，在返回的json对象中，取其name属性值。

function callback(data) {
    alert(data.name);
}

在调用上面的示例时，后端返回的数据会直接调用callback指定的函数，用该函数来处理返回的数据。

JSONP的优缺点

JSONP 优点：

1. 相对于 XMLHttpRequest XHR 对象，它支持跨域访问。

2. 接口请求完整且简单，只需要生成动态的 script 标签并向服务器请求数据。

3. 数据请求完成之后浏览器会直接执行回调函数，缺少 Ajax 请求中回调函数中出现的回调函数的调用以及交互的过程，增加页面速度。

JSONP 缺点：

1. 只支持 GET 请求，不能发送 POST 请求。

2. 只能够实现简单的 HTTP GET 请求，效率不能与 Ajax 请求相比。

3. 存在安全问题，需要信任提供 JSONP 数据的对方。