• XHR对象


    一、XMLHttpRequest对象

    var xhr = new XMLHttpRequest(),
        i = 0;
    for(var key in xhr){
      if(xhr.hasOwnProperty(key)){
        i++;
      }
    }
    console.log(i); //0
    console.log(XMLHttpRequest.prototype.hasOwnProperty('timeout')); //true

    会发现XMLHttpRequest实例对象没有自身属性,实际上,它的所有属性均来自于XMLHttpRequest.prototype。
    追根溯源

    xhr => XMLHttpRequest.prototype => XMLHttpRequestEventTarget.prototype => EventTarget.prototype => Object.prototype

    二、XMLHttpRequest实例的属性
    1、readyState
    只读,readyState记录了ajax调用过程中所有可能的状态,表示XMLHttpRequest请求当前所处的状态。

    0表示未初始化,请求已建立;
    1表示初始化,请求已建立,但未发送;
    2表示发送数据,请求已发送;
    3表示数据传送中,请求处理中,响应的数据还不够齐全;
    4表示完成,数据接收完毕。

    2、response
    只读,表示服务器的响应内容。
    3、responseType
    表示服务器返回数据的类型,缺省为空字符串,可取 "arraybuffer","blob","document","json","text" 共五种类型。
    4、responseText
    只读,表示服务器响应内容的文本形式。
    5、responseXML
    只读, responseXML表示xml形式的响应数据, 缺省为null, 若数据不是有效的xml, 则会报错.
    6、status
    只读,status表示本次请求所得到的HTTP状态码,初始值为0。如果服务器没有显式地指定状态码,那么status将被设置为默认值,即200。基本上,只有2xx和304的状态码,表示服务器返回是正常状态。

    1** 消息;2** 成功;3** 重定向; 4** 请求错误; 5** 服务器错误。
    200,OK,访问正常
    301,Moved Permanently,永久移动
    302,Move temporarily,暂时移动
    304,Not Modified,未修改
    305,请求的资源必须通过指定的代理才能被访问
    307,Temporary Redirect,暂时重定向
    400,语义有误,当前请求无法被服务器理解
    401,Unauthorized,未授权
    403,Forbidden,禁止访问,服务器已经理解请求,但是拒绝执行它。
    404,Not Found,未发现指定网址,请求失败,在服务器上面没有找到请求的资源。
    500,Internal Server Error,服务器代码错误

    7、statusText
    只读,statusText表示服务器发送的状态提示,包含整个状态信息,比如"200 OK"。

    8、timeout
    用于指定ajax的超时时长,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0,就表示没有时间限制。
    9、responseURL
    responseURL返回ajax请求最终的URL,如果请求中存在重定向,那么responseURL表示重定向之后的URL。
    10、withCredentials
    withCredentials是一个布尔值,默认为false,表示跨域请求中不发送cookies等信息。当它设置为true时,cookies,authorization headers 或者TLS客户端证书都可以正常发送和接收。显然,它的值对同域请求没有影响,该属性适用于IE10+,opera12+及其他现代浏览器。

    xhr.withCredentials = true;

    服务器必须显示返回Access-Control-Allow-Credentials这个头信息。

    Access-Control-Allow-Credentials: true

    11、upload
    属性默认返回一个XMLHttpRequestUpload对象,用于上传资源,该对象具有如下方法:

    onloadstart
    onprogress
    onabort
    onerror
    onload
    ontimeout
    onloadend

    三、XMLHttpRequest实例的方法
    1、getResponseHeader()
    getResponseHeader方法用于获取ajax响应头中指定字段的值,如果response headers中存在相同的字段,那么它们的值将自动以字符串的形式连接在一起。
    2、getAllResponseHeaders()
    getAllResponseHeaders方法用于获取所有安全的ajax响应头,响应头以字符串形式返回。每个HTTP报头名称和值用冒号分隔,如key:value,并以 结束。
    3、open()
    open方法用于指定发送HTTP请求的参数,它的使用格式如下,一共可以接受五个参数。

    void open(
     string method, //表示HTTP动词,比如“GET”、“POST”、“PUT”和“DELETE”。
     string url, //表示请求发送的网址。
     optional boolean async, //格式为布尔值,默认为true,表示请求是否为异步。
     optional string user, //表示用于认证的用户名,默认为空字符串。
     optional string password //表示用于认证的密码,默认为空字符串。
    );

    4、send()
    send方法用于实际发出HTTP请求。如果不带参数,就表示HTTP请求只包含头信息,也就是只有一个URL,典型例子就是GET请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是POST请求。
    所有XMLHttpRequest的监听事件,都必须在send()方法调用之前设定。
    5、setRequestHeader()
    setRequestHeader方法用于设置HTTP头信息。该方法必须在open()之后、send()之前调用。如果该方法多次调用,设定同一个字段,则每一次调用的值会被合并成一个单一的值发送。

    //指定请求的type为json格式
    xhr.setRequestHeader("Content-type", "application/json");
    //除此之外, 还可以设置其他的请求头
    xhr.setRequestHeader('x-requested-with', '123456');

    6、overrideMimeType()
    overrideMimeType方法用于强制指定response的MIME类型,即强制修改response的Content-Type。

    xhr.overrideMimeType("text/xml; charset = utf-8");
    xhr.send();

    四、XMLHttpRequest实例的事件
    1、onreadystatechange事件
    onreadystatechange事件回调方法在readystate状态改变时触发,默认会传入Event实例。在一个收到响应的ajax请求周期中,会触发4次onreadystatechange事件。
    2、onloadstart事件
    onloadstart事件回调方法在ajax请求发送之前触发,触发时机在readyState==1状态之后,readyState==2状态之前。onloadstart方法中默认将传入一个ProgressEvent事件进度对象。
    3、onprogress事件
    onprogress事件回调方法在readyState==3状态时开始触发,默认传入ProgressEvent对象。有兼容性问题,适用于IE10+及其他现代浏览器。

    //跟踪上传进度
    xhr.upload.onprogress = function(e){
      var percent = 100 * e.loaded / e.total;
      console.log('upload: ' + precent + '%');
    }

    4、onerror事件
    onerror事件回调方法在ajax请求出错后执行,通常只在网络出现问题时或者ERR_CONNECTION_RESET时触发(如果请求返回的是407状态码,chrome下也会触发onerror)。
    5、onabort事件
    用来终止已经发出的HTTP请求。取消后, readyState状态将被设置为0(UNSENT)。
    6、onload事件
    onload事件回调方法在ajax请求成功后(readyState==4状态后)触发。

    7、onloadend事件
    onloadend事件回调方法在ajax请求完成后(readyState==4状态后或者readyState==2状态后)触发,方法中默认传入一个ProgressEvent事件进度对象。

  • 相关阅读:
    IOS 模块并且发布到NPM
    处理npm publish报错问题
    IOS 应用发布流程
    《温故而知新》JAVA基础八
    Beta冲刺 (5/7)
    Beta冲刺 (4/7)
    Beta冲刺 (3/7)
    Beta冲刺 (2/7)
    软件测试(团队)
    福大软工 · BETA 版冲刺前准备(团队)
  • 原文地址:https://www.cnblogs.com/camille666/p/js_xmlhttprequest_obj.html
Copyright © 2020-2023  润新知