前端学习--Ajax(3) XHR/axios

这篇具有很好参考价值的文章主要介绍了前端学习--Ajax(3) XHR/axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、XMLHttpRequest

1.1 概念

XMLHttpRequest(XHR)是一种用于在客户端和服务器之间发送HTTP请求的JavaScript API。它允许客户端在不重新加载整个页面的情况下向服务器发送请求,并根据服务器的响应更新页面的局部内容。Ajax是基于XHR封装的。

1.2 使用xhr发起get请求

步骤

  1. 创建XHR对象
  2. 调用XHR.open()函数
  3. 调用XHR.send()函数
  4. 监听xhr.onreadystatechange事件
let xhr = new XMLHttpRequest()
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function(){
     if(xhr.readyState === 4 && xhr.status === 200){ //固定写法 和数据对象中的status要区分
           console.log(xhr.responseText)
     }
}

 1.3 XHR的readyState属性

0

UNSENT XHR对象已经创建,但是未调用open方法
1 OPENED open()方法已经被调用
2 HEADERS_RECEIVED send()方法已经被调用,响应头也被接受
3 LOADING 数据接收中,此时response属性已经包含部分数据
4 DONE Ajax请求完成,数据传输完成或失败

1.4 使用XHR发起带参数的get请求

        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')
        //问号后面拼接的是查询字符串,多个参数可以使用&拼接
        xhr.send()
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){ 
                console.log(xhr.responseText)
            }
        }

1.5 查询字符串

get请求携带参数的本质是将参数以查询字符串的形式追加到url的后面

$.get('url',{name:'zs',age:20},function(){})
//等价于
$.get('url?name=zs&age=20',function(){})

1.6 URL编码

如果url中包含中文,要编码成英文

encodeURI()//编码
decodeURI()//解码

一般来说浏览器会自动解析url

1.7 使用xhr发起post请求

步骤

  1. 创建xhr对象
  2. 调用xhr.open()函数
  3. 设置Content-Type属性
  4. 调用xhr.send()函数,指定要发送的数据
  5. 监听xhr.onreadystatechange事件
        let xhr = new XMLHttpRequest()
        xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send('bookname=八月博客&author=august&publisher=洋槐出版社')
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText)
            }
        }

二、数据交换格式

服务器端与客户端之间的数据传输与交换的格式

前端的两种数据格式是XML与JSON

2.1 XML

Extensible Markup Language 可扩展标记语言,被设计用来传输和存储数据

传输效率低,用JS解析比较麻烦

2.2 JSON

JavaScript Object Notation,Javascript对象表示法,本质是字符串

轻量级的文本数据交换格式,作用上类似于XML

JSON包含对象和数组两种结构

对象结构

{
    key:value,
    key:value,
    ...
}

其中key必须是双引号包裹的英文字符串,value的数据类型可以是数字、字符串、布尔值、null、对象、数组六种类型,不允许出现function和undefined

数组结构

[ ]括起来的内容

数组结构的类型可以是数字、字符串、布尔值、null、对象、数组六种类型

JSON不能写注释,不能用单引号表示字符串,最外层必须是对象或数组格式

作用:在本地与网络传输数据

2.3 JSON与JS中对象的关系

 JSON实际上是一种JavaScript对象的表示方式,本质是字符串

JSON.parse()

JSON转换为JS对象

JSON.stringfy()

JS对象转换为JSON

