WEB前端第六十一课——xhr对象POST请求、xhr兼容性、timeout、progress

1.xhr对象发送post请求

  Ajax中post请求与get请求不同之处在于多了一个表单,而get请求则是通过url发送附加信息。

  在xhr对象中,post请求可以通过FormData构建表单数据。

  语法:var formData = new FormData();

     formData.append('key',value);  //value为字符串时需要使用引号。

     xhr.send(formData);

  说明:formData的创建必须在“xhr.send(formData)”之前!

  示例:

    var userName = document.querySelector('.userName').value;

    var userCode = document.querySelector('.userCode').value;

    var formData = new FormData();  //FormData()为系统内置对象类

    formData.append('uName',userName);

    formData.append('uCode',userCode);

    xhr.send(formData);

  补充:

   ⑴ GET请求的主要特点:

    GET请求可被缓存,请求保留在浏览器历史记录中

    GET请求可被收藏为书签

    GET请求不应在处理敏感数据时使用

    GET请求有长度限制

    GET请求只应当用于取回数据

   ⑵ POST请求的主要特点:

    POST请求不会被缓存,不会保留在浏览器历史记录中

    POST请求不能被收藏为书签

    POST请求对数据长度没有要求

   ⑶ 与POST相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,需使用POST请求:

      无法使用缓存文件(更新服务器上的文件或数据库)

      向服务器发送大量数据(POST没有数据量限制)

      发送包含未知字符的用户输入时,POST比GET更稳定也更可靠

    参考资料:w3cschool

2.xhr对象兼容问题

  xhr对象的获取方式在 IE 和 非IE 环境下需要使用不同的方法。

  语法:

    IE浏览器支持的方法:ActiveXObject('')

    非IE环境支持的方法:XMLHttpRequest()

  因此,在创建 xhr 对象时需要进行判断,示例如下:

    if(window.XMLHttpRequest){

      var xhr = new XMLHttpRequest();

    }else if(window.ActiveObject){

      var xhr = new ActiveXObject('');

    }

  也可以直接使用三目运算进行处理:

    xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

3.请求超时

  timeout 属性值等于一个整数,用于设置当请求发出后等待接收响应的时间。

  ontimeout() 方法则是等待超时后,自动执行的回调函数。

  语法:

    xhr.timeout == n;    //时间单位“毫秒”,表示请求发出后响应等待时间。

    xhr.ontimeout = function(){

      console.log('The request for'+url地址+'time out');

    }

  说明:如果在设置的时间内没能收到后台响应内容,则视为请求超时自动执行ontimeout函数。

     如果该属性设置等于 0(默认值),表示没有时间限制!

  代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生Ajax请求</title>
<!--    <script src="../JScodeFile/jquery-1.8.3.js"></script>-->
</head>
<body>
    <label for="userName">登录账户</label>
    <input type="text" id="userName" class="userName">
    <br>
    <label for="userCode">登录密码</label>
    <input type="text" id="userCode" class="userCode">
    <br>
    <button>登录</button>
<script>
    var uName = document.querySelector('.userName');
    var uCode = document.querySelector('.userCode');
    var btn = document.querySelector('button');
    btn.onclick=function () {
//      var xhr=new XMLHttpRequest();   //创建对象,准备发送Ajax请求

//      考虑浏览器兼容性问题,创建 xhr 对象时需要进行判断。
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject();
        }
        xhr.onreadystatechange=function () {    //监听后台接收请求状态的变化
            if (xhr.readyState==4){             //判断当前请求进行到何种状态,属性值 4 表示后台已经接收到前台请求
                if (xhr.status==200){           //判断前台是否准确接收到后台反馈的数据,属性值 200 表示通信成功
                    console.log(xhr.responseText);  //获取后台反馈的完整数据,json串
                    console.log(typeof xhr.responseText);   //返回结果为 string 类型
                    console.log(JSON.parse(xhr.responseText));   //解析返回结果转换为对象
                }
            }
        }
        xhr.timeout=2000;       //超时设置单位“毫秒”!!
        xhr.ontimeout=function(){
            alert('访问超时,请刷新页面重新加载。')
        }
