JSONP 教程学习笔记

什么是 JSONP

JSONP（JSON with Padding）是一种跨域解决方案，它允许我们在客户端向不同源的服务器请求数据，从而解决AJAX跨域的限制。其原理是通过动态创建script标签，并将远程数据作为回调函数的参数传递给客户端，从而实现数据获取。

具体来说，JSONP通过在请求URL后面添加一个callback参数，该参数的值是一个回调函数的名称，一个服务器就可以返回一段JavaScript代码，以回调函数的形式包裹返回数据。

例如，客户端请求如下URL：

Copy Code
http://www.example.com/data.php?parameter=1&callback=processData

服务器返回的数据如下：

Copy Code
processData({"name":"John", "age":30, "city":"New York"})

客户端定义processData函数，实现对返回数据的处理：

javascriptCopy Code
function processData(data){
  console.log(data.name); // 'John'
  console.log(data.age); // 30
  console.log(data.city); // 'New York'
}

JSONP使用注意事项

JSONP只能用于GET请求，不能用于POST、PUT等其他类型的请求。
服务器端需要对callback参数的值进行安全性验证，防止XSS攻击。
callback函数必须定义在客户端代码中，且必须具有全局可见性。
JSONP不支持服务器端向客户端推送数据。
JSONP对错误处理不够友好，需要客户端自行处理。

实例代码

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSONP Demo</title>
</head>
<body>
  <h1>JSONP Demo</h1>
  <script>
    function processData(data){
      console.log(data.name);
      console.log(data.age);
      console.log(data.city);
    }
    var script = document.createElement('script');
    script.src = 'http://www.example.com/data.php?parameter=1&callback=processData';
    document.body.appendChild(script);
  </script>
</body>
</html>

以上代码演示了如何使用JSONP获取远程数据，并将其传递给客户端处理函数。