338 XMLHttpRequest 2.0

时间  2020-05-29
标签 xmlhttprequest 2.0 繁體版
原文   原文链接

XMLHttpRequest是一个javascript内置对象，使得Javascript能够进行异步的HTTP通讯。2008年2月，就提出了XMLHttpRequest Level 2 草案。javascript

老版本的XMLHttpRequest的缺点：php

// 1. 仅支持传输文本数据，没法传说二进制文件，好比图片视频等。
// 2. 传输数据时，没有进度信息，只能提示完成与否。
// 3. 受到了"同源策略"的限制

新版本的功能：css

// 1. 能够设置timeout 超时时间
// 2. 可使用formData对象管理表单数据
// 3. 能够获取数据传输的进度信息

1-设置超时
    xhr.timeout = 1000;
    xhr.ontimeout = function () {};
2-ajax上传文件
    FormData对象
3-监听上传文件进度的功能
    xhr.upload.onprogress = function () {}

注意：咱们如今使用new XMLHttpRequest建立的对象就是2.0对象了，咱们以前学的是1.0的语法，如今学习一些2.0的新特性便可。html

timeout设置超时

xhr.timeout = 3000;//设置超时时间
xhr.ontimeout = function(){
  alert("请求超时");
}
<!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="./form.css">
</head>
<body>
    <form >
        用户名：
        <input type="text" >
        密码：
        <input type="password" >
        <!-- <input type="submit" value="登陆" class="submit"> -->
        <!-- <button>我是button按钮</button> -->
        <input type="button" value="登陆按钮">
    </form>

    <script>
        // submit 按钮，和双标签button按钮，默认行为都会刷新页面，若是发生ajax请求，就须要阻止他们默认行为；
        // 点击按钮，向后台发送请求，
        document.querySelector('input[type="button"]').onclick = function () {
            // 1-建立一个XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 2-设置请求报文
            // 2-1请求行
            xhr.open('get', './timeout.php');
            xhr.timeout = 2000; // 设置超时
            xhr.ontimeout = function () {
                alert('网络超时，请重试!');
            }
            // 2-2请求头
            // 2-3请求主体
            xhr.send(null);


            //3-监听服务器响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var r = xhr.responseText; 
                    console.log(r);                    
                }
            }
        }
    </script>
</body>
</html>

formData管理表单数据

formData对象相似于jquery的serialize方法，用于管理表单数据java

//使用特色： 
//1. 实例化一个formData对象， new formData(form); form就是表单元素
//4. formData对象能够直接做为 xhr.send(formData)的参数。注意此时数据是以二进制的形式进行传输。
//5. formData有一个append方法，能够添加参数。formData.append("id", "1111");
//6. 这种方式只能以post形式传递，不须要设置请求头，浏览器会自动为咱们设置一个合适的请求头。

代码示例：jquery

//1. 使用formData必须发送post请求
    xhr.open("post", "02-formData.php");
    
//2. 获取表单元素
var form = document.querySelector("#myForm");
//3. 建立form对象，能够直接做为send的参数。
var formData = new FormData(form);

//4. formData可使用append方法添加参数
formData.append("id", "1111");

//5. 发送，不须要指定请求头，浏览器会自动选择合适的请求头
xhr.send(formData);

文件上传

之前，文件上传须要借助表单进行上传，可是表单上传是同步的，也就是说文件上传时，页面须要提交和刷新，用户体验不友好，xhr2.0中的formData对象支持文件的异步上传。ajax

