看了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 整理的更多相关文章

  1. 【转载并整理】AJAX XmlHttpRequest对象详解

    一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...

  2. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  3. js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下   鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemo ...

  4. 深刻理解和运用XMLHttpRequest

    本文为转载文章,因见猎心喜,担心失传,故贴此以备不时之需. 原文地址:传送 你真的会使用XMLHttpRequest吗? xmlhttprequest http cors ajax ruoyiqing ...

  5. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...

  6. Ajax学习整理

    什么是ajax?W3School中给ajax的定义是: 1.AJAX = 异步 JavaScript 和 XML. 2.AJAX 是一种用于创建快速动态网页的技术. 3.通过在后台与服务器进行少量数据 ...

  7. js事件(Event)知识整理[转]

    事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式 这种方式是给元素的onxxxx属性赋值,只能绑定有一个处理句柄. 但很多时候我们需要绑定多个处理句柄到一个事件上 ...

  8. Ajax 整理总结（进阶）

    Ajax 进阶学习要点:1.加载请求2.错误处理3.请求全局事件4.JSON 和 JSONP5.jqXHR 对象 一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的 ...

  9. Ajax 整理总结（入门）

    Ajax 学习要点: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 ...

随机推荐

  1. 3.结对编程成果报告（小学生四则运算的出题程序，Java实现）

    程序名称:小学生四则运算的出题程序 先附上代码: package com.makequestion; import java.text.DecimalFormat;import java.util.R ...

  2. [cnbeta]微软最强数据中心级操作系统

    微软近日发表了一篇介绍Windows系统内核的博文,期间为了展示Windows的强大扩展性,放出了一张非常震撼的Windows任务管理器截图:乍一看似乎没啥特别的,几十甚至上百个逻辑核心的系统并不罕见 ...

  3. C++11 锁 lock

    转自:https://www.cnblogs.com/diegodu/p/7099300.html 互斥(Mutex: Mutual Exclusion) 下面的代码中两个线程连续的往int_set中 ...

  4. 移植spdylay到libcurl

    Libcurl是第三方网络库,支持各种网络协议 SPDY是Google提出的用来替代HTTP1.1的网络协议, 目前google.com, facebook.com, twitter.com服务器端都 ...

  5. canvas - 简单的神经网络

    1.国际惯例,先上效果图 一下效果图使用三次贝塞尔曲线进行连线,代码中有直接使用直线连线的代码,可直使用. 2.查看演示请看 这里. 3 代码     html: <canvas id=&quo ...

  6. 题解 P1765 【手机_NOI导刊2010普及（10）】

    说实话,打表真的很累! 所以小金羊又开始暴力出奇迹了! 这个题解适合初学者使用. 知识点:string里面的str.find()函数: 可以查找字符串和字符,有就返回位置(开头是0), 没有就返回st ...

  7. C++解析(16)：友元与类中的函数重载

    0.目录 1.友元的尴尬能力 2.类中的函数重载 3.小结 1.友元的尴尬能力 什么是友元? 友元是C++中的一种关系 友元关系发生在函数与类之间或者类与类之间 友元关系是单项的,不能传递 友元的用法 ...

  8. 【BZOJ4945】【NOI2017】游戏（搜索，2-sat）

    [NOI2017]游戏(搜索,2-sat) 题面 BZOJ的SPJ是假的 兹磁洛谷 题解 如果没有\(x\)地图的影响 这就是一个裸的\(2-sat\)问题 但是现在有不超过\(8\)个\(x\)地图 ...

  9. Static全局变量（函数）与普通的全局变量（函数）的区别

    转自:http://www.cnblogs.com/zjvskn/p/5548879.html Static全局变量与普通的全局变量有什么区别? 答: 全局变量(外部变量)的说明之前再冠以static ...

  10. 根据数据库连接的java.sql.Connection获取数据库名称

    // 获取数据库的元数据信息 DatabaseMetaData metaData = conn.getMetaData(); // 获取数据库名称的方法 System.out.println(meta ...