Ajax(七)+axios+跨域+JSONP

最新推荐文章于 2024-04-09 10:00:00 发布
最新推荐文章于 2024-04-09 10:00:00 发布
阅读量1.6k 收藏
点赞数
分类专栏： Ajax 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57826863/article/details/128363519
版权

目录

1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一）

用法（二）

2. XMLHttpRequest Level2的新特性—— 上传文件

3. XMLHttpRequest Level2的新特性—— 显示文件上传进度

4. jQuery高级用法

4.1 jQuery实现文件上传

4.2 jQuery实现loading效果

5. axios

5.1 什么是axios

5.2 axios发起GET请求 

5.3 axios发起POST请求​编辑

5.4 直接使用axios发起请求

6. 了解同源策略和跨域

6.1 同源策略

6.2 跨域

7. JSONP

7.1 什么是JSONP

7.2 JSONP的实现原理

7.3 自己实现一个简单的JSONP

7.4 JSONP的缺点

7.5 jQuery中的JSONP

7.6 自定义参数及回调函数名称 

7.7 jQuery中JSONP的实现过程

1. XMLHttpRequest Level2的新特性——FormData对象管理表单数据（一）

除了html里面用form标签

  <script>
    // 1. 创建 FormData 实例
    var fd = new FormData()
    // 2. 调用 append 函数，向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')

    var xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    xhr.send(fd)
    //把提交的数据传过来

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        //服务器响应回来的文本格式的Json字符串转成js对象打印出来
        console.log(JSON.parse(xhr.responseText))
      }
    }
  </script>

用法（二）

<body>

  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 通过 DOM 操作，获取到 form 表单元素
    var form = document.querySelector('#form1')
    // 监听表单元素的 submit 事件
    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据到fd
      var fd = new FormData(form)
      //发ajax请求
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)
    //拿到服务器响应回来的数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  </script>

</body>

2. XMLHttpRequest Level2的新特性—— 上传文件

 

 

 以上完整代码：

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表 files数组里面拿到用户选择的文件
      //document.querySelector('#file1')拿到文件选择框的dom元素.files是一个文件的数组
      var files = document.querySelector('#file1').files
      //files是个数组
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      //向FormData中追加文件
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            //querySelector选择器
          // 上传成功，将上传成功的图片再显示到网页中（将服务器响应回来的url地址交给img标签进行显示）
          //data.url地址（服务器响应回来的url地址）不完整，需要在前面拼上一个根路径
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败，打印一个上传文件失败的消息就行
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

 3. XMLHttpRequest Level2的新特性—— 显示文件上传进度

e. lengthComputable为true时，才能计算出上传进度

e.loaded / e.total) * 100 上传进度百分比

Math.ceil上取整

美化文件上传进度：Bootstrap中文网组件里找进度条

 

 完整上传及美化代码：

<!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>
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>

  <!-- bootstrap 中的进度条（Bootstrap中文网组件里复制过来的） -->
  <!-- style="width: 500px; margin: 15px 10px控制进度条的样式 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <!-- style="width: 0%"进度条的增长效果从这改 -->
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
      <!-- 0%这块改变的是当前显示的数据 -->
    </div>
  </div>

  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
//新加的比12
      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // e.lengthComputable为true，可以计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          //在Network里选择slow3G网络上传
          console.log(procentsComplete)
          // 动态设置进度条
          //jOuery的dom操作： $('#percent')获取到进度条，.attr函数设置进度条的style属性，动态设置width宽度
          //.html（）函数显示当前的上传进度百分比
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }
// 监听上传完成的事件 .removeClass()移除样式 .addClass添加样式绿色
      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.tSop:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

</html>

4. jQuery高级用法

4.1 jQuery实现文件上传

 

用jQuery发起上传文件的请求：contentType/processData必须: false

        必须调用$.ajax请求 method必须是post

 4.2 jQuery实现loading效果

 jQuery高级用法完整代码：

<!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="./lib/jquery.js"></script>
</head>

