Ajax加强

最新推荐文章于 2023-06-13 14:05:38 发布

添福宝615

最新推荐文章于 2023-06-13 14:05:38 发布

阅读量108

点赞数

分类专栏：笔记文章标签： ajax p2p javascript

本文链接：https://blog.csdn.net/weixin_61923897/article/details/122481993

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、XMLHttpRequest的基本使用

<!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>
    <script>
        // 1.创建XHR对象
        var xhr = new XMLHttpRequest()


        // 2.调用open函数
        xhr.open('GET' ,'http://www.liulongbin.top:3006/api/getbooks')


        // 3.调用send函数
        xhr.send()

        // 4.监听onreadystatechange 事件
        xhr.onreadystatechange = function(){
            // 固定的判断条件：  xhr.readyState === 4 && xhr.status === 200
            if(xhr.readyState === 4 && xhr.status === 200){
                // 获取服务器响应的数据
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</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>
    <script>
        var 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);
            }
        }
    </script>
</body>
</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>
    <script src="./lib/jquery.js"></script>

</head>
<body>
    <script>
        // $.get('http://www.liulongbin.top:3006/api/getbooks' , {id: 1 ,bookname:'西游记'} ,function(res){
        //     console.log(res);
        // })

        $.ajax({
            method:'get' ,
            url:'http://www.liulongbin.top:3006/api/getbooks' ,
            data:{
                id:1,
                bookname:'西游记'
            },
            success:function(res){
                console.log(res);
            }
        })
    </script>
</body>
</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>
    <script>
        var str = '四叶草'
        var str2 =  encodeURI(str)
        console.log(str2);
        console.log('-----------');
        var str3 = decodeURI('%E5%8F%B6')
        console.log(str3);
    </script>
</body>
</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>
    <script>
        // 1.创建xhr 对象
        var xhr = new XMLHttpRequest()
        // 2.调用open函数
        xhr.open('POST' , 'http://www.liulongbin.top:3006/api/addbook')
        // 3。设置Content.Type属性
        xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded')
        // 4.调用send函数
        xhr.send('bookname= 水浒传&author=施耐庵&publisher=中国人民出版社')
        // 5.监听事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</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>
    <script>
        var jsonStr = '{"a" : "TFBOYS" , "b": "四叶草"}'
        var obj = JSON.parse(jsonStr)
        console.log(obj);
        var obj2 = {a: 'TFBOYS' , b: '添福宝'}
        var jsonStr2 = JSON.stringify(obj2)
        console.log(jsonStr2);
        console.log(typeof jsonStr2);
    </script>
</body>
</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>
    <script>
        var 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){
                console.log(xhr.responseText);
                console.log(typeof xhr.responseText);


                var result = JSON.parse(xhr.responseText)
                console.log(result);
                console.log(typeof result);
            }
        }
    </script>
</body>
</html>

三、封装自己的Ajax函数

<!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>
    <script src="./js/itheima.js"></script>
</head>
<body>
    <script>
        itheima({
            method: 'GET' ,
            url:'http://www.liulongbin.top:3006/api/getbooks',
            // data:{
            //     id:1
            // },
            success:function(res){
                console.log(res);
            }
        })




        itheima({
            method: 'post' ,
            url:'http://www.liulongbin.top:3006/api/addbook',
            data:{
                bookname: '水浒传' ,
                author: '施耐庵' ,
                publisher : '北京图书出版社'
            },
            success:function(res){
                console.log(res);
            }
        })
    </script>
</body>
</html>

四、XMLHttpRequest Level2的新特性

<!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>
    <script>
        var  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);
            } 
        }
    </script>
</body>
</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>
    <script>
        // 1.创建 FormData 实例
        var fd = new FormData()

        // 2.调用 append 函数，像 fd 中追加函数
        fd.append('uname' , 'zs')
        fd.append('upassword' , '123')

        // 3.创建xhr 对象
        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>
</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>
    <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')

        form.addEventListener('submit' , function(e){
            // 阻止表单的默认提交行为
            e.preventDefault()

            // 创建 Formdata ，快速获取到 form表单中的数据
            var fd = new FormData(form)
            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>
</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>
    <!-- 1.文件选择框 -->
    <input type="file" name="" 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.获取到用户选择的文件列表
            var files = document.querySelector('#file1').files
            if(files.length <= 0 ){
                 alert('请选择要上传的文件')
            }
            // console.log('用户选择了要上传的文件');

            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)
                //    console.log(data);
                if(data.status === 200){
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else{
                    // 上传失败
                    console.log('图片上传失败！' +data.message);
                }

                }
            }
        })
    </script>
