ajax ----进度条的原理-白红宇

ajax ----进度条的原理

阅读量：6820 次

发布时间：2019-06-26

本文共 1563 字，大约阅读时间需要 5 分钟。

一、进度条的原理

新知识点：Html5中FormData，xmlHttpRequest中的upload属性，progress事件监控

xmlHttpRequest中的upload属性，实现：

1  2  3  4     
      5     Document 6      7  8  9 10     
     
      11             
      
      
12             
      
      
13     
     
14     15 16 17     85 86

xmlhtmlrequest.upload属性下面的方法有：来源

Event listeners	Data type of `response` property
`onloadstart`	The fetch starts
`onprogress`	Data transfer is going on
`onabort`	The fetch operation was aborted
`onerror`	The fetch failed
`onload`	The fetch succeeded
`ontimeout`	The fetch operation didn't complete by the timeout the author specified
`onloadend`	The fetch operation completed (either success or failure)

通过progress事件，实现：

1  2  3  4     
      5     Document 6      7  8  9 10     
     
      11             
      
      
12             
      
      
13     
     
14     15 16 17     54

Property	Type	Description
`target` 只读		The event target (the topmost target in the DOM tree).
`type` 只读		The type of event.
`bubbles` 只读		Whether the event normally bubbles or not
`cancelable` 只读		Whether the event is cancellable or not?
`lengthComputable`	boolean	Specifies whether or not the total size of the transfer is known. Read only.
`loaded`	unsigned long (long)	The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
`total`	unsigned long (long)	The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.