JSONP JSONP是什么？如何使用它解决跨域问题？

JSONP

1. 什么是JSONP

   • JSONP（JSON with Padding）是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问的问题。

2. JSONP的实现原理

   • 由于浏览器同源策略限制，网页无法通过Ajax请求非同源的接口数据。
   • script标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js脚本数据。
   • 通过函数调用的形式，接收跨域接口响应回来的数据。

3. 实现JSONP

   1. 定义一个success回调函数。

      <script>
      	function success(data){
              console.log("获取到数据");
              console.log(data)
          }
      </script>
      

   2. 通过script标签，请求接口数据。

      <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20"></script>
      

4. JSONP的缺点

   • 只支持GET数据请求，不支持POET数据请求。
   • JSONP与Ajax之间无任何关系，其没有用到XMLHttpRequest对象。

5. jQuery中的JSONP

   • jQuery提供的$.ajax()函数，发起JSONP数据请求

     $.ajax({
         url:'http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=silly&sge=20',
         //发起JSONP请求
         dataType:'jsonp',
         success:function(res){
     		console.log(res.data);
         }
     });
     

JSONP示例

请求Github信息

封装一个函数进行请求