//      使用 get 方式发送请求:
        xhr.open('get',"xhr.php?name="+uName.value+"&code="+uCode.value,true);
//         xhr.open('get',"xhr.php?name="+$('.userName').val()+"&code="+$('.userCode').val(),true);
        xhr.send(null);

//      使用 post 方式发送请求:
/*        xhr.open('post','xhr.php',true);
        var formD = new FormData();
        formD.append('name',uName.value);
        formD.append('code',uCode.value);
        xhr.send(formD);*/
    }
</script>
</body>
</html>
<?php
/*    $name1=$_POST['name'];
    $code1=$_POST['code'];*/
    $name1=$_GET['name'];
    $code1=$_GET['code'];
    $res = array('msg'=>'ok','info'=>$_GET);
    $res['userName']=$name1;
    $res['userCode']=$code1;
//    sleep(3);       //设置服务器睡眠,单位“秒”!!
    echo json_encode($res);
?>

4.进度条

  ⑴ progress

    HTML中使用<progress>标签用于定义运行中的任务进度。

    progress属性有:

      max,设置任务完成的值;

      value,设置任务当前进度值。

    注意:<progress>需要与JS配合使用显示任务进度;

      <progress>不能用于表示度量衡,如存储空间使用情况(使用<meter>标签)

  ⑵ progress常用属性

    lengthComputable,返回一个布尔值,表示当前进度是否有可计算长度,

             默认为true,表示进度没有100%,进度100%时变为false;

    total,返回一个整数,表示当前进度的总长度,

      如果是通过HTTP下载资源,表示内容本身长度,不包含HTTP头部的长度,

      如果lengthComputable属性值为false,则total属性无法取得正确的值。

    loaded,返回一个数值,表示当前进度已经完成的数量,

      该属性值除以total属性值,可以得到目前进度的百分比。

  ⑶ upload

    upload是XMLHttpRequest对象的一个属性,其属性值亦是一个对象,

      该对象定义了addEventListener()方法和整个progress事件集合。

  代码示例:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
</head>
<body>
    <progress max="1" value="0"></progress>
    <input type="file" name="tempFile" class="tempFile" multiple><br>
    <button onclick="fileSubmit()">上传文件</button>
    <script>
        function fileSubmit() {
            var files=document.querySelector('.tempFile').files;
        //  发送文件需要使用POST方式,创建FormData对象。
            var fileData=new FormData();
            for (var i=0,file;file = files[i];i++){
        //  将文件添加到FormData对象中。
                fileData.append('fileName',file.name);
            }
        //  使用append方法添加到FormData的数据,并不是以对象属性的方式存储,外界无法直接访问到数据
        //  需要使用 for of 方法才能在控制台中打印输出。
            for (var value of fileData.values()){
                console.log(value);
                console.log(typeof value);
            }
        //  Ajax请求对象
        //     var xhr=new XMLHttpRequest();    //直接创建
            if (window.XMLHttpRequest){         //兼容性方式创建
                var xhr=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                var xhr=new ActiveXObject('');
            }
            // var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
        //  监听请求响应通信状态
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4){
                    if (xhr.status==200){
                        console.log(JSON.parse(xhr.responseText));      //FormData添加文件时,无法直接解析输出!
                    }
                }
            }
        //  任务进度监听,当上传进度发生改变时,回调函数自动执行
            var progressBar = document.querySelector('progress');
            xhr.upload.onprogress=function(eve){
                if (eve.lengthComputable){
                    progressBar.value = (eve.loaded/eve.total);
                }
            }
        //  准备发送请求上传文件
            xhr.open('post','progress.php',true);
            xhr.send(fileData);
        }
    </script>
</body>
</html>
<?php
    echo json_encode($_POST['fileName']);
?>

 

posted @ 2021-01-26 11:35  后来喵  阅读(1049)  评论(0编辑  收藏  举报