jsonp原理总结

最新推荐文章于 2024-02-01 08:30:00 发布

yanyi_6532

最新推荐文章于 2024-02-01 08:30:00 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript html

本文链接：https://blog.youkuaiyun.com/yanyi_6532/article/details/125281057

本文详细介绍了JSONP（JSON with Padding）的工作原理及其在跨域请求中的应用。通过动态创建<script>标签，指定回调函数，JSONP允许浏览器绕过同源策略获取数据。文中提供了一个完整的示例，展示如何在页面中定义回调函数并处理返回的JSON数据，帮助读者深入理解这一跨域解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP 是 JSON with padding的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

两个步骤：

1.动态创建<script>标签，设置其src，回调函数在src中设置

var script = document.createElement("script");
script.src="https://api.douban.com/v2/book/searchq=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

2.在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
  // 对response数据进行操作代码
}

完整例子如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JSONP实现跨域2</title>
</head>

<body>
  <div id="mydiv">
    <button id="btn">点击</button>
  </div>
</body>
<script type="text/javascript">
  function handleResponse(response) {
    console.log(response);
  }
</script>
<script type="text/javascript">
  window.onload = function () {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function () {
      var script = document.createElement("script");
      script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
      document.body.insertBefore(script, document.body.firstChild);
    };
  };
</script>