一些XMLHttpRequest的例子代码

2022-01-16 15:46:50

以下例子摘录自：javascript权威指南

//异步请求(事件监听请求是否返回)

function getText(url,callback){

    var request = new XMLHttpRequest();

    request.open('GET',url);

    request.onreadystatechange = function () {

        if(request.readyState === 4 && request.status === 200){

            var type = request.getResponseHeader('Conten-Type');

            if(type.match(/^text/)){

                callback(request.responseText);

            }

        }

    };

    request.send(null);

}

//同步请求(会阻塞页面)

function getTextSync(url){

    var request = new XMLHttpRequest();

    request.open('GET',url,false); //false表示同步请求

    request.send(null);

    if(request.status !== 200){

        throw new Error('..');

    }

    var type = request.getResponseHeader('Conten-Type');

    if(!type.match(/^text/)){

        throw new Error('....');

    }

    return request.responseText;

}

//解析HTTP请求响应

function get(url,callback){

    var request = new XMLHttpRequest();

    request.open('GET',url);

    request.onreadystatechange = function(){

        if(request.readyState === 4 && request.status === 200){

            var type = request.getResponseHeader('Content-Type');

            if(type.indexOf('xml') !== -1 && request.responseXML){

                callback(request.responseXML);

            }else if(type === 'application/json'){

                callback(JSON.parse(request.responseText));

            }else{

                callback(request.responseText);

            }

        }

    };

    request.send(null);

}

非表单数据形式的表单编码的请求GET和提交POST(如data对象)

//1.将保存有(名:值)对属性的data对象转化为整个字符串

function encodeFormData(data){

    if(!data){return ''}

    var pairs = [];  //保存名=值对

    for(var name in data){

        if(data.hasOwnProperty(name) && typeof data[name] !== 'function'){

            var value = data[name].toString();

            name = encodeURIComponent(name.replace('%20','+'));

            value = encodeURIComponent(value.replace('%20','+'));

            pairs.push(name+'='+value);

        }

    }

    return pairs.join('&');

}

//2.直接发送data对象的HTTP POST请求工具函数

function postData(url,data,callback){

    var request = new XMLHttpRequest();

    request.open('POST',url);

    request.onreadystatechange = function () {

        if(request.readyState === 4 && callback){

            callback(request); //将request对象传递给callback处理

        }

    };

    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    request.send(encodeFormData(data));

}

//3.若表单数据只是为了只读查询,则最好用GET方法,在url+'?'+查询字符串

function getData(url,data,callback){

    var request = new XMLHttpRequest();

    request.open('GET',url+'?'+encodeFormData(data));

    request.onreadystatechange = function(){

        if(request.readyState === 4 && callback){

            callback(request);

        }

    };

    request.send(null);

}

//4.使用JSON编码主体来发起HTTP POST请求

function postJSON(url,data,callback){

    var request = new XMLHttpRequest();

    request.open('POST',url);

    request.onreadystatechange = function () {

        if(request.readyState === 4 && callback){

            callback(request);

        }

    };

    request.setRequestHeader('Content-Type','application/json');

    request.send(JSON.stringify(data));

}

//5.使用POST发送multipart/form-data请求主体

function postFormData(url,data,callback){

    if(FormData){throw new Error('FormData is not implemented')}

    var request = new XMLHttpRequest();

    request.open('POST',url);

    request.onreadystatechange = function () {

        if(request.readyState === 4 && callback){

            callback(request);

        }

    };

    //创建一个FormData对象的实例

    var formdata = new FormData();

    for(var name in data){

        if(data.hasOwnProperty(name) && typeof data[name] !== 'function'){

            formdata.append(name,data[name]);

        }

    }

    request.send(formdata);

}

//6.终止请求和超时(在文本输入域请求推荐内容时,如果用户在服务器的建议达到之前输入了新的字符,则应该终止请求)

function timedGetText(url,delay,callback){

    var request = new XMLHttpRequest();

    var timedOut = false;

    //启动计时器,在delay时间到后将终止请求

    var id = setTimeout(function () {

        timedOut = true;

        request.abort();

    },delay);

    request.open('GET',url);

    request.onreadystatechange = function () {

        if(timedOut||request.readyState !== 4){return}

        clearTimeout(id);

        if(request.status === 200){

            callback(request.responseText);

        }

    };

    request.send(null);

}