// JavaScript对象
const person = {
  name: 'Alice',
  age: 30,
  hobbies: ['reading', 'traveling'],
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

// 将JavaScript对象转换为JSON格式字符串
const jsonStr = JSON.stringify(person);
console.log(jsonStr); 
// 输出: {"name":"Alice","age":30,"hobbies":["reading","traveling"],"address":{"street":"123 Main St","city":"Anytown","state":"CA"}}

// 将JSON格式字符串转换回JavaScript对象
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
// 输出: { name: 'Alice', age: 30, hobbies: [ 'reading', 'traveling' ], address: { street: '123 Main St', city: 'Anytown', state: 'CA' } }

三、XMLHttpRequest Level2

3.1 认识

新功能

  • 设置HTTP请求的时限
  • 使用FormData对象管理表单数据
  • 可以上传文件
  • 获取数据传输的进度信息

3.2 设置HTTP请求时限 

        let xhr = new XMLHttpRequest()
        xhr.timeout = 30
        xhr.ontimeout = function(){ //指定超时的回调函数
            console.log('请求超时')
        }
        xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
        xhr.send()

        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText)
            }
        }

3.3 FormData对象管理表单数据 

        let fd = new FormData()
        //追加数据
        fd.append('uname','zs')
        fd.append('age',18)
        let 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(xhr.responseText)
                console.log(JSON.parse(xhr.responseText))
            }
        }

3.4 使用formdata快速获取表单数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" class="form1">
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="pw">
        <button type="submit">提交</button>
    </form>
    <script>
        let form = document.querySelector('.form1')
        let xhr = new XMLHttpRequest()
        form.addEventListener('submit',function(e){
            e.preventDefault()

            let fd = new FormData(form)
            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(xhr.responseText)
            }
        }
        })
    </script>
</body>
</html>

3.5 上传文件

原生JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <style>
        img{
            width: 300px;
        }
        .progress{
            width: 300px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <input type="file" name="" id="file1">
    <button id="btnUpload">上传文件</button>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active"  style="width: 0%">
          <span class="sr-only"></span>
        </div>
      </div>
    <div>
        <img src="" alt="">
    </div>
    <script>
        const bt1 = document.querySelector('#btnUpload')
        
        let xhr = new XMLHttpRequest()
        let fd = new FormData()
        bt1.addEventListener('click',function(){
            let files = document.querySelector('#file1').files
            if(files.length <= 0)return alert('请选择文件!')
            //将用户上传的文件添加到formdata中
            fd.append('avatar',files[0])
            xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')//文件请求类型必须选择post
            xhr.send(fd)
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    let data = JSON.parse(xhr.responseText)
                    if(data.status === 200){
                        console.log(data)
                        document.querySelector('img').src = 'http://www.liulongbin.top:3006' + data.url
                    }else{
                        alert(data.message)
                    }
                }
            }
            
        })

        const span = document.querySelector('.sr-only')
        const progress = document.querySelector('.progress-bar')
        xhr.upload.onprogress = function(e){
            if(e.lengthComputable){ //布尔值 表示当前上传的资源是否具有可计算的长度
                let percentComplete = Math.ceil((e.loaded / e.total) * 100)
                progress.style.width = `${percentComplete}%`
                span.innerHTML = percentComplete + '%'
            }
        }

    </script>
</body>
</html>

jQuery的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="file1">
    <button id="btnUpload">上传文件</button>
    <div>
        <img id="loading" src="./img/loading.gif" alt="" style="display:none;">
    </div>

    <script src="../lib/jquery.js" ></script>
    <script>
        $(function(){
            //jq实现loading效果
            $(document).ajaxStart(function(){
                $('#loading').show()
            })

            $(document).ajaxStop(function(){
                $('#loading').hide()
            })
                
            
            $('#btnUpload').on('click',function(){
                let files = $('#file1')[0].files
                if(files.length <= 0)return alert('请选择文件后再上传')

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

                $.ajax({ //上传文件必须调用$.ajax
                    method:'POST',
                    url:'http://www.liulongbin.top:3006/api/upload/avatar',
                    data:fd,
                    processData:false, //不对formdata中的url进行编码 原样发送到服务器
                    contentType:false, //使用formdata默认的contentType
                    success:function(res){
                        console.log(res)
                    }
                })
                
            })
        })
    </script>
</body>
</html>

四、axios

