xhr

作者: wuxuan94 | 来源:发表于2017-11-23 16:30 被阅读0次

    XMLHttpRequest对象(简称XHR)是ajax技术的核心,ajax可以无刷新更新页面得益于xhr。
    一、创建

    var xhr = new XMLHttpRequest();
    

    二、发送请求
    open()

    xhr.open("get","example.php", false);
    

    1.第一个参数指定请求方式
    2.第二个参数url
    3.第三个参数表示是否同步,默认为true(异步)
    4.如果请求一个受密码保护的URL,把用于认证的用户名和密码作为第4和第5个参数传递给open()方法

    send()
    如果是GET方法,send()方法无参数,或参数为null;如果是POST方法,send()方法的参数为要发送的数据
    调用send()方法后,请求被分派到服务器

    xhr.open("get", "example.txt", false);
    xhr.send(null);
    

    三、接收响应

    responseText: 作为响应主体被返回的文本(文本形式)
    responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式)
    status: HTTP状态码(数字形式)
    statusText: HTTP状态说明(文本形式)
    

    四、同步
    如果接受的是同步响应,则需要将open()方法的第三个参数设置为false,那么send()方法将阻塞直到请求完成。一旦send()返回,仅需要检查XHR对象的status和responseText属性即可。
    同步请求是吸引人的,但应该避免使用它们。客户端javascript是单线程的,当send()方法阻塞时,它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢,那么用户的浏览器将冻结。

    五、异步
    如果需要接收的是异步响应,这就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。

    0(UNSENT):未初始化。尚未调用open()方法
    1(OPENED):启动。已经调用open()方法,但尚未调用send()方法
    2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息
    3(LOADING):接收。已经接收到部分响应主体信息
    4(DONE):完成。已经接收到全部响应数据,而且已经可以在客户端使用了
    

    理论上,只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操作
                result.innerHTML += xhr.responseText;
            }
        }
    }
    //发送请求
    xhr.open('get','message.xml',true);
    xhr.send();
    

    相关文章

      网友评论

        本文标题:xhr

        本文链接:https://www.haomeiwen.com/subject/kkuovxtx.html