###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级的更多相关文章

  1. 6个函数的output看JS的块级作用域

    1. var output = 0; (function() { output++; }()); console.log(output); 函数对全局的output进行操作,因为JS没有块级作用域,所 ...

  2. js有块级作用域么?

    //js私有作用域,js没有块级作用域 function Box(){ for(var i=0;i<5;i++){} console.log(i);//5,如果js有块级作用域,那么i在for循 ...

  3. js模仿块级作用域(js没有块级作用域私有作用域)

    js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...

  4. 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  5. JS的块级作用域

    今天带来的是 "对<你不知道的js>中块级作用域的总结" 分享: 1)用with从对象中创建出来的作用域只在with声明中而非外部作用域有效,同时可以访问已有对象的属性 ...

  6. JS 模仿块级作用域

    function outputNumbers(count) { for (var i=0; i<count; i++) { console.log(i); } var i;  // 重新声明变量 ...

  7. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  8. JS XMLHttpRequest.upload.addEventListener 传参,回调

    JS 回调函数,传参的办法. function uploadFile(t) { var fd = new FormData(); fd.append("_netLogo", doc ...

  9. JS XMLHttpRequest请求

    前言 我们知道jq的请求非常简短好用,但是其实js原生的请求也不差,并且不用插件更能说明自己本身的技术已经很强了,别人看自己代码一脸懵逼的时候,这时就可以一一解释这些代码的用处,更能让别人敬佩! JS ...

  10. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

随机推荐

  1. Oauth2.0[笔记]

    背景 如果资源服务器只是提供资源给自己的应用,使用帐号密码做身份认证倒没什么问题,但如果需要提供资源给第三方应用,就会出现第三方应用需要与资源服务器共享身份凭证,这时会出现几个问题: 1.第三方应用需 ...

  2. Java访问级别修饰符

    用途 控制其他类可以访问的字段或方法 修饰符 public.protected.no modifier(未声明).private 访问级别 修饰符 当前类 包 子类 其他包 public √ √ √ ...

  3. 【Linux基础】crontab定时命令详解

    周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“crontab”,是 ...

  4. 第二十六篇:USB3.0高带宽ISO(48KBytes/125us)实战

    USB3.1技术已经推出, 10Gbps的速率足以满足数据, HD视频传输的要求. 要步入USB3.1的研发, 还得将USB3.0的基础打扎实. 微软提供的SUPER MUTT仅仅包括一个接口0, 其 ...

  5. Y7000安装驱动显卡问题

    整体 https://blog.csdn.net/la9881275/article/details/86720752 详细 https://blog.csdn.net/luteresa/articl ...

  6. 14 python初学(高阶函数 递归函数 内置函数)

    高阶函数:1.  函数名是一个变量,函数名可以进行赋值 2. 函数名可以作为函数参数,还可以作为函数返回值(函数名称作为函数返回值时返回的是:函数的地址:print 这个返回值的调用相当于执行这个函数 ...

  7. CentOS 安装 clang

    Clang是一个C语言.C++.Objective-C.Objective-C++语言的轻量级编译器.源代码发布于BSD协议下.2013年4 月,Clang已经全面支持C++11标准,并开始实现C++ ...

  8. Spring容器的简单实现(IOC原理)

    引言:容器是什么?什么是容器?Spring容器又是啥东西?我给Spring容器一个对象名字,为啥能给我创建一个对象呢? 一.容器是装东西的,就像你家的水缸,你吃饭的碗等等. java中能作为容器的有很 ...

  9. Spark笔记-repartition和coalesce

    窄依赖.宽依赖以及stage的划分依据:https://www.cnblogs.com/itboys/p/6673046.html 参考: http://blog.csdn.net/u01268493 ...

  10. 图片自适应完美兼容IE8

    <!DOCTYPE html><html lang="en"><head> <meta charset="gb2312" ...