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.表单序列化 ...
随机推荐
- iOS-UICollectionViewController协议及回调
一.UICollectionViewDataSource 1.返回Section数量的方法 - (NSInteger)numberOfSectionsInCollectionView: (UIColl ...
- WPF和Expression Blend开发实例:Adorner(装饰器)应用实例
装饰器-- 表示用于修饰 UIElement 的 FrameworkElement 的抽象类 简单来说就是,在不改变一个UIElement结构的情况下,将一个Visual对象加到它上面. 应用举例: ...
- 一个form表单，多个提交按钮
技巧就是把提交的input的类型改成button!这样就可以实现多个按钮提交! 以下是案例: <form action="" id="tijiao"> ...
- 查询出menupath字段中 出现 “- "（横杆）大于3次的 记录
- ETL技术( Extract-Transform-Load) 数据仓库技术-比如kettle
每次面试,互联网的面试官,经常问我有没有用过ETL,每次我都懵逼,说没用过,觉得是多么高大上的东东,数据仓储 今天查了一下,我晕,自己天天用的Kettle就是最典型的ETL, 可以实现不同数据库之间的 ...
- JVM 内部原理系列
JVM 内部原理(一)— 概述 JVM 内部原理(二)— 基本概念之字节码 JVM 内部原理(三)— 基本概念之类文件格式 JVM 内部原理(四)— 基本概念之 JVM 结构 JVM 内部原理(五)— ...
- DataTable Excel 导出：
public static class CSVFileHelper { public static string ToHtmlTable(this DataTable target) { return ...
- P1039 侦探推理
题目描述 明明同学最近迷上了侦探漫画<柯南>并沉醉于推理游戏之中,于是他召集了一群同学玩推理游戏.游戏的内容是这样的,明明的同学们先商量好由其中的一个人充当罪犯(在明明不知情的情况下),明 ...
- [HNOI2014]江南乐 博弈论
题面 题面 题解 首先我们知道一个关于除法的重要性质:对于一个固定的\(i\),表达式\(\frac{i}{m}\)的取值只有根号个. 因此我们考虑如何优化SG函数的求解. 观察到在取值相同的同一段中 ...
- 连接Mysql数据库
JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.la ...