js-XMLHttpRequest 2级
###1. XMLHttpRquest 2级
1) FormData
现代web应用中频繁使用的一项功能就死表单数据的序列化, XMLHttpRquest 2级为此定义了FormData类型
FormData为序列化表单以及创建于表单格式相同数据(用于通过XHR传输)提供了便利
eg: var data = new FormData();
data.append("name","Tom") // append(键 , 值)
在post请求表单提交数据时,可直接使用该方法对表单数据进行处理
eg: var form = document.getElementById("user-info") // id为user-info的form表单
xhr.send(new FormData(form))
2) 超时设定 timeout属性,表示请求在等待响应多少毫秒之后就终止,触发该事件后会调用ontimeout事件处理程序
eg: xhr.timeout = 1000; // 将超时设置为1s
xhr.ontimeout = function(){
alert("Request did not return in a second"); // 输出“请求没有立即返回”
}
3) overrideMimeType() 用于重写XHR响应的MIME类型
4)进度事件
6中进度事件
loadstart: 在接受到相应数据的第一个字节是触发
progress: 在接受响应期间持续不断触发
error: 在请求发生错误时
abort: 调用abort() 触发
load: 在接收到完整的响应数据是触发
loadend: 在通信完成或触发error·abort或load事件后触发
4.1) load事件
用以替代readystatechange事件,响应接受完毕后将触发load事件,因此也没有必要去检查readyState属性。
而onload事件处理程序会接收到一个event对象,其target属性就指向xhr对象实例,可以访问到XHR对象的所有方法和属性
4.2)progress事件
会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性
lengthComputable 表示进度信息是否可用的布尔值
position 表示已经接受的字节数
totalSize 表示根据Content-Length 响应头部确认的预期字节数
可以根据这些信息为用户创建一个进度指示器 为确保正常执行,必须在调用open方法之前添加该事件处理程序
eg:
xhr.onprogress = function(event){
var obj = document.getElementById("xxx");
if(event.lengthComputable){
obj.innerHTML = "Received" + event.position + "of" + event.totalSize + "bytes" // 收到了xxx字节中的xxx个
}
}
js-XMLHttpRequest 2级的更多相关文章
- 6个函数的output看JS的块级作用域
1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...
- js有块级作用域么?
//js私有作用域,js没有块级作用域 function Box(){ for(var i=0;i<5;i++){} console.log(i);//5,如果js有块级作用域,那么i在for循 ...
- js模仿块级作用域(js没有块级作用域私有作用域)
js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...
- 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- JS的块级作用域
今天带来的是 "对<你不知道的js>中块级作用域的总结" 分享: 1)用with从对象中创建出来的作用域只在with声明中而非外部作用域有效,同时可以访问已有对象的属性 ...
- JS 模仿块级作用域
function outputNumbers(count) { for (var i=0; i<count; i++) { console.log(i); } var i; // 重新声明变量 ...
- 纯js的N级联动列表框 —— 基于jQuery
多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...
- JS XMLHttpRequest.upload.addEventListener 传参,回调
JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", doc ...
- JS XMLHttpRequest请求
前言 我们知道jq的请求非常简短好用,但是其实js原生的请求也不差,并且不用插件更能说明自己本身的技术已经很强了,别人看自己代码一脸懵逼的时候,这时就可以一一解释这些代码的用处,更能让别人敬佩! JS ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
随机推荐
- Java高级教程02
目录 1.Java线程 1.1. 多线程和多进程 1.2. 线程的执行过程: 1.3. 创建线程的方法 (1). 方法1:通过run() (2). 方法2: 复写Runnable接口(推荐) 1.4. ...
- python 黏包现象及其解决方案
一.数据缓冲区 缓冲区(buffer),它是内存空间的一部分.也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区,显然缓冲区是具有一定大小的 ...
- css滚动条样式自定义
很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 【SDOI2017】遗忘的集合
题目描述 好神仙啊,我还真的以为这是个构造题,结果是有唯一解的. 设答案为多项式\(a,a_i\in\{0,1\}\). 则: \[ f(x)=\Pi (\frac{1}{1-x^i})^{a_i} ...
- 使用vue-cli脚手架创建项目
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- PHP消息队列的实现方式与详解,值得一看
队列原理: 也是解耦的原理:业务系统和队列处理系统没有关系 一个写(业务系统),一个读(队列管理系统). 写的只管往队列里写,别的不用操心,读的能不能读完和写的也没有关系 同样,读的只管从队列里往外读 ...
- 深入理解mongodb查询条件语句
阅读目录 1. 理解:"$lt"."$lte"."$gt" 和 "$gte" 2. 理解 '$ne' 3. 理解 &qu ...
- Mybatis学习总结(六)——高级映射(一对一,一对多,多对多)
一.订单商品数据模型 1.数据库执行脚本 创建数据库表代码: /*Table structure for table `t_user` */ CREATE TABLE t_user ( id INT ...
- php 数组元素快速去重
1.使用array_unique方法进行去重 对数组元素进行去重,我们一般会使用array_unique方法,使用这个方法可以把数组中的元素去重. <?php $arr = array(,,,, ...
- 如果IBM再给我一次实习机会
2014年,我拿到了IBM斯图加特R&D的实习机会.在连续被索尼和博世拒掉之后,这个实习对我来说弥足珍贵.我学的是通信专业,在这之前与编程相关的活动只有一学期的安卓Lab,还是靠抱队友大腿才及 ...