XMLHttpRequest 整理
看了SF 上的一篇文章感触颇深：你真的会使用XMLHttpRequest吗？
在这我写上我读后的笔记：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest测试</title>
</head>
<body>
<progress id="uploadprogress" value="0" min="0" max="100">0</progress> <script type="text/javascript">
//构造表单数据
var formData = new FormData();
formData.append('username','tom');
//创建XHR对象
var xhr=new XMLHttpRequest();
//设置xhr过期时间
xhr.timeout = 3000; //手动设置了中content-type
//xhr.setRequestHeader(); //设置响应返回数据格式
xhr.responseType="json";
//创建一个post 异步请求
xhr.open("post",'./server.php',true); /**
*
* 匿名函数参数e为progressEvent 进度事件
*
**/
//注册相关事件回调处理函数
xhr.onload = function(e){
if(this.status==200 || this.status==304){
//alert(this.responseText);
console.log(this.response);
//console.log(e);
}
}
//当请求结束（包括请求成功和请求失败）时触发
xhr.onloadend =function(e){
console.log("触发onloadend 请求结束");
}
//调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
xhr.onloadstart=function(e){
console.log("触发onloadstart 发送时立刻触发");
}
//获取xml错误事件
xhr.ontimeout= function(e){
alert("超时！");
console.log(e);
}
//获取xml错误事件
xhr.onerror=function(e){
alert("服务器发生错误！");
console.log(e);
}
//获取xml进度事件
xhr.onprogress = function(e) {
if (e.lengthComputable) {
var complete = (e.loaded / e.total * 100 | 0);
var progress = document.getElementById('uploadprogress');
progress.value = progress.innerHTML = complete;
}
}; xhr.onabort=function(e){
console.log("你取消了这个ajax请求");
}
//每当当前状态变化时触发
xhr.onreadystatechange = function () {
//获取xmr请求当前的状态
switch(xhr.readyState){
case 0://初始状态，未打开
console.log("此时xhr对象被成功构造，open()方法还未被调用")
break;
case 1://OPENED
console.log("open()方法已被成功调用，send()方法还未被调用");
break;
case 2://HEADERS_RECEIVED 已获取响应头
//abort()取消这个请求
//xhr.abort();
console.log("send()方法已经被调用, 响应头和响应状态已经返回")
break;
case 3://LOADING 正在下载响应体
console.log("响应体(response entity body)正在下载中，此状态下通过xhr.response可能已经有了响应数据")
break;
case 4://DONE 响应结束
console.log("整个数据传输过程结束，不管本次请求是成功还是失败")
break;
}
} try{
//在请求时 如果发生错误 需要捕获否则无法执行下面的代码
xhr.send(formData);
}catch(e) {
console.log(e);
}; //console.log(formData);
//console.log(xhr);
</script>
</body>
</html>
XMLHttpRequest 整理的更多相关文章
- 【转载并整理】AJAX XmlHttpRequest对象详解
一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- js事件(Event)知识整理
事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下 鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...
- 深刻理解和运用XMLHttpRequest
本文为转载文章,因见猎心喜,担心失传,故贴此以备不时之需. 原文地址:传送 你真的会使用XMLHttpRequest吗? xmlhttprequest http cors ajax ruoyiqing ...
- http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理
这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...
- Ajax学习整理
什么是ajax?W3School中给ajax的定义是: 1.AJAX = 异步 JavaScript 和 XML. 2.AJAX 是一种用于创建快速动态网页的技术. 3.通过在后台与服务器进行少量数据 ...
- js事件(Event)知识整理[转]
事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...
- Ajax 整理总结（进阶）
Ajax 进阶学习要点:1.加载请求2.错误处理3.请求全局事件4.JSON 和 JSONP5.jqXHR 对象 一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的 ...
- Ajax 整理总结（入门）
Ajax 学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 ...
随机推荐
- 【第二周】Java实现英语文章词频统计（改进1）
本周根据杨老师的spec对英语文章词频统计进行了改进 1.需求分析: 对英文文章中的英文单词进行词频统计并按照有大到小的顺序输出, 2.算法思想: (1)构建一个类用于存放英文单词及其出现的次数 cl ...
- 第四周PSP &进度条
团队项目PSP 一:表格 C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论开发环境.工具以及技术 8:37 10:42 25 10 ...
- php 多维数组排序
PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...
- 31. Ubuntu15.04系统中如何启用、禁用客人会话
https://jingyan.baidu.com/article/046a7b3edf9639f9c27fa995.html 31. Ubuntu15.04系统中如何启用.禁用客人会话 听语音 | ...
- 用iptables做代理
出于安全考虑,Linux系统默认是禁止数据包转发的.配置Linux系统的ip转发功能,打开系统转发功能:echo "1" > /proc/sys/net/ipv4/ip_fo ...
- 10个linux网络和监控命令
我下面列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nsloo ...
- 关于ADO一个容易被忽视的问题!UpdateBatch [问题点数：0分]
这是一个常见但容易被忽视的问题,旧贴有问及但没答案,因此提高分数.相信大家常这样使用Cache模式:ADOConnection1.BeginTrans;Try ADODataSet1.UpdateBa ...
- BZOJ3747 POI2015Kinoman（线段树）
考虑固定左端点,求出该情况下能获得的最大值.于是每次可以在某数第一次出现的位置加上其价值,第二次出现的位置减掉其价值,查询前缀最大值就可以了.每次移动左端点在线段树上更新即可. #include< ...
- 【刷题】洛谷 P4143 采集矿石
题目背景 ZRQ成功从坍塌的洞穴中逃了出来.终于,他看到了要研究的矿石.他想挑一些带回去完成任务. 题目来源:Zhang_RQ哦对了ZRQ就他,嗯 题目描述 ZRQ发现这里有 \(N\) 块排成一排的 ...
- hdu4554 A Famous Game 概率期望
题面 题意:n个球,2种颜色,可能有0~n个红球,每种情况的概率相同.现在从箱子里取出了$p$个球,其中有$Q$个是红球,问现在再取一个球是红球的概率为多少? 题解:因为0 ~ n的概率相同,所以每个 ...