7.HTTP进度事件

XMLHttpRequest对象在请求的不同阶段触发不同类型的事件，所以它不需要检查readyState属性。

当调用send（）时，触发单个loadstart事件。当正在加载服务器的响应时，XMLHttpRequest对象会发生progress事件，通常每隔50毫秒左右，所以可以使用这些事件给用户反馈请求的进度

如果请求快速完成，它可能从不会触发progress事件。当事件完成，会触发load事件。

HTTP请求无法完成有3种情况，对应3种事件。如果请求超时，会触发timeout事件。如果请求中止，会触发abort事件。像太多重定向这样的网络错误会阻止请求完成，但这些情况发生时会触发error事件。

对于任何具体请求，浏览器将只会触发load、abort、timeout和error事件中的一个。

progress事件属性:loaded目前传输的字节数值,total是自“Content-Length”头传输的数据的整体长度(字节),如果未知长度则为0,若知道长度则lengthComputable属性为true

if('onprogress' in (new XMLHttpRequest())){ //检测是否支持progress事件

    var request = new XMLHttpRequest();

    request.onprogress = function (e) {

        if(e.lengthComputable){

            progress.innerHTML = Math.round(100* e.loaded/ e.total) + '%';

        }

    }

}

对于XMLHttpRequest对象x，设置x.onprogress以监控响应的下载进度，并且设置x.upload.onprogress以监控请求的上传进度。

8.跨域HTTP请求

//XMLHttpRequest对象通常仅可以发起和文档具有相同服务器的HTTP请求。

//XHR2通过在HTTP响应中选择发送合适的CORS（ Cross- Origin Resource Sharing，跨域资源共享）允许跨域访问网站。

//而IE8通过这里没有列出的专用XDomainRequest对象支持它。

//如果给XMLHttpRequest的open（）方法传入用户名和密码，那么它们绝对不会通过跨域请求发送

//除外，跨域请求通常也不会包含其他任何的用户证书：cookie和HTTP身份验证令牌（ token）通常不会作为请求的内容部分发送且任何作为跨域响应来接收的cookie都会丢弃。

//如果跨域请求需要这几种凭证才能成功，那么必须在用send（）发送请求前设置XMLHttpRequest的withCredentials属性为true。这样做不常见，但测试withCredentials的存在性是测试浏览器是否支持CORS的方法

whenReady(

    function () {

        var supportsCORS = (new XMLHttpRequest()).withCredentials !== (void 0);

        var links = document.getElementsByTagName('a');

        for(var i=0;i<links.length;i++){

            var link = links[i];

            if(!link.href || link.title){continue;}

            //如果是跨域链接

            if(link.host !== location.host || link.protocol !== location.protocol){

                link.title = '这是站外链接';

                if(!supportsCORS){continue;} //不支持CORS就退出

            }

            if(link.addEventListener){

                link.addEventListener('mouseover',mouseoverHandler,false);

            }else{

                link.attachEvent('onmouseover',mouseoverHandler);

            }

        }

        function mouseoverHandler(event){

            var e = event||window.event;

            var link = e.target|| e.srcElement;

            var url = link.href;

            var request = new XMLHttpRequest();

            request.open('HEAD',url);

            request.onreadystatechange = function () {

                if(request.readyState === 4 || request.status === 200){

                    var type = request.getResponseHeader('Content-Type');

                    var size = request.getResponseHeader('Content-Length');

                    var date = request.getResponseHeader('Last-Modified');

                    link.title = '类型: '+type+' \n'+'大小: '+size+' \ n'+'时间: '+date;

                }else if(!link.title){

                    link.title = "Couldn't fetch details:\n"+request.status+" "+request.statusText;

                }

            };

            request.send(null);

            if(link.removeEventListener){

                link.removeEventListener('mouseover',mouseoverHandler,false);

            }else{

                link.detachEvent('onmouseover',mouseoverHandler);

            }

        }

    }

);

码农公寓

相关文章