• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

一、了解

1.旧版XMLHttpRequest的缺点

它只支持文本数据的传输,不能用来读取和上传文件。

发送和接收数据时,没有进度信息,只能给出完成的提示。

2.XMLHttpRequest Level2的新功能

您可以设置HTTP请求的时间限制。

您可以使用FormData对象来管理表单数据。

你可以上传文件。

可以获得数据传输的进度信息。

二、设置HTTP请求时限(最后整体代码放在下面)

有时候,Ajax操作很费时间,不知道要花多长时间。如果网速慢,用户可能要等很久。新版XMLHttpRequest对象增加了timeout属性,可以将HTTP请求的时间限制设置为:

nh5j1yrrchc4593.png

上面的语句将最大等待时间设置为3000毫秒。超过此时间限制后,HTTP请求将自动停止。还存在指定回调函数3360的超时事件。

1uwamadyo0x4594.png

代码示例:

!声明文档类型

html lang='en '

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '

meta name=' viewport ' content=' width=device-width,initial-scale=1.0 '

标题文档/标题

/头

身体

/body

脚本

var xhr=new XMLHttpRequest()

//设置超时。

xhr.timeout=3000

//设置超时后的处理功能。

xhr.ontimeout=function () {

Console.log('请求超时');

}

xhr.open('GET ',' http://www . Liu longbin . top :3006/API/GET books ')

xhr.send()

xhr . onreadystatechange=function(){

if(xhr . ready state===4 xhr . status===200){

console . log(xhr . responsetext);

}

}

/脚本

/html

三、FormData对象管理表单数据

Ajax操作通常用于提交表单数据。为了方便表单处理,HTMLS增加了FormData对象,可以模拟表单操作3360。

tv2clslpays4595.png

代码示例:

!声明文档类型

html lang='en '

meta charset='UTF-8 '

meta http-equiv=' X-UA-Compatible ' content=' IE=edge '

meta name=' viewport ' content=' width=device-width,initial-scale=1.0 '

标题文档/标题

/头

身体

/body

脚本

//1.创建formData实例

var fd=ne

w 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() xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } } </script> </html>

FormData对象也可以用来获取网页表单的值,示例代码如下:

ayv41zvw40y4596.png

 

 

 示例代码:

<!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="from1">
        <input type="text" name="uname" autocomplete="off">
        <input type="password" name="upwd">
        <button type="submit">提交</button>
    </form>
</body>
<script>
    // 1,通过DOM操作,获取到form表单元素
    var form = document.querySelector('#form1')
    form.addEventListener('submit', function (e) {
        // 阻止默认提交行为
        e.preventDefault()
        // 创建FormData,快速获取到 form表单中的数据
        var fd = new FromData(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.statusText));
            }
        }
    })
</script>
</html>

四、上传文件

新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件。

实现步骤:

 1.定义UI结构

 2.验证是否选择了文件

 3.向FormData中追加文件

 4.使用xhr 发起上传文件的请求

 5.监听onreadystatechange事件

定义UI结构:

e4os2z4qgip4597.png

 

 

 示例代码:

<!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" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
</html>

2.验证是否选择了文件

vlcu5pxujmf4598.png

 

 

 代码示例:

<!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" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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('请选择要上传的文件!')
        }
        console.log('用户选择了待上传的文件');
    })
</script>
</html>

3.向FormData中追加文件

tyaxllnigmp4599.png

示例代码:

<!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" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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])
    })
</script>
</html>

 

4.使用xhr发起上传文件的请求

d3jvwpicslf4600.png

 

 

 示例代码:

<!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" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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()
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
        xhr.send(fd)
    })
</script>
</html>

5.监听onreadystatechange事件

okidsljgz244601.png

示例代码:

<!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" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签 来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800">
</body>
<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()
        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) {
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else {
                    // 上传失败
                    console.log('上传失败' + data.message);
                }
            }
        }
    })
</script>
</html>

五、显示文件上传进度

新版本的XMLHttpRequest对象中,可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度.

示例代码:

<!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="/js文件/bootstrap.css">
    <script src="/js文件/jquery-3.6.0.js"></script>
</head>
<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- 进度条 -->
    <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">
</body>
<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()
        // 监听文件上传的进度
        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                // 计算出上传的进度
                var procentComplete = Math.ceil((e.loaded / e.total) * 100)
                console.log(procentComplete);
                // 动态设置进度条
                $('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete + '%')
            }
        }
        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) {
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else {
                    // 上传失败
                    console.log('上传失败' + data.message);
                }
            }
        }
    })
</script>
</html>

4.监听上传完成的事件

sa05n3h5gbb4602.png

 

 

 整体代码:

<!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="/js文件/bootstrap.css">
    <script src="/js文件/jquery-3.6.0.js"></script>
</head>
<body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <!-- 进度条 -->
    <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">
</body>
<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()
        // 监听文件上传的进度
        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                // 计算出上传的进度
                var procentComplete = Math.ceil((e.loaded / e.total) * 100)
                console.log(procentComplete);
                // 动态设置进度条
                $('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete + '%')
            }
        }
        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)
                if (data.status === 200) {
                    // 上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else {
                    // 上传失败
                    console.log('上传失败' + data.message);
                }
            }
        }
    })
</script>
</html>

 

Link to comment
Share on other sites