XMLHttpRequest 2级学习

最新推荐文章于 2024-07-13 18:09:05 发布
最新推荐文章于 2024-07-13 18:09:05 发布
阅读量1.9k 收藏 1
点赞数 3
分类专栏： js 文章标签： xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujie19901217/article/details/51137263
版权

老版本的缺点

老版本的XMLHttpRequest对象有以下几个缺点：

  • 只支持文本数据的传送，无法读取和上传二进制文件。
  • 传送和接收数据时，没有进度信息，只能提示有没有完成。
  • 受到”同域限制”，只能向同一域名的服务器请求数据。

新版本的功能

新版本的XMLHttpRequest对象的一些新功能：

  • 可以设置HTTP请求的时限。
  • 可以使用FormData对象管理表单数据。
  • 可以上传文件。
  • 可以请求不同域名下的数据（跨域资源共享，Cross-origin resource sharing，简称 CORS）。
  • 可以获取服务器端的二进制数据。
  • 可以获得数据传输的进度信息。

FormData

XMLHttpRequest 2级定义了FormData类型，这为序列化表单以及创建与表单格式相同的数据提供了便利。
新建FormData对象：

var formData = new FormData();

为它添加表单项：

formData.append('name', 'lisi');
formData.append('age', 12);

最后，直接传送这个FormData对象。这与提交网页表单的效果，完全一样。

xhr.send(formData);

Demo:

<!DOCTYPE html>
<html>
<head>
    <title>FormData</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Fill in the form below:</p>
    <form id="user-info">
        <label for="user-name">姓名:</label>
        <input type="text" id="user-name" name="user-name" /><br>
        <label for="user-email">Email:</label>
        <input type="text" id="user-email" name="user-email" /><br>
        <input type="button" value="Submit" onclick="submitData()" />
    </form>
    <script type="text/javascript">
        function createXHR(){
                    if(typeof XMLHttpRequest){
                        return new XMLHttpRequest();
                    }else if(typeof ActiveXObject){
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
        }
        function submitData(){
            var xhr = createXHR();
            xhr.onreadystatechange = function(event){
                if (xhr.readyState == 4){
                    if (xhr.status == 200 ){
                        console.log(xhr.responseText);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };

            xhr.open("post", "postexample.php", true);
            var form = document.getElementById("user-info");
            xhr.send(new FormData(form));
        }
    </script>
</body>
</html>

postexample.php

<?php
    header("Content-Type: text/plain");
    echo <<<EOF
Name: {$_POST['user-name']}
Email: {$_POST['user-email']}
EOF;
?>

使用FormData的方便之处在于：不必明确在xhr对象上设置请求头部，xhr对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

FormData对象也可以用来获取网页表单的值：

   var form = document.getElementById('myform');
　　var formData = new FormData(form);
　　formData.append('name', 'lisi'); // 添加一个表单项
　　xhr.open('POST', form.action);
　　xhr.send(formData);

超时设定

新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限，表示请求在等待响应多少毫秒之后就停止。在给timeout属性属性设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。

Demo:

<!DOCTYPE html>
<html>
<head>
    <title>Timeout事件</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        function createXHR(){
                    if(typeof XMLHttpRequest){
                        return new XMLHttpRequest();
                    }else if(typeof ActiveXObject){
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
        }
        var xhr = createXHR();
        xhr.onreadystatechange = function(event){
            try {
                if (xhr.readyState == 4){
                    if (xhr.status == 200){
                        alert(xhr.responseText);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            } catch (ex){
                //assume handled by ontimeout
            }
        };

        xhr.open("get", "timeout.php", true);
        xhr.timeout = 1000;//给xhr对象设置了timeout属性，表示请求在等待响应1000毫秒之后停止
        xhr.ontimeout = function(){
            alert("Request did not return in a second.");
        };
        xhr.send(null);
    </script>
</body>
</html>

跨域资源共享（CORS）

新版本的XMLHttpRequest对象，可以向不同域名的服务器发出HTTP请求。这叫做”跨域资源共享”（Cross-origin resource sharing，简称CORS）。
使用”跨域资源共享”的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种”跨域”。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。

例如：

xhr.open('post', 'http://localhost/test.php',true);

进度事件

新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。
它分成上传和下载两种情况：
1.下载的progress事件属于XMLHttpRequest对象
2.上传的progress事件属于XMLHttpRequest.upload对象
有以下6个进度事件：

  • loadstart:在接收到响应数据的第一个字节时触发
  • progress:在接收响应期间持续不断地触发
  • error:在请求发生错误时触发
  • abort:在因为调用abort()方法而终止连续时触发
  • load:在接收到完整的响应数据时触发

  • loadend:在通信完成或者触发error、abort或load事件后触发

    每个请求都是从触发loadstart事件开始，接下来是一或多个progress事件，然后触发error、abort或load事件中的一个，最后以触发loadend事件结束。

Demo:

<!DOCTYPE html>
<html>
<head>
    <title>XHR Progress Event Example</title>
</head>
<body>
    <div id="status"></div>
    <script type="text/javascript">
        function createXHR(){
                    if(typeof XMLHttpRequest){
                        return new XMLHttpRequest();
                    }else if(typeof ActiveXObject){
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }
        }
//主要浏览器接收到了服务器的响应，不管其状态如何，都会触发load事件。
        window.onload = function(){
            var xhr = createXHR();
            xhr.onload = function(event){
                if (xhr.status == 200){
                    console.log(xhr.responseText);
                } else {
                    alert("Request was unsuccessful: " + xhr.status);
                }
            };
            xhr.onprogress = function(event){
                var divStatus = document.getElementById("status");
                if (event.lengthComputable){
                    divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes";
                }
            };
            xhr.open("get", "test.php", true);
            xhr.send(null);
        };
    </script>
</body>
</html>

test.php

<?php
    header("Content-Type: text/plain");
    header("Content-Length: 27");
    echo "Some data";
    flush();
    echo "Some data";
    flush();
    echo "Some data";
    flush();
?>

progress事件会在浏览器接收新数据期间周期性地触发。onprogress事件处理程序会接收到一个event对象，其target属性是XHR对象，包含三个额外的属性：

  • lengthComputable:表示进度信息是否可用的布尔值
  • position:表示已经接收的字节数
  • totalSize:表示根据Content-Length响应头部确定的预期字节数
    利用这些信息，我们可以为用户创建一个进度指示器

ajax无刷新上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ajax无刷新上传</title>
    <style type="text/css">
    #div1{
        width: 300px;
        height: 30px;
        border:1px solid #000;
        position: relative;
    }
    #div2{
        width: 0;
        height: 30px;
        background: #CCC;
    }
    #div3{
        width: 300px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
    }
    </style>
</head>
<body>
<input type="file" id="myFile" name="" value="" placeholder="">
<input type="button" id="btn" name="" value="上传">
<div id="div1">
    <div id="div2"></div>
    <div id="div3">0%</div>
</div>
<script type="text/javascript">
var oBtn = document.getElementById("btn");//获取上传按钮
var myFile = document.getElementById("myFile");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
oBtn.onclick = function(){
    //alert(myFile.value);//获取到的是file控件的value值，这个内容是显示给你看的文字，不是我们选择的文件
    //myFile.files 是file控件中选择的文件列表对象
    //alert(myFile.files);//[object FileList]

    //我们是要通过ajax把myFile.files[0]数据发送给后端
    //for (var attr in myFile.files[0]) {
    //console.log( attr + ' : ' + myFile.files[0][attr] );
    // }
    var xhr = new XMLHttpRequest();
    //监听上传完成事件
    //load事件在接收到完整的响应数据时触发
    xhr.onload = function(){
        alert("上传完成");
    }
    // 监听上传进度
    var oUpload = xhr.upload;
    oUpload.onprogress = function(e){
            //e.total：待发送的总量
            //e.loaded：已经发送的总量
            //oUpload.onprogress：上传
            //onprogress：下载
            console.log(e.total + ':' + e.loaded);
        var iScale = e.loaded / e.total;//获取已经上传的比例
            //上传进度条
            //根据上传的比例改变进度条div的宽度(初始宽度为0)
            oDiv2.style.width = 300 * iScale + 'px';
            //上传进度的百分比显示
            oDiv3.innerHTML = 100 * iScale + '%';
    };
    xhr.open('post','post_file.php',true);//post请求
    var oFormData = new FormData();
    //append方法接收两个参数：分别对象表单字段名称和表单字段值
    oFormData.append('file',myFile.files[0]);
    xhr.send(oFormData);
};
</script>
</body>
</html>

post_file.php

<?php
header('Content-type:text/html; charset="utf-8"');
//uploads--用来存放上传成功的文件
$upload_dir = 'uploads/';
//strtolower把所有字符转换为小写
//如果发送客户端发送的不是post请求，则给出相应的错误信息并退出
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
    exit_status(array('code'=>1,'msg'=>'错误提交方式'));
}
//检查键名是否存在于数组中
//array_key_exists(key,array)，存在则返回true
//$_FILES['myFile']['error'] 和该文件上传相关的错误代码
if(array_key_exists('file',$_FILES) && $_FILES['file']['error'] == 0 ){
    $pic = $_FILES['file'];
    //move_uploaded_file() 函数将上传的文件移动到新位置
    //第一个参数表示要移动的文件，第二个参数为文件的新位置
    //若成功，则返回 true，否则返回 false
    if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
        exit_status(array('code'=>0,'msg'=>'上传成功','url'=>$upload_dir.$pic['name']));
    }
}
echo $_FILES['file']['error'];
exit_status(array('code'=>1,'msg'=>'出现了一些错误'));
//将关联数组转为json字符串，并退出
function exit_status($str){
    echo json_encode($str);
    exit;
}
?>
  • $_FILES[“file”][“name”] - 被上传文件的名称
  • $_FILES[“file”][“type”] - 被上传文件的类型
  • $_FILES[“file”][“size”] - 被上传文件的大小，以字节计
  • $_FILES[“file”][“tmp_name”] - 存储在服务器的文件的临时副本的名称
  • $_FILES[“file”][“error”] - 由文件上传导致的错误代码

用promise实现ajax

Demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ajax的Promise实现</title>
</head>
<body>
<script type="text/javascript">
function ajax(method,url,data,bool){
    var promise = new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open(method,url,bool);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    resolve(xhr.responseText);
                }else{
                    reject(new Error(xhr.statusText));
                }
            }
        };
        // xhr.responseType = "json";
        // xhr.setRequestHeader("Accept", "application/json");
        xhr.send(data);
    });
    return promise;
}
ajax("get","http://localhost/mywork/promise/post.json",null,false).then(function(data){
    data = JSON.parse(data);//服务器返回的是一个json字符串
    console.log(data.name+"--"+data.age);//lisi--12
},function(error){
    console.error("出错了:"+error);//出错了:Error: Not Found
});
</script>
</body>
</html>

post.json

{
    "name":"lisi",
    "age":12
  }

Demo2:
模拟登陆实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ajax_form</title>
</head>
<body>
<form id="myform">
<label for="name">用户名：</label>
<input type="text" name="user-name" id="user-name" placeholder="请输入你的用户名">
<label for="age">密码：</label>
<input type="password" name="user-password" id="user-password" placeholder="请输入你的年龄">
<input type="submit" value="登录" id="subBtn">
</form>
<script type="text/javascript">
var subBtn = document.getElementById("subBtn");
var form = document.getElementById("myform");
function ajax(method,url,data,bool){
    var promise = new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open(method,url,bool);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    resolve(xhr.responseText);
                }else{
                    reject(new Error(xhr.statusText));
                }
            }
        };
        xhr.send(data);
    });
    return promise;
}
subBtn.onclick = function(){
    ajax("post","http://localhost/mywork/promise/post.php",new FormData(form),false)
    .then(function(data){
        if(data == "ok"){
            alert("登录成功");
        }else{
            alert("用户名或者密码不正确");
        }
    },function(){
        console.error("出错了:"+error);
    });
};
</script>
</body>
</html>

post.php

<?php
 header("Content-Type: text/plain");
 $name = $_POST["user-name"];
 $pwd = $_POST["user-password"];
 if($name == "admin" && $pwd == "123"){
    echo "ok";
 }else{
    echo "no";
 }
 ?>

参考博文：
XMLHttpRequest Level 2 使用指南

自由2017
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
《web开发： Ajax XMLHttpRequest Level2新特性》
yexiangCSDN的专栏
01-29 221
一、XMLHttpRequest Level2新特性 1. 旧版XMLHttpRequest的缺点 只支持文本数据的传输，无法用来读取和上传文件 传送和接收数据时，没有进度信息，只能提示有没有完成 2. XMLHttpRequest Level2的新功能 可以设置 HTTP 请求的时限 可以使用 FormData 对象管理表单数据 可以上传文件 可以获得数据传输的进度信息 3.设置HTTP请求时限 有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。...
XML学习（二）——XMLHttpRequest
小隐的博客
02-24 201
XMLHttpRequest 对象 XMLHttpRequest 对象用于在后台与服务器交换数据。 特点： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 创建 XMLHttpRequest 对象： xmlhttp=new XMLHttpRequest(); 解析 XML 文档： if (window.XMLHttpRe...
第1讲：XMLHttpRequest详解（ajax基础）
软件之家的博客
06-09 2608
XMLHTTPRequest对象，是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通讯。自从浏览器提供了XMLHTTPRequest这个接口之后，ajax操作就此诞生。本讲详细介绍XMLHTTPRequest对象的使用方法，各种属性的使用及实现的详细步骤。
XMLHttpRequest Level2的新特性
qq_45804054的博客
12-23 107
XMLHttpRequest Level2的新特性
javascript：使用Promise+XMLHttpRequest获取数据示例
最新发布
听海边涛声
07-13 131
javascript：使用Promise+XMLHttpRequest获取数据示例
XMLHttpRequest 2级
前端菜鸟
08-10 878
XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述出来，而XMLHttpRequest 2级则进一步发展了XHR；并非所有浏览器都完整实现了XMLHttpRequest2级规范，但是所有浏览器都实现了他规定的部分内容；1：FormDataFormData类型为序列化表单提供了遍历；下面的代码创建了一个FormData对象，并想其中添加了一些数据 这个append方法接受2个参数
多文件上传，避坑 [object FileList]
pei_fang的博客
05-17 997
[object FileList] 文件上传 JavaScript
XMLHttpRequest
ZJie0的博客
03-25 556
什么是XMLHttpRequest XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMNbVfr8-1616657083936)(1.png)] 使用xhr发起GET请求 步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函数 监
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
10-28
在本节的学习笔记中，主要介绍了如何使用XMLHttpRequest对象的responseXML属性来接收XML数据，并将其作为DOM对象来处理。这个过程涉及到前端JavaScript代码的编写以及后端servlet的配置。 首先，文档提到了对ajax...
XMLHttpRequest_test:XMLHttpRequest学习代码
05-20
"XMLHttpRequest_test"是一个学习项目，专门针对XMLHttpRequest进行实践操作。 在JavaScript中，XMLHttpRequest对象用于创建后台与服务器端的通信。以下是一些关于XMLHttpRequest的重要知识点： 1. **创建...
AJax 学习笔记一(XMLHTTPRequest对象)
12-10
2. **XMLHttpRequest对象的属性和方法** - `onreadystatechange`: 这个事件处理器属性在XMLHttpRequest对象的`readyState`属性发生变化时被调用。`readyState`表示请求的状态，共有五种状态，从0到4，分别代表请求...
XMLHttpRequest2级
chanda_yang的博客
08-04 326
FromData 现代Web 应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2 级为此定义了FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据（用于通过XHR 传输）提供了便利。下面的代码创建了一个FormData 对象，并向其中添加了一些数据。 var data = new FormData(); data.ap
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
qq_50260510的博客
04-15 585
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
XmlHttpRequest 2级
张梦莹的博客
06-11 230
FormData 现代Web应用中频繁使用的一项功能就是表单数据的序列化，XmlHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面我们先来创建一个FormData对象。 var data = new FormData(); data.append('name','zhangmengying'); append方...
利用Promise封装XMLhttprequest
qq_58159494的博客
09-05 637
在代码中，我们使用了 Promise 的构造函数，将 XMLHttpRequest 封装成一个 Promise 对象，并在其中加入了异步请求的逻辑。当请求成功时，将调用 res() 方法，将请求的结果传递给下一个 then() 方法；Promise 是 JavaScript 中一种常用的处理异步操作的方式，它可以将异步操作封装成一个 Promise 对象，并提供 then 方法为操作成功时的回调函数和 catch 方法为操作失败时的回调函数，并且它能很好的避免了回调地狱的风险，使代码更加方便阅读。
XMLHttpRequest,AJAX,Promise,Axios及操作实战
雾林小妖的博客
11-29 1328
比较AJAX、XMLHttpRequest、Promixe、axios及操作实战
XMLHTTPRequest状态status完整列表
qq2613的专栏
12-05 539
AJAX中请求远端文件、或在检测远端文件是否掉链时，都需要了解到远端服务器反馈的状态以确定文件的存在 与否。        当然，在我们平常浏览网页时，也会发现一些文件不存在时显示为“404错误”，这就是常见的Http请求状态（status） 　　Web服务器响应浏览器或其他客户程序的请求时，其应答一般由以下几个部分组成：一个状态行，几个应答头，一个空行，内容文档。下面是一个最简单的应答：
通过XMLHttpRequest　可以获取的网页的运行状态，从返回状态判断网站是否挂了...
wawa129的专栏
11-27 270
通过XMLHttpRequest　可以获取的网页的运行状态，从返回状态判断网站是否挂了
XMLHttpRequest使用指南与AJAX参考手册
综上，XMLHttpRequest中文手册是一个全面的参考指南，对于学习和使用AJAX技术的开发者来说，它提供了深入理解XMLHttpRequest对象及其在AJAX中的作用的关键信息。通过熟练掌握这些知识点，开发者可以构建出更加互动、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值