面试-JS Web API-JSONP和cors

JSONP( JSON with Padding )

JSONP是通过 <script> 标签来实现跨域数据传输的技术。它是为了绕过浏览器的同源策略限制而诞生的。

• 访问一个网址，服务端一定返回一个html文件吗？ ---不是的
• 服务器可以任意动态拼接数据返回的，只要符合html格式的要求就可以。

JSONP的工作原理：

• 客户端发送请求：客户端创建一个 <script> 标签，并将数据请求的 URL 设置为该标签的 src 属性。

<script src="http://example.com/data?callback=handleResponse"></script>

• 服务器返回响应：服务器会将返回的数据包装成一个函数调用的形式，并返回给客户端。

handleResponse({
  "name": "TechRxRepair",
  "location": "Tulsa"
});

• 客户端执行函数：客户端定义好回调函数，接收服务器传回的数据并处理。

function handleResponse(data) {
  console.log(data.name);  // 输出 'TechRxRepair'
  console.log(data.location);  // 输出 'Tulsa'
}

手动创建<script>标签的方式，或使用已有的库来简化JSONP请求，such as用jQuery发起JSONP请求：

$.ajax({
  url: "http://example.com/data",
  dataType: "jsonp",
  success: function(data) {
    console.log(data);
  }
});

由于 <script> 标签的限制，JSONP 只能发送 GET 请求，无法用于 POST 等请求方法。

cors
JSONP 现在已经较少使用，因为现代的跨域通信通常采用 CORS（跨源资源共享）。不过在历史上，JSONP 解决了早期 AJAX 无法跨域的问题，被广泛使用在老的项目或第三方API调用中。