一些XMLHttpRequest的例子代码

以下例子摘录自：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);
            }
        }
    }
);

秒客网

一些XMLHttpRequest的例子代码

相关文章