</body>
</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>
    <!-- 1.文件选择框 -->
    <input type="file" name="" 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.获取到用户选择的文件列表
            var files = document.querySelector('#file1').files
            if(files.length <= 0 ){
                 alert('请选择要上传的文件')
            }
            // console.log('用户选择了要上传的文件');

            var fd = new FormData()
            // 将用户选择的文件添加到 FormData中
            fd.append('avatar' , files[0])


            var xhr = new XMLHttpRequest()

            // 监听文件上传的进度
            xhr.upload.onprogress = function(e){
                if(e.lengthComputable){
                    // 计算出上传的进度
                   var percentComplete = Math.ceil(( e.loaded/e.total)*100)
                   console.log(percentComplete);
                }
            }




            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)
                //    console.log(data);
                if(data.status === 200){
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else{
                    // 上传失败
                    console.log('图片上传失败！' +data.message);
                }

                }
            }
        })
    </script>
</body>
</html>

2、在Bootstrap 中文官网中，组件界面中找到自己想要的进度条样式，然后复制相关代码到自己编写的VScode文件中，引入Bootstrap.css样式，删除不必要的属性即可

<!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">
    <script src="./lib/jquery.js"></script>
</head>
<body>
    <!-- 1.文件选择框 -->
    <input type="file" name="" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>

    <!--bootstrap中的进度条  -->
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-bar-striped active"  style="width: 0%" id="percent">
          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 ){
                 alert('请选择要上传的文件')
            }
            // console.log('用户选择了要上传的文件');

            var fd = new FormData()
            // 将用户选择的文件添加到 FormData中
            fd.append('avatar' , files[0])


            var xhr = new XMLHttpRequest()

            // 监听文件上传的进度
            xhr.upload.onprogress = function(e){
                if(e.lengthComputable){
                    // 计算出上传的进度
                   var percentComplete = Math.ceil(( e.loaded/e.total)*100)
                //    console.log(percentComplete);
                // 动态设置进度条
                $('#percent').attr('style' , 'width:' 
                + percentComplete + '%;' ).html(percentComplete + '%')


                }
            }

            xhr.upload.onload = function(){
                $('#percent').removeClass().addClass('progress-bar progress-bar-success ')
            }




            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)
                //    console.log(data);
                if(data.status === 200){
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else{
                    // 上传失败
                    console.log('图片上传失败！' +data.message);
                }

                }
            }
        })
    </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>
    <script src="./lib/jquery.js"></script>
</head>
<body>
    <input type="file" name="" id="file1">
    <button id="btn">上传文件</button>
    <br>
    <img src="./img/loading.gif" alt="" style="width:200px; display: none;" id="loading">


    <script>
        $(function(){

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


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




            $('#btn').on('click' , function(){
               var files = $('#file1')[0].files
               if(files.length <=0){
                  return alert('请选择要上传的文件') 
               }
            //    console.log('ok');
            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, 这两个必须写
                processData:false,
                contentType:false,
                success: function(res){
                    console.log(res);
                }
            })
            })
        })
    </script>
</body>
</html>

六、axios

<!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>
    <script src="./lib/axios.js"></script>
</head>
<body>
    <button id="btn1">发起GET请求</button>
    <button id="btn2">发起POST请求</button>
    <button id="btn3">直接发起GET请求</button>
    <button id="btn4">直接发起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){
                console.log(res.data);
            })
        })


        document.querySelector('#btn2').addEventListener('click' , function(){
            var url = 'http://www.liulongbin.top:3006/api/post'
            var dataObj = {address:'遵义' ,location:'xxx'}
            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: 'yeyye' ,age:67}
            axios({
                method: 'GET' ,
                url: url,
                params: paramsdata
            }).then(function(res){
                console.log(res);
            })
        })

        document.querySelector('#btn4').addEventListener('click' , function(){
            axios({
                method: 'POST' ,
                url: 'http://www.liulongbin.top:3006/api/post',
                data:{
                    name: 'TFBOYS',
                    age:9,
                    number:3
                }
            }).then(function(res){
                console.log(res);
            })
        })
    </script>
</body>
</html>

添福宝615

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax加强

一、XMLHttpRequest的基本使用<!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, in...
复制链接

扫一扫