<body>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <br />
  <!--  style="display: none先把图片隐藏起来，设置id：loading -->
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

  <script>
    $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

      $('#btnUpload').on('click', function () {
        //[0]转成原生的dom对象
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

</body>

</html>

5. axios

5.1 什么是axios

5.2 axios发起GET请求 

.then指定成功以后的回调函数

包装的res对象身上始终都有6个属性，要的是data（服务器响应回来的真实数据）

 

 5.3 axios发起POST请求

 5.4 直接使用axios发起请求

 axios测试完整代码：

<!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="./lib/axios.js"></script>
</head>

<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>

  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        //res是axios包装的一个对象，要的是data（服务器响应回来的真实数据）
        console.log(res.data)
      })
    })

    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
</body>

</html>

6. 了解同源策略和跨域

6.1 同源策略

 http://www.test.com/后面要是没给数据的话，默认80

同源策略：浏览器提供的，保证安全性（隔离潜在恶意文件）

通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互

 6.2 跨域

 URL 的协议、域名、端口三个完全一致叫同源；任何一个不一致叫跨域

注意：请求回来的数据会被浏览器的同源策略拦截 

7. JSONP

7.1 什么是JSONP

7.2 JSONP的实现原理

 发起跨域的Ajax请求的报错测试:请求失败，拿不到数据

<!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="./lib/jquery.js"></script>
</head>
<!-- 浏览器拦截，console里面报错，打开的网页是file协议，接口的协议是http 
非同源，存在跨域问题-->
<body>
  <script>
    $.ajax({
      method: 'GET',
      url: 'http://ajax.frontend.itheima.net:3006/api/jsonp',
      data: {
        name: 'zs',
        age: 20
      },
      success: function (res) {
        console.log(res)
      }
    })  
  </script>
</body>

</html>

7.3 自己实现一个简单的JSONP

<!-- 剖析JSONP的实现原理1 -->
<!-- 把函数的定义和调用拆成了两部分 -->
<body>
  <script>
    function success(data) {
      console.log('拿到了Data数据：')
      console.log(data)
    }
  </script>

  <script>
    success({ name: 'zs', age: 20 })
  </script>
</body>
<!-- 剖析JSONP的实现原理2 -->
<body>
  <script>
    function abc(data) {
      console.log('拿到了Data数据：')
      console.log(data)
    }
  </script>
<!-- src请求外部的js文件 -->
  <script src="./js/getdata.js?callback=abc"></script>
</body>
// getdata.js文件
abc({ name: 'ls', age: 30 })
//简单的JSONP请求实现
<!-- JSONP不是Ajax请求，是Get请求 -->
<!-- getdata.js没有在计算机本地上，而是在一台服务器上放着，人家调什么函数我们不知道 -->
<body>
  <script>
    function abc(data) {
      console.log('JSONP响应回来的数据是：')
      console.log(data)
    }
  </script>
<!-- 设置回调函数callback=abc，让服务器知道客户端只有abc这一个函数 -->
  <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
</body>

7.4 JSONP的缺点

JSONP默认发起js脚本请求，<script>标签默认发起get请求，没有post请求

7.5 jQuery中的JSONP

?name=zs&age=20是我们希望通过JSONP发送给服务器的数据

7.6 自定义参数及回调函数名称 

改参数直接在jsonp：“把callback改成你想要的”

 7.7 jQuery中JSONP的实现过程

