创建异步对象XHR的兼容写法、get、post上传数据的方式

最新推荐文章于 2023-11-12 22:51:07 发布

qq_29069777

最新推荐文章于 2023-11-12 22:51:07 发布

阅读量312

点赞数

分类专栏：前端文章标签： javascript xhr

原文链接：https://www.mk2048.com/blog/blog.php?id=hbaak1kkcb0j&title=%E5%88%9B%E5%BB%BA%E5%BC%82%E6%AD%A5%E5%AF%B9%E8%B1%A1XHR%E7%9A%84%E5%85%BC%E5%AE%B9%E5%86%99%E6%B3%95%E3%80%81get%E3%80%81post%E4%B8%8A%E4%BC%A0%E6%95%B0%E6%8D%AE%E7%9A%84%E6%96%B9%E5%BC%8F

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

兼容ie7以下，创建异步对象的函数

    function creatXHR(){
            if(typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject != "undefined"){
                var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], i;
                for(i=0, i < versions.length;i  ){
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch(err){
                        //。。。none
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            }else{
                throw new Error("No XHR object available.");
            }

        }


        var xhr = creatXHR();

上面出现的arguments.callee.activeXString = versions[i];
实际上代表creatXHR.activeXString = versions[i];

get

                //get 请求时给url拼接数据
        function addURLParam(url,name,value){
            url  = (url.indexOf("?") == -1 ? "?" : "&");
            url  = encodeURIComponent(name)   "="   encodeURIComponent(value);
            return url;
        }

post

    //请求头的写法
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //post 表单可以这么写
    xhr.send(serialize(document.querySelector(“form”));

在XMLHttpRequest 2级中

    //利用FormData
    var data = new FormData();
    //可以向data添加数据
    data.append("key","value");
    //send直接send
    xhr.send(data);

进度事件

loadstart
progress
error
abort
load
loadend

    xhr.onload = function(){
        //...handle
    }

progress事件

1.    progress事件的event对象有三个额外属性：lengthComputable（布尔值，表示进度是否可用）、position（已经接受的字节数）和totalSize（根据响应头预期的字节数）
2.    该事件在数据传输期间会间接性的触发
3.    放在open事件之前比较好

    xhr.onprogress = function(event){
           //..dom
           if(event.lengthComputable){
                dom.innerHTML = "Received "   event.position   " of "   event.totalSize   " bytes";
           }
    }

更多专业前端知识，请上【猿2048】www.mk2048.com