XHR简介

在XHR诞生前,网页要获取客户端和服务器的任何状态更新,都需要刷新一次,在XHR诞生后就可以完全通过JS代码异步实现这一过程。XHR的诞生也使最初的网页制作转换为开发交互应用,拉开了WEB2.0的序幕。 

XHR是一种浏览器API,极大简化了异步通信的过程,开发者并不需要关注底层的实现,因为浏览器会为我们完成这些工作,如连接管理、协议协商、HTTP请求格式化等等。最初版本的XHR能力非常有限,只支持文本传输,处理上传能力也不足,对于跨域请求也不支持。为解决这些问题,W3C于2008年发布了“XMLHttpRequest Level2”草案,新增了如下功能:

  • 支持请求超时;
  • 支持传输二进制和文本数据;
  • 支持重写媒体类型和编码响应;
  • 支持监控每个请求的进度事件;
  • 支持有效的文件上传;
  • 支持安全的跨来源请求。

2011年,W3C将“XMLHttpRequest Level2”规范与最初的“XMLHttpRequest”规范合并,所有XHR2新增的功能也都并入了原来的XHR API中,接口不变,功能增强。

1.XHR简介

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL,浏览器格式化请求并管理每个连接的完整生命周期,所以XHR仅仅允许应用自定义一些HTTP首部,但更多的首部是不能自己设定的,如:

  • Accept-Charset, Accept-Encoding, Access-Control-*
  • Host, Upgrade, Connection, Referer, Origin
  • Cookie, Sec-, Proxy-, 及其他首部

浏览器会拒绝绝对不安全的首部重写,以保证应用不能假扮用户代理、用户或请求来源,如Origin由浏览器自动设置,Access-Control-Allow-Origin由服务器设置,如果接受该请求,不包含该字段即可,浏览器发出的请求将作废。

  • CORS请求会省略cookie和HTTP认证等用户凭据;
  • 客户端被限制只能发送“简单的跨域请求”,包括只能使用GET POSD HEAD三种方式,只能访问通过XHR发送并读取的HTTP首部。

如果想要启用cookie和HTTP认证,客户端必须在发送请求时通过XHR对象发送额外的属性(withCredentials),而服务器也需要以Access-Control-Allow-Credentials响应,表示允许应用发送隐私数据。同样,如果客户需要写入或读取自定义HTTP标头或想要使用“非简单的方法”的请求,那么它必须首先通过发出一个预备请求,以获取第三方服务器的许可,如下所示:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// Preflight request

OPTIONS /resource.js HTTP/1.1

Host: thirdparty.com

Origin: http://example.com

Access-Control-Request-Method: POST

Access-Control-Request-Headers: My-Custom-Header

...

 

// Preflight response

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://example.com

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: My-Custom-Header

...

 

(actual HTTP request)

W3C CORS规范定义的什么时候必须使用预备请求,“简单”的请求可以跳过它,但也有各种各样场景需要使用预备请求,这就添加一次往返网络延迟。可喜的是,一旦预备请求完成,它可以由客户端缓存,以避免在后续请求进行相同的验证。 
在XHR中,可以通过responseType-设置改变响应类型,如下所示:

  • “” 字符串(默认值)
  • “arraybuffer” ArrayBuffer
  • “blob” Blob
  • “document” Document
  • “json” JavaScript 对象,解析自服务器传递回来的JSON 字符串。
  • “text” 字符串

2.数据传输

2.1.数据请求:

下面是通过XHR获取一张图片,并显示到网页上的示例:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

var xhr = new XMLHttpRequest();

 

xhr.addEventListener("progress", updateProgress, false);

xhr.addEventListener("load", transferComplete, false);

xhr.addEventListener("error", transferFailed, false);

xhr.addEventListener("abort", transferCanceled, false);

 

xhr.open('GET''/images/photo.webp');

xhr.responseType = 'blob';

xhr.onload = function() {

  if (this.status == 200) {

    var img = document.createElement('img');

    img.src = window.URL.createObjectURL(this.response);

    img.onload = function() {

        window.URL.revokeObjectURL(this.src);

    }

    document.body.appendChild(img);

  }

};

 

xhr.send();

2.2.数据上传

上传相关事件在 XMLHttpRequest.upload 对象上被触发,像下面这样,向服务器发送一个formdata格式数据:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

var formData = new FormData();

formData.append('id', 123456);

formData.append('topic''performance');

 

var xhr = new XMLHttpRequest();

 

xhr.upload.addEventListener("progress", updateProgress);

xhr.upload.addEventListener("load", transferComplete);

xhr.upload.addEventListener("error", transferFailed);

xhr.upload.addEventListener("abort", transferCanceled);

 