<body>
  <button id="btnJSONP">发起JSONP数据请求</button>

  <script>
    // $(function ()jQuery的入口函数
    $(function () {
      $('#btnJSONP').on('click', function () {
        $.ajax({
          url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义',
          dataType: 'jsonp',
          jsonpCallback: 'abc',
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

在浏览器中检查head标签中动态新增script标签（点击的时候），前提在Network中把网速降到Slow 3G，把url动态显示在head里面（由script包裹）

Bella..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端与后端连接，Ajax，axios，jquery等练习
07-18
Ajax、axios和jQuery是实现这种通信的常用工具，它们允许前端与后端进行异步数据交换，提高了用户体验。下面将详细讲解这些技术以及相关的跨域解决方案。 **Ajax（Asynchronous JavaScript and XML）** 是一种创建...
Vue-resource实现ajax请求和跨域请求示例
08-31
Vue-resource是Vue.js框架的一个插件，主要用于实现AJAX（异步JavaScript和XML）请求和处理跨域问题，从而方便前后端的数据交互。Vue-resource提供了与jQuery中的$.ajax类似的功能，使得开发者能够轻松地向服务器...
axios、跨域与JSONP、防抖和节流
sjp991012的博客
06-07 2548
axios、跨域与JSONP、防抖和节流
JSONP及Axios
qq_48847448的博客
08-30 2795
先强制缓存 再 协商缓存文件没变强制缓存 文件变了协商缓存强制缓存不会请求 协商缓存会请求。
Ajax学习笔记（二）：jQuery 中的 AJAX、axios发送AJAX请求、AJAX-jQuery通用方法发送AJAX请求、fetch发送AJAX请求、同源策略、JSONP、CORS
最新发布
weixin_62764364的博客
04-09 1068
type:设置返回内容格式，xml, html, script, json, text, _default。实现用户校验，服务端响应体是一个函数，先声明handle函数，然后创建script标签，利用src属性请求数据。type:设置返回内容格式，xml, html, script, json, text, _default。AJAX默认遵循同源策略。这是一个跨原的一个请求的设置，匿名的意思，加上这个请求时将不会写在当前域名的。案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持。
Ajax同源政策--学习
weixin_43482965的博客
04-02 326
一、Ajax请求限制 Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。 二、什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这...
使用Ajax发起JSONP请求
qq_43808342的博客
12-18 1910
对基于Ajax发起的JSONP请求做了一个简单的总结
详解Vue 开发模式下跨域问题
08-30
2. 使用 Axios 或 jQuery 的 Ajax 方法：在前端使用 Axios 或 jQuery 的 Ajax 方法发送请求，并添加 withCredentials=true 选项。 3. 使用 Node.js 代理：使用 Node.js 作为代理服务器，转发请求到目标域名。 4. ...
vue跨域解决方法
08-29
使用 JQuery 提供的 JSONP 来解决跨域问题。例如： methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', dataType: 'JSONP', success: function (res)...
vue实现跨域的方法分析
10-16
在Vue中，如果已经引入了jQuery库，可以使用`$.ajax`的`dataType: 'jsonp'`选项来实现跨域。例如： ```javascript methods: { getData () { var that = this; $.ajax({ url: 'yoururl', type: 'GET', ...
axios-jsonp:适用于axios的jsonp适配器
04-30
适用于axios的jsonp适配器 支持承诺，支持取消，与xhr相同 安装 npm install axios-jsonp 用法 let axios = require('axios'); let jsonpAdapter = require('axios-jsonp'); axios({ url: '/jsonp', adapter: jsonpAdapter, callbackParamName: 'c' // optional, 'callback' by default }).then((res) => { });
Ajax中的JSONP
weixin_46048542的博客
08-04 2077
如果两个页面的。
使用 JSONP 实现跨域（速通）
高大志leo的博客
08-15 3429
两分钟，使用 JSONP 实现跨域。
Ajax基础：发送jsonp请求（jsonp、jsonCallback）
热门推荐
昔冰_G的博客
10-01 1万+
jsonp走的是get请求方式，也就是ajax的默认请求方式； ajax方法中也涵盖了jsonp请求，可以通过ajax方法来发送jsonp请求； <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt
ajax的jsonp原理,JSONP原理及实现
weixin_35763055的博客
08-05 596
基本原理基本原理： 主要就是利用了 script 标签的src没有跨域限制来完成的。执行过程执行过程：前端定义一个解析函数(如: jsonpCallback = function (res) {})通过params的形式包装script标签的请求参数，并且声明执行函数(如cb=jsonpCallback)后端获取到前端声明的执行函数(jsonpCallback)，并以带上参数且调用执行函数的方式传...
跨域问题及解决方案：jsonp解决跨域、ajax解决跨域、vue的跨域解决方案
*
03-11 404
一.什么是跨域 跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。 当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域问题 1.使用jsonp实现: 网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
春风若有怜花意，可否许我再少年
11-18 294
AJAX的跨域问题使用设置响应头和JsonP的方式实现跨域------AJAX
axios jsonp解决跨域
06-28
回答1：</h3><br/>Axios可以通过使用JSONP来解决跨域问题。JSONP是JSON with Padding的缩写，是一种解决跨域请求的方法。JSONP通过在请求URL中传递一个回调函数名称，服务器端将数据包装在该回调函数的调用中返回给...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值