比jQuery更加轻量,只专注于网络数据请求文章来源地址https://www.toymoban.com/news/detail-425678.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="getbt">GET</button>
    <button id="postbt">POST</button>
    <button id="axios">直接使用axios</button>
    <script src="../lib/jquery.js" ></script>
    <script src="../lib/axios.js"></script>
    <script>
        document.querySelector('#getbt').addEventListener('click',function(){
            const url = 'http://www.liulongbin.top:3006/api/get'
            const obj = {
                name:'zs',
                age:18
            }
            axios.get(url, {params:obj}).then(function(res){
                console.log(res)
            })
        })

        document.querySelector('#postbt').addEventListener('click',function(){
            const url = 'http://www.liulongbin.top:3006/api/post'
            const obj = {
                name:'ls',
                age:20
            }
            axios.post(url, obj).then(function(res){
                console.log(res)
            })
        })

        document.querySelector('#axios').addEventListener('click',function(){
            const url = 'http://www.liulongbin.top:3006/api/get'
            const obj = {
                name:'ww',
                age:22
            }
            axios({
                method:'GET',
                url:url,
                params:obj,
                //data:data, 如果是Post需要将参数放在data   
            }).then(function(res){
                console.log(res)
            })
        })

    </script>
</body>
</html>

到了这里,关于前端学习--Ajax(3) XHR/axios的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【原生Ajax】全面了解xhr的概念与使用。

    ✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享:css重难点教学   Node.js教学 从头开始学习   ajax学习 xhr是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jquery的ajax函数,就是基于xhr对象封装出来的。

    2024年02月02日
    浏览(38)
  • 前端网络请求之JavaScript XHR、Fetch、Axios

    AJAX:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。在不重新加载整个网页的情况下,对网页的某部分进行更新 Fetch:基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 aj

    2024年01月23日
    浏览(50)
  • 前端异步编程全套:xmlhttprequest > ajax > promise > async/await

    同步与异步区别 同步:按顺序,依次执行,向服务器发送请求--客户端做其他操作 异步:分别执行,向服务器发送请求==同时执行其他操作 原生xmlhttprequest 四步骤 创建ajax对象 设定数据的传输方式(get、post),打开连接open() 获得响应数据 属性 描述 onreadystatechange 当readysta

    2024年02月01日
    浏览(71)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(51)
  • 前端如何中断请求 ( axios、原生 ajax、fetch)

    使用场景 在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景: 比如 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这

    2024年02月04日
    浏览(51)
  • 前端终止请求的三种方式(ajax、axios)

    一、原生ajax终止请求 1、abort() ​ XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求,该方法没有参数,也没有返回值。当调用该方法时,如果对应 XMLHttpRequest 对象的请求已经被发送并且正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则

    2024年02月09日
    浏览(47)
  • 前端同步异步讲解--Ajax(axios进阶)的相关操作

    之前我们讲到了数据在前后端传输是依赖xml文件,但是由于时代变迁,他也已经比逐步淘汰,json对象就逐步开始作为数据传输通道的桥梁,忘记的话可以去回顾文章对应的json对象 最全的前端知识之css与jsp介绍-CSDN博客 文章浏览阅读1k次,点赞31次,收藏21次。ok了,宝子们,

    2024年02月21日
    浏览(74)
  • 前端请求数据方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(异步JavaScript和XML)的缩写)是一组Web开发技术,Ajax不是一种技术,而是一个编程概念。AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。 技术实现 用于演示的HTML(或 XHTML)和

    2024年01月22日
    浏览(57)
  • Ajax XHR请求

    XMLHttpRequest 对象用于和服务器交换数据。 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: 方法 描述 open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或

    2023年04月26日
    浏览(28)
  • Ajax XHR响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 属性 描述 responseText 获得字符串形式的响应数据。 responseXML 获得 XML 形式的响应数据。 如果来自服务器的响应并非 XML,请使用 responseText 属性。 responseText 属性返回字符串形式的响应,因此

    2023年04月27日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包