var formData = new FormData();
//获取上传的文件，传递到后端
var file = document.getElementById("file").files[0];
formData.append("file", file);
xhr.send(formData);
<!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="./form.css">
    <style>
        .info {
            width: 500px;
            min-height: 200px;
            border: 1px solid red;
            margin: 0 auto;
        }
        
        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <form>
        用户名：
        <input type="text" name="username"> 密码：
        <input type="password" name="password"> 头像：
        <input type="file" name="photo">
        <input type="button" value="注册" class="btn">
    </form>

    <div class="info"></div>

    <script>
        // 点击按钮，获取表单是数据和图片，使用ajax发送给服务器
        // jquery的serialize表单序列化：（1）是jquery的方法；（2）只能序列化表单基本数据，文件不行
        // xhr2.0中新增了一个FormData对象，用于管理表单数据和文件
        // 注意点：
        //  一、FormData要求 必须使用post方式进行提交 
        //  二、FormData不须要手动设置请求头，浏览器会自动设置一个合适请求头
        //  FormData 使用二进制的形参进行传递
        document.querySelector('.btn').onclick = function() {
                var form = document.querySelector('form'); //获取表单数据
                let fd = new FormData(form)
                var xhr = new XMLHttpRequest(); //使用ajax向后台发送请求
                xhr.open('post', './02-formData.php'); //请求报文
                xhr.send(fd); // 只需发送FormData实例便可

                //监听
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText);
                        var r = xhr.responseText;
                        document.querySelector('.info').innerHTML = r;
                    }
                }
            }
            //顺丰   包子 馒头 
            //中国邮政： 寄一切  分子 原子 01010101 010101010100
    </script>
</body>

</html>
<?php 
    // echo '<pre>';
    // print_r($_POST);
    // echo '</pre>';

    // echo '<pre>';
    // print_r($_FILES);
    // echo '</pre>';

    //转移文件位置
    move_uploaded_file($_FILES['photo']['tmp_name'], './test.png');

    echo '<img src="./test.png"/>';
    // echo '<img src="E:/图片/桌面图片2/康宁/康宁1.jpg>';
?>

显示文件进度信息

xhr2.0还支持获取上传文件的进度信息，所以咱们能够根据进度信息能够实时的显示文件的上传进度。后端

1. 须要注册 xhr.upload.onprogress = function(e){} 事件，用于监听文件上传的进度.注意：须要在send以前注册。
2. 上传的进度信息会存储事件对象e中
3. e.loaded表示已上传的大小   e.total表示整个文件的大小

代码参考：浏览器

xhr.upload.onprogress = function (e) {
  inner.style.width = (e.loaded/e.total*100).toFixed(2)+"%";
  span.innerHTML = (e.loaded/e.total*100).toFixed(2)+"%";
}

xhr.send(formData);

若是上传文件超过8M，php会报错，须要进行设置，容许php上传大文件。服务器

<!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="./form.css">
    <style>
        .out {
            position: relative;
            width: 800px;
            height: 20px;
            border: 1px solid red;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 10px;
        }
        
        .in {
            width: 5%;
            height: 100%;
            background-color: hotpink;
        }
        
        span {
            position: absolute;
            left: 48%;
            top: 0;
        }
    </style>
</head>

<body>
    <form>
        用户名：
        <input type="text" name="username"> 密码：
        <input type="password" name="password"> 头像：
        <input type="file" name="photo">
        <input type="button" value="注册" class="btn">
    </form>


    <div class="out">
        <div class="in"></div>
        <span>0</span>
    </div>

    <script>
        document.querySelector('.btn').onclick = function() {
            //获取表单数据
            var fd = new FormData(document.querySelector('form'));
            var num = 100;
            fd.append('num', 100);
            fd.append('num1', 100);
            var xhr = new XMLHttpRequest(); //经过ajax来发送
            xhr.open('post', './03-progress.php'); //请求报文

            // 注册监听文件上传事件
            xhr.upload.onprogress = function(e) {
                // e 事件对象， 存储的是当前事件相关信息
                // 获取文件上传的进度
                // e.total  文件总大小
                // e.loaded 已经上传大小
                var value = e.loaded / e.total;
                console.log(value);
                //0.5 --> 50%  0.5* 100 + '%';
                //把进度设置给进度条
                document.querySelector('.in').style.width = value * 100 + '%';
                document.querySelector('span').innerText = parseInt(value * 100) + '%';
            }

            xhr.send(fd);

            //监听
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>

</html>
<?php 
    echo 'hehe';
?>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程