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.表单序列化 ...
随机推荐
- SSH框架配置
--------------------------------applicationContext.xml-------------------------------- <?xml vers ...
- 在linux下编译线程程序undefined reference to `pthread_create'
由于是Linux新手,所以现在才开始接触线程编程,照着GUN/Linux编程指南中的一个例子输入编译,结果出现如下错误:undefined reference to 'pthread_create'u ...
- mysql中用户和权限
用户管理 用户数据所在位置: mysql中的所有用户,都存储在系统数据库(mysql)中的user 表中——不管哪个数据库的用户,都存储在这里. 表初始内容如下: 创建用户: 形式: create ...
- git管理策略
master:生产环境,用于发布正式稳定版 release-*.*:预发布分支,发布稳定版之前的正式分支 develop:开发分支,测试环境中使用 feature/who xxx:功能分支,功能未开发 ...
- 'phantomjs.exe' executable needs to be in PATH. (selenium PhantomJS python)
今天selenium PhantomJS python用了下,发现报错,提示我:'phantomjs.exe' executable needs to be in PATH. from seleniu ...
- BZOJ 1228 E&G(sg函数+找规律)
把一对石子堆看出一个子游戏.打出子游戏的sg表找规律.. 这个规律我是一定找不出来的... 对于i,j,如果 (i-1)%pow(2,k+1) < pow(2,k) (j-1)%pow(2,k+ ...
- MariaDB插入中文出现???情况
本来打算创建一个测试表进行一个简单的实验,发现创建完python_test表后插入数据后,select发现所有中文都变成问号了,这一看就是出现了乱码 MariaDB [lhc]> create ...
- [二]SpringBoot 之 简单的接口
(1)编写一个实体类Demo package me.shijunjie.entity; public class Demo { private long id; private String name ...
- 在洛谷3369 Treap模板题 中发现的Splay详解
本题的Splay写法(无指针Splay超详细) 前言 首先来讲...终于调出来了55555...调了整整3天..... 看到大部分大佬都是用指针来实现的Splay.小的只是按照Splay的核心思想和原 ...
- 获取和验证Windows AD域的用户信息
1.获取windows AD域用户信息,首先需要有一个ad域管理员权限的账号,用这个账号连接ad域,获取所有域用户信息 用LdapContext,它继承自DirContext public Objec ...