XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来。而XMLHttpRequest 2级则进一步发展了XHR

FormData
FormData为序列化表单以及创建与表单格式相同的数据(用于通过XHR传输)提供了便利

//通过append方法增加信息 append()方法接收两个参数:健和值
var data = new FormData();
data.append('name', 'Nicholas');
//通过FormData构造函数传入表单元素
var data = new FormData(document.form[0]) xhr.open('post', 'postexample', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息

overrideMimeType()方法

用于重写XHR响应的MIME类型,因为返回响应的MIME类型决定了XHR对象如何处理它,所以提供一种方法能够重写服务器返回的MIME
类型是很有用的

var xhr = createXHR();
xhr.open('get', 'text.php', true);
xhr.overrideMimeType('text/xml');
xhr.send(null);

进度事件
1)load事件。最终,Firefox在简化异步交互模型中实现了load事件,用以替代readystatechange事件。响应接收完毕后将触发load事件,因此也就没有必要去检查readyState属性了

var xhr = createXHR();
xhr.onload = function(){
if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful : " + xhr.status);
}
}
xhr.open('get', 'altevents.php', true);
xhr.send(null);

只要浏览器接收到服务器的响应,不管其状态如何,都会触发load事件,但必须要检查status属性,才能确定是否真的已经可用了,firefox,opera,chrome,safari都支持load事件
2)progress事件
这个事件会在浏览器接收到新数据期间周期性地触发,而progress事件会接收到一个event对象,其target属性是xhr对象,但包含着三个额外的属性:
lengthComputable:是一个表示进度信息是否可用的布尔值
position:表示意境接收的字节数
totalSize:表示根据content-length响应头部确定预期字节数。
eg:

var xhr = createXHR();
xhr.onload = function(){
if((xhr.status >=200 && xhr.status < 300 ) || xhr.status == 304 ){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful : " + xhr.status);
}
}
xhr.onprogress = function(){
var divStatus = document.getElementById('status');
if(event.lengthComputable){
divStatus.innerHTML = 'Received' + event.position + 'of' + event.totalSize + ' bytes'
}
}
xhr.open('get', 'altevents.php', true);
xhr.send(null);

为确保正常执行,必须在调用open()前添加onprogress事件

AJAX(四):XHR2支持的方法的更多相关文章

  1. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  2. AJAX跨域的常见方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问.比如说你的网站域名是aaa.com,想要通过AJAX请求 ...

  3. ajax 调用asp.net后台方法

    ajax 调用asp.net后台方法  这种做法有好几种,如调用xx.asxh 页面,或者直接调用xx.aspx也面,在page_Load中进行一些判断然后调用后面的其他方法, 或者你可以直接调用we ...

  4. [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)

    无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可能有很多不确定因素导致异常的Web应用程序;在传统的Web开发中,处理异常的方式——设计专门一个 ...

  5. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  6. WordPress忘记密码找回登录密码的四种行之有效的方法

    WordPress忘记密码找回登录密码的四种行之有效的方法 PS:20170214更新,感谢SuperDoge同学提供的方法,登入phpMyAdmin后,先从左边选自己的数据库,然后点上面的 SQL ...

  7. Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案

    最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...

  8. 现有语言不支持XXX方法

    史上最强大的IDE也会有bug的时候哈,今天遇到这个问题特别郁闷,百度了下,果然也有人遇到过这个问题 解决方法: 1.调用的时候参数和接口声明的参数不一致(检查修改) 2.继承接口中残留一个废弃的方法 ...

  9. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

随机推荐

  1. Java对象排序两种方法

    转载:https://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序,下面提供两种简单方式: 方法一:将要排序 ...

  2. 转 python 随机走动的模拟

    https://blog.csdn.net/python2014/article/details/21231971 麻省理工的随机走动模块,还不错,三天搞懂了,不过懂得不彻底.   记录下修改的代码 ...

  3. edis Cluster实现原理

    一.Redis Cluster主要特性和设计     集群目标 1)高性能和线性扩展,最大可以支撑到1000个节点:Cluster架构中无Proxy层,Master与slave之间使用异步replic ...

  4. my___sublime Text配置

    sublime text 备份 插件下载 http://www.cnblogs.com/457220157-FTD/p/5546545.html https://www.jianshu.com/p/3 ...

  5. ColorCtr控制颜色渐变

    ColorCtr控制颜色渐变 public class ColorCtr : MonoBehaviour { public static global_color Instance;         ...

  6. Python 多继承(新式类) 的mro算法

    转载自:http://www.cnblogs.com/panyinghua/p/3283831.html mro即method resolution order,主要用于在多继承时判断调的属性的路径( ...

  7. 04-spring中的aop演示

    1 xml配置 1 导包 2 准备对象 package www.test.service; public interface UserService { public abstract void ad ...

  8. Powershell(2)

    powershell(2) 帮助系统(显示出来的参数语法要比Unix中help复杂) save-help -destinationpath c:\help update-help -force -so ...

  9. JQuery 技巧总结

    一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows ...

  10. ANDROID_HOME is not set and "android" command not in your PATH解决

    使用nodejs安装cordova后在项目里面添加平台时出现错误: 原因就是没有配环境变量 使用phonegap开发不仅要配JDK环境变量,还要配ADT环境变量,出现这个错误很显示就是没配ADT环境变 ...