AJAX(四):XHR2支持的方法
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支持的方法的更多相关文章
- 第114天:Ajax跨域请求解决方法(二)
一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子 ...
- AJAX跨域的常见方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问.比如说你的网站域名是aaa.com,想要通过AJAX请求 ...
- ajax 调用asp.net后台方法
ajax 调用asp.net后台方法 这种做法有好几种,如调用xx.asxh 页面,或者直接调用xx.aspx也面,在page_Load中进行一些判断然后调用后面的其他方法, 或者你可以直接调用we ...
- [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)
无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可能有很多不确定因素导致异常的Web应用程序;在传统的Web开发中,处理异常的方式——设计专门一个 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- WordPress忘记密码找回登录密码的四种行之有效的方法
WordPress忘记密码找回登录密码的四种行之有效的方法 PS:20170214更新,感谢SuperDoge同学提供的方法,登入phpMyAdmin后,先从左边选自己的数据库,然后点上面的 SQL ...
- Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案
最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...
- 现有语言不支持XXX方法
史上最强大的IDE也会有bug的时候哈,今天遇到这个问题特别郁闷,百度了下,果然也有人遇到过这个问题 解决方法: 1.调用的时候参数和接口声明的参数不一致(检查修改) 2.继承接口中残留一个废弃的方法 ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
随机推荐
- Java对象排序两种方法
转载:https://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序,下面提供两种简单方式: 方法一:将要排序 ...
- 转 python 随机走动的模拟
https://blog.csdn.net/python2014/article/details/21231971 麻省理工的随机走动模块,还不错,三天搞懂了,不过懂得不彻底. 记录下修改的代码 ...
- edis Cluster实现原理
一.Redis Cluster主要特性和设计 集群目标 1)高性能和线性扩展,最大可以支撑到1000个节点:Cluster架构中无Proxy层,Master与slave之间使用异步replic ...
- my___sublime Text配置
sublime text 备份 插件下载 http://www.cnblogs.com/457220157-FTD/p/5546545.html https://www.jianshu.com/p/3 ...
- ColorCtr控制颜色渐变
ColorCtr控制颜色渐变 public class ColorCtr : MonoBehaviour { public static global_color Instance; ...
- Python 多继承(新式类) 的mro算法
转载自:http://www.cnblogs.com/panyinghua/p/3283831.html mro即method resolution order,主要用于在多继承时判断调的属性的路径( ...
- 04-spring中的aop演示
1 xml配置 1 导包 2 准备对象 package www.test.service; public interface UserService { public abstract void ad ...
- Powershell(2)
powershell(2) 帮助系统(显示出来的参数语法要比Unix中help复杂) save-help -destinationpath c:\help update-help -force -so ...
- JQuery 技巧总结
一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows ...
- ANDROID_HOME is not set and "android" command not in your PATH解决
使用nodejs安装cordova后在项目里面添加平台时出现错误: 原因就是没有配环境变量 使用phonegap开发不仅要配JDK环境变量,还要配ADT环境变量,出现这个错误很显示就是没配ADT环境变 ...