Ajax - 跨域 dataType: ‘jsonp‘

最新推荐文章于 2022-08-11 15:06:43 发布

原创最新推荐文章于 2022-08-11 15:06:43 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #html

前端专栏收录该内容

19 篇文章

订阅专栏

本文讲解了如何在HTML中使用jQuery实现跨域请求，介绍jsonp的工作原理，包括利用script标签的src特性、服务器回调函数调用以及其限制。重点展示了通过动态创建script标签实现JSONP的步骤。

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

1.跨域体验

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./libs/jquery/jquery.js"></script>
  </head>
  <body>
    <button>发起跨域请求</button>
    <script>
      // document.querySelector('button').onclick = function() {
      //   let xhr = new XMLHttpRequest()
      //   xhr.open('get', 'http://127.0.0.1:3001/getStudentsJSONP.js')
      //   xhr.send()
      // }
      $('button').on('click', function() {
        $.ajax({
          url: 'http://127.0.0.1:3001/getStudentsJSONP.js',
          // 跨域请求
          dataType: 'jsonp',
          success: function(res) {
            console.log(res)
          }
        })
      })
    </script>
  </body>
</html>

2.jsonp跨域的原理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./libs/jquery/jquery.js"></script>
    <link
      rel="stylesheet"
      href="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superui/css/ubase_9376fdcf.css"
    />
  </head>
  <body>
    <button>发起跨域请求</button>
    <script>
      function test(res) {
        console.log(res)
      }
    </script>
    <!-- <img
      src="https://img2.baidu.com/it/u=1931533531,716385319&fm=26&fmt=auto&gp=0.jpg"
      alt=""
    /> -->
    <script src="http://127.0.0.1:3001/getStudentsJSONP.js?callback=test">
      // 跨域的原理：
      // 1.src和href天然可以跨域，没有任何的跨域请求的限制
      // 2.jsonp跨域的本质是利用了script标签的src属性的天然跨域特性
      // 3.具体的操作是：在发起跨域请求的时候传入一个本地拥有的函数名称，服务器会返回调用函数的形式，且拼接好返回的数据
      // 4.通过script请求获取的内容会默认以js语法来解析

      // 5.jsonp跨域和异步对象没有任何的关系
      // 6.jsonp只能发起Get请求
    </script>
  </body>
</html>

3.jsonp的原理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function abc(res) {
        console.log(res)
      }
    </script>
    <!-- 通过script的src属性发出的请求获取的返回内容默认会为js语法解析 -->
    <!-- <script src="http://127.0.0.1:3002/getdata?callback=success"></script> -->

    <script>
      let $ = {
        ajax: function(option) {
          if (option.dataType === 'jsonp') {
            // 1.创建一个script标签
            let script = document.createElement('script')
            // 2.为script标签设置src属性
            script.src = option.url + '?callback=abc'
            // 3.将script添加到body中
            document.body.appendChild(script)
          } else {
            let xhr = new XMLHttpRequest()
            // /.....
          }
        }
      }

      $.ajax({
        url: 'http://127.0.0.1:3002/getdata',
        dataType: 'jsonp'
      })
    </script>
  </body>
</html>