web

JSONP使用详解

JSONP（JSON with Padding）是一种利用<script>标签可以跨域加载资源的技术。由于浏览器同源策略的限制，不能直接通过XHR对象实现跨域请求，但是通过<script>标签可以跨域加载任意资源。

JSONP的原理是，客户端动态创建一个<script>标签，将请求地址包装成一个回调函数的调用，并将回调函数名作为查询参数发送到服务器。服务器返回的数据将作为回调函数的参数传递回来，从而实现跨域数据传输。

以下是JSONP的数据交互流程：

  • 客户端动态创建一个<script>标签，将请求地址和回调函数名拼接成一个完整的URL，并将其赋值给src属性。
  • 客户端向服务器发送跨域请求。
  • 服务器接收到请求后，将响应数据包装在一个函数调用中，并将函数名作为响应参数返回给客户端。
  • 客户端接收到响应后，自动执行返回的函数，并将响应数据作为函数参数传递进去。
  • 客户端通过回调函数处理响应数据，更新页面内容。

JSONP的数据交互流程比较简单，它利用<script>标签可以跨域加载资源的特性，通过动态创建<script>标签实现跨域请求，并通过回调函数处理响应数据。

以下是一个使用JSONP实现跨域请求的示例：

1
2
3
4
5
6
7
8
9
10
11
12
function jsonp(url, callback) {
  let script = document.createElement("script");
  script.src = url + "?callback=" + callback;
  document.body.appendChild(script);
}

function handleResponse(data) {
  // 处理响应数据
  console.log(data);
}

jsonp("http://example.com/data", "handleResponse");

在这个示例中，首先定义了一个jsonp()函数，它接受两个参数：请求地址和回调函数名。函数内部动态创建了一个<script>标签，并将请求地址和回调函数名拼接成一个完整的URL，并将其赋值给src属性。然后将<script>标签添加到页面的<body>元素中。

服务器返回的数据将作为回调函数的参数传递回来。在这个示例中，回调函数名为handleResponse，因此服务器返回的数据应该是以下格式的JavaScript代码：

1
handleResponse({"name": "John", "age": 30});

客户端会自动执行这个函数，并将数据传递给它。因此，在handleResponse()函数中就可以处理服务器返回的数据了。

需要注意的是，JSONP虽然可以跨域请求数据，但它也存在一些安全风险。由于JSONP请求是动态创建的<script>标签，因此服务器可以注入任意的JavaScript代码，如果服务器返回的数据被篡改，客户端就会执行恶意的JavaScript代码。因此，建议只在信任的服务器上使用JSONP技术。

版权所有，如有侵权请联系我