xhr.open('POST''/upload');

xhr.onload = function() { ... };

xhr.send(formData);

2.3.数据分片上传:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var blob = ...;

 

const BYTES_PER_CHUNK = 1024 * 1024;

const SIZE = blob.size;

 

var start = 0;

var end = BYTES_PER_CHUNK;

 

while(start < SIZE) {

  var xhr = new XMLHttpRequest();

  xhr.open('POST''/upload');

  xhr.onload = function() { ... };

 

  xhr.setRequestHeader('Content-Range', start+'-'+end+'/'+SIZE);

  xhr.send(blob.slice(start, end));

 

  start = end;

  end = start + BYTES_PER_CHUNK;

}

注意:progress 事件在使用 file: 协议的情况下是无效的。

数据冰冷的,但我们要让数据温暖起来,改变我们的生活!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

织梦php echo 调用金币,dedecms实现任意页面调用当前会员信息的方法

文实例讲述了dedecms实现任意页面调用当前会员信息的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;1、在你需要调用的页面里面之间加入代码如下:function CheckInfo(){var taget_obj document.getElementByIdx_x(_userinfo);myajax new DedeAjax(taget_obj,fals…

第一节: Timer的定时任务的复习、Quartz.Net的入门使用、Aop思想的体现

一. 前奏-Timer类实现定时任务 在没有引入第三方开源的定时调度框架之前&#xff0c;我们处理一些简单的定时任务同时都是使用Timer类&#xff0c; DotNet中的Timer类有三个&#xff0c;分别位于不同的命名空间下&#xff0c;分别是&#xff1a; ①.位于System.Windows.Forms里…

php 自动验证类,Thinkphp实现自动验证和自动完成

这篇文章主要介绍了Thinkphp实现自动验证和自动完成的相关资料,需要的朋友可以参考下Thinkphp的自动验证和自动完成都是根所表单提交的内容来的&#xff0c;对部分数据进行规则验证和处理后插入到数据库。1、自动验证格式&#xff1a;array(array(验证字段1,验证规则,错误提示,…

第二节:比较DateTime和DateTimeOffset两种时间类型并介绍Quartz.Net中用到的几类时间形式(定点、四舍五入、倍数、递增)

一. 时间的类型 1. 背景 这里为什么要介绍时间类型呢&#xff0c;明明是定时调度篇&#xff0c;原因是在定时任务中&#xff0c;任务什么时间开始执行&#xff0c;什么时间结束执行&#xff0c;要用到各种各样的时间模式&#xff0c;虽然这不能算是一个复杂的问题&#xff0c;但…

PHP中英文截取函数,php字符串截取函数,支持中英文混体

php字符串截取函数,支持中英文混体,以前我们截取字符串都会用php自带的函数,今天我来看一下一款字符串截取函数,支持中英文混体的php代码实例吧.php字符串截取函数代码如下:function cutstr($string, $sublen10, $start 0, $code utf-8){if($code utf-8){$pa "/[x01-x…

第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联等)

一. 五大构件 引言&#xff1a; Quartz.Net的五大构件 1. 调度器&#xff1a;Scheduler 2. 作业任务&#xff1a;Job 3. 触发器&#xff1a; Trigger 4. 线程池&#xff1a; SimpleThreadPool 5. 作业持久化&#xff1a;JobStore 二. Scheduler详解 1. 创建Scheduler的两…

创建phpinfo.php,如何创建phpinfo查看php信息

用户提问如何创建phpinfo查看php信息&#xff1f;To create the file simply add the following lines of code to a blank document and name the file phpinfo.php 创建一个简单的文本文档并命名为phpinfo.php<?phpphpinfo ();?>Save the file as phpinfo.php and pl…

第四节: Quartz.Net五大构件之Trigger通用用法(常用方法、优先级、与job关联等)

一. 简介 1. 几个类型&#xff1a; ①&#xff1a;TriggerBuilder&#xff1a;用来创建ITrigger实例 ②&#xff1a;ITrigger&#xff1a;触发器实例 2.常用的几个方法 ①.StartNow&#xff1a;Trigger马上触发. ②.StartAt和EndAt&#xff1a;设置Trigger触发的开始时间和结…

php键值对数组排序,PHP按指定键值对二维数组进行排序的方法_PHP

本文实例讲述了PHP按指定键值对二维数组进行排序的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;问题&#xff1a;有数组&#xff1a;代码如下:array(0>array(id>1,price>50),1>array(id>2,price>60));要求根据数组的price这个字段进行排序。…

oracle 10g中没有refhost.xml,解决win7 安装oracle10g的问题

当你使用win7安装oracle10g&#xff0c;很可能显示相关oraparam.ini相关的异常&#xff0c;导致无法继续安装oracle10g&#xff0c;可以通过以下步骤方式来安装&#xff0c;至于安装oracle后的稳定性&#xff0c;目前无法认证&#xff0c;只有发现问题后&#xff0c;才可下结论…

第五节: Quartz.Net五大构件之Trigger的四大触发类

一. WithSimpleSchedule&#xff08;ISimpleTrigger&#xff09; 1. 用途&#xff1a;时、分、秒上的轮询(和timer类似)&#xff0c;实际开发中&#xff0c;该场景占绝大多数. 2. 轮询的种类&#xff1a;永远轮询和限定次数轮询. 3. 参数中的几个函数&#xff1a; A.执行间隔…

oracle-物理模型实现,生产电算系统的设计与开发(JSP,Oracle)

生产电算系统的设计与开发(,Oracle)(任务书,开题报告,中期检查表,文献综述,外文翻译,毕业论文9500字,程序代码,Oracle数据库,答辩PPT)本系统是基于B/S模型的&#xff0c;采用Myeclipse集成开发环境&#xff0c;以JAVA作为开发语言&#xff0c;数据库则是采用Oracle实现数据的存…

第六节: 六类Calander处理六种不同的时间场景

背景介绍及其使用 该章节主要补充介绍&#xff0c;在前一章四类触发器的基础上配合六大Canlander来动态删减某些时间&#xff0c;来满足更多的应用场景。 1. DailyCalendar&#xff1a;动态排除某天的某些字段. &#xff08;需求&#xff1a;每天8-23点执行,每隔1s执行一次,但…

修改oracle rac sid,修改Oracle RAC的_asm_hbeatiowait的方法

一、提问修改Oracle RAC的_asm_hbeatiowait的方法&#xff1f;二、回答答&#xff1a;11.2.0.3与11.2.0.4版本均合入了ASM磁盘heartbeat超时参数&#xff0c;默认数据为15s&#xff0c;某些情况下(主引擎掉电、控制器接管、链路切换)存储切换时间超过15s&#xff0c;会导致数据…

第七节:Trigger(SimpleTrigger、CronTrigger)哑火(MisFire)策略 :

一. 简介 1. 什么是哑火 由于某些原因导致触发器(trigger)在该触发的时候没有得到触发,后续对应的解决策略即为哑火策略。(个人理解) 2. 哑火触发的条件 ①&#xff1a;所有的工作线程都在忙碌&#xff0c;导致某些trigger得不到触发.(如&#xff1a;simplethreadpool 默认是…

matlab 填充斜线,请教一个关于柱状图的问题--填充采用斜线之类的,不能是颜色...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼endif ratiow*pwidth > bwidthbigpattern(:,bwidth1:end) [];endbigpattern repmat(bigpattern,[1 1 3]);color (bits(:,:,1) colorval(1)) & ...(bits(:,:,2) colorval(2)) & ...(bits(:,:,3) colorval(3));colo…

第八节: Quartz.Net五大构件之SimpleThreadPool及其四种配置方案

一. 简介 揭秘&#xff1a; SimpleThreadPool是Quartz.Net中自带的线程池&#xff0c;默认个数为10个&#xff0c;代表一个Scheduler同一时刻并发的最多只能执行10个job&#xff0c;超过10个的job需要排队等待。 二. 四种配置方案 1. NameValueCollection的方式 需要利用StdSch…

隐藏wp login.php,Wordpress 隐藏登陆链接

用过Wordpress做博客或者建站的朋友&#xff0c;都会知道Wordpress默认的登陆地址是wp-login.php&#xff0c;很多恶意程序就是通过爬这个地址&#xff0c;尝试使用常见的用户名密码组合来入侵Wordpress。尽管我们可以通过使用复杂的用户名、高强度的密码来防止恶意程序的猜测&…

第九节: 利用RemoteScheduler实现Sheduler的远程控制

一. RemoteScheduler远程控制 1. 背景&#xff1a; 在A服务器上部署了一个Scheduler&#xff0c;我们想在B服务器上控制这个Scheduler。 2. 猜想&#xff1a; A服务器上的Scheduler需要有地址、需要有端口、需要有名称(实际上也是如此)。 3. 需求&#xff1a; 一个控制台程序…

oracle扩容日志文件,调整Oracle Redo Logfile日志文件的大小

1、扩容lvlvextend -L 1G /dev/oravg/lv_redolog11lvextend -L 1G /dev/oravg/lv_redolog12lvextend -L 1G /dev/oravg/lv_redolog212、调整了一下大小&#xff0c;将每个日志文件调整为2Gselect * from v$logfile;查看属于哪个裸设备。group 1属于/dev/raw/raw10、group 2属于…