0
点赞
收藏
分享

微信扫一扫

接文件“服务器的基本概念与Ajax.md” 103集后

sunflower821 2022-04-05 阅读 81

XMLHttpRequest Level2新特性:

旧版XMLHttpRequest缺点:

1、只支持文本数据的传输,无法用来读取和上传文件

2、传送和接收数据时没有进度信息,只提示有没有完成

Level2的新功能:

1、可以设置http请求的时限 xhr.timeout=3000 / xhr.timeout=function(){ alert(‘此函数为前面语句的配套,当等待时间超过3000毫秒就自动停止请求并调用此回调函数’)}

2、可以使用FormData对象管理表单数据
在这里插入图片描述
在这里插入图片描述

3、可以上传文件

<body>
    <!-- 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br/>
    <!-- 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<script>
    // 获取上传文件的按钮
    var btnUpload=document.querySelector('#btnUpload')
    btnUpload.addEventListener('click',function(){
        // 获取选择的文件列表
        var files=document.querySelector('#file1').files
        if(files.length <= 0){
            return alert("请选择要上传的文件!")
        }
        //向FormData中追加文件
        var fd=new FormData()
        fd.append('avatar',files[0])

        // 显示文件的上传进度  异步回调
        var xhr=new XMLHttpRequest()
        // 监听xhr.upload的onprogress事件
        xhr.uplaod.onprogress=function(){
            // e.lengthComputable是一个布尔值,表示当前上传的资源是否具有可计算的长度
            if(e.lengthComputable){
                //e.loaded已传输的字节
                //e.total需传输的字节
                var percentComplete=Math.ceil((e.loaded/e.total)*100);
                console.log(percentComplete)
                //可以使用bootstrap库里面的进度条组件修改样式
            }
        }

        // 使用xhr发起上传文件的请求
        var xhr=new XMLHttpRequest()
        xhr.open('POST','http://www.liulongbing.top:3006/api/uplaod/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.liulongbing.top:3006'+data.url
                }else{
                    console.log("上传失败"+data.message)
                }
            }
        }
    })
</script>

使用JQuery上传文件:

<body>
    <input type="file" id="file1">
    <button id="btnUpload">上传文件</button>
    <script>
        $(function(){
            // ajax请求开始时执行ajaxStart函数,自jq版本1。8起该方法只能被附加到文档
            // 监听ajax请求被发起
            // $(document).ajaxStart()函数会监听当前文档的所有的ajax请求
            $(document).ajaxStart(function(){
                $('#loading').show()
            })
            // 监听ajax完成
            $(document).ajaxStop(function(){
                $('#loading').hide()
            })

            $('#btnUpload').on('click',function(){
                //将JQuery对象转化为DOM对象,并获取选中的文件列表
                var files=$('file1')[0].files
                //判断是否选择了文件
                if(files.length<=0){
                    return alert('请选择文件后再上传')

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

                // 发起jquery请求,上传文件
                $.ajax({
                    method:'POST',
                    url:"",
                    data:fd,
                    // 不修改content-TYpe属性,使用formdta默认的content-type的值
                    contentType:false,
                    //不对formdata中的数据进行url编码,而是将formdata数据原样发送到服务器
                    processData:false,
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>
</body>

4、可以获取数据传输的进度信息

axios

axios是专注于网络请求的库,相比于原生的XMLHttpRequest对象,axios简单易用,更加的轻量化,只专注与网络请求
在这里插入图片描述
axios也提供了类似于jq中的$.ajax()函数直接发起请求
axios({
methods:‘请求类型’,
url:‘请求地址’,
data:{post请求的数据},
params:{get请求的参数}
}).then(callback)

同源策略和跨域

同源:如果两个页面的协议、域名和端口都相同,则两个页面具有相同的源(没写端口号默认为80)
在这里插入图片描述
在这里插入图片描述
不满足同源的则为跨域(返回NO “Acess-Control-Allow-Origin”)

在这里插入图片描述
如何实现跨域请求:
在这里插入图片描述
在这里插入图片描述
JSONP不属于ajax,因为他的请求没有使用到xhr
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
防抖应用场景:搜索框提醒列表,王者回城
节流应用场景:鼠标不断触发某个事件只在单位时间内触发一次、懒加载时监听计算滚动条的位置,不必每次发动都触发,降低计算频率,不浪费cpu资源

在这里插入图片描述

HTTP加强

找到数组中的最大值:
var value=[1,88,7,2,3];
var max=Math.max.apply(Math,value)

待更新。。。

举报

相关推荐

0 条评论