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.表单序列化 ...
随机推荐
- Sublime Text怎么设置文件在新标签打开?
设置Sublime Text新标签页tab打开文件.Sublime Text Files not opening a new tab?每次打开文件,Sublime Text总是把当前的tab打开的文件 ...
- perf的采样模式和统计模式
perf的采样模式和统计模式 统计模式和采样模式使用寄存器的方法不相同; 在统计模式下,每次调度之前设置寄存器,调度之后清理寄存器,留个下个进程使用;PMU寄存器的使用方法; 在采样模式下,每次 pm ...
- Tomcat安装及配置详解
Tomcat安装及配置详解 一,Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,Tomcat是Apache 软件基金会(Apache Software Found ...
- python while 学习
while True: reply = input('please input:') if reply == 'stop': break else: print (reply.upper())
- Android 分Dex (MultiDex)
需要分Dex的理由想必大家都知道了.正是在ART以前的Android系统中,Dex文件对于方法索引是用一个short类型的数据来存放的.而short的最大值是65535,因此当项目足够大包含方法数目足 ...
- day 03 字符串 for 循环
1.有变量量name = "aleX leNb" 完成如下操作: 1)移除 name 变量量对应的值两边的空格,并输出处理理结果 name = "aleX leNb&qu ...
- [十三]SpringBoot 之 过滤器（Filter）和监听器（Listener）
过滤器(Filter)和 监听器(Listener)的注册方法和 Servlet 一样,不清楚的可以查看下上一篇文章 代码示例 package me.shijunjie.filter; import ...
- lxm --- ans lb config
lxm --- ans lb config #ANS2.2 Build 160.006 # Last modified by `save config`, Fri Oct 12 17:15:42 20 ...
- 【BZOJ1416/1498】【NOI2006】神奇的口袋（数论，概率）
[BZOJ1416/1498][NOI2006]神奇的口袋(数论,概率) 题面 BZOJ1416 BZOJ1498 洛谷 题面都是图片形式是什么鬼.. 题解 考虑以下性质 1.\(x[1],x[2]. ...
- 洛谷 P2664 树上游戏 解题报告
P2664 树上游戏 题目描述 \(\text{lrb}\)有一棵树,树的每个节点有个颜色.给一个长度为\(n\)的颜色序列,定义\(s(i,j)\) 为 \(i\) 到 \(j\) 的颜色数量.以及 ...