Loading

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>

 

posted @ 2017-02-28 17:06  ZJH_BLOGS  阅读(284)  评论(0)    收藏  举报