[读书笔记]Communication API 之 XMLHttpRequest Level 2

最新推荐文章于 2023-03-06 14:41:57 发布

原创最新推荐文章于 2023-03-06 14:41:57 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

HTML5学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了XMLHttpRequestLevel2的重要改进，包括跨源XMLHttpRequests请求与进度事件，并通过示例代码展示了如何实现数据上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XML HttpRequest Level 2

XML HttpRequest Level 2相对此前版本，有了很大改进

1、跨源XMLHttpRequests请求

2、进度事件（Progress events）

1.1 跨源XMLHttpRequests请求

XMLHttpRequests通过CORS（跨源资源共享）实现了跨源XMLHttpRequests

跨源HTTP请求包含一个orgin头部，它为服务器提供HTTP请求的源信息。头部由浏览器保护，不能被应用程序代码更改。

使用跨源XMLHttpRequest可以构建基于非同源服务的Web应用程序。

CORS规范要求，对一些敏感行为，如申请证书的请求，都必须由浏览器发送给服务器，以确定这种行为是否被支持和允许。因此，通讯背后需要具备CORS处理能力的服务器来支持。

1.2 进度事件（Progress events）

1.2.1 XML HttpRequest Level 2使用具有意义的名字progress进度来命名进度事件。

进度事件名称： loadstart progress abort error load loadend

1.2.2 向后兼容readyState属性和readystatechange事件

1.3 使用XML HttpRequest Level 2

crossOriginUpload.html

<!DOCTYPE html>

<html>

<head>

<title> XMLHttpRequest 2</ title>

</head>

<body>

<div >

<h1 >XMLHttpRequest Level 2 </h1 >

</div >

<p ><b >Status: </b ><span id ="progress">ready</ span></ p>

</body>

</html>

crossOriginUpload.js

var geoData = "" ; //测试数据

for (var i = 0; i < 90000; i++) {

geoData += "testData";

}

$(function () {

if (isSupportXHR2()) {

$( "#support").html( "亲，太棒了，您的浏览器支持跨源的XMLHttpRuquest哟" );

} else {

$( "#support").html( "亲，很遗憾，您的浏览器不支持跨源的XMLHttpRuquest哦" );

return;

}

var $dataElement = $( "#geodata");

$dataElement.val(geoData);

$("#sendButton").unbind( "click").bind( "click", function () {

var xhr = new XMLHttpRequest();

var targetLocation = "http://localhost:9999/upload";

xhr.upload.onprogress = function(e) { //上传进度回调

var ratio = (e.loaded / e.total) * 100;

if (e.lengthComputable) {

setProgress(ratio + "% uploaded"); //利用进度信息做一点事情

}

};

xhr.onprogrss = function (e) { //下载进度回调

var ratio = (e.loaded / e.total) * 100;

if (e.lengthComputable) {

setProgress(ratio + "% downloaded"); //利用进度信息做一点事情

}

};

xhr.onload = function (e) { //加载完毕后的回调

setProgress( "finished");

};

xhr.onerror = function(e) { //出错的回调

//出错：网络故障，访问被拒，目标服务器缺乏对CORS的支持。

setProgress( "error");

};

xhr.open( "POST", targetLocation, true); //指定跨源，开始请求连接

xhr.setRequestHeader( 'Content-Type', 'text/plain');

xhr.send($dataElement.val()); //发送消息数据

});

//更新进度条

function setProgress(s) {

$("#progress").html(s);

}

/**

* 检测是否支持XMLHttpRequest level 2

* @returns {Boolean}

function isSupportXHR2() {

var xhr = new XMLHttpRequest();

if (typeof xhr.withCredentials === undefined) {

return false;

}

return true;

}

1.4 启动程序准备

1，安装python2.7

2，启动startHttpServer8888.bat，修改文件内相应 python路径

3，启动startCORSServer9999.bat，修改文件内相应 python路径

4，使用火狐浏览器访问http://localhost:8888/crossOriginUpload.html

5，点击页面上的上传按钮，查看效果