您的位置:首页 > 产品设计 > UI/UE

初识XMLHTTPRequest

2019-04-09 22:59 330 查看

提到Ajax,就不得不提

XMLHttpRequest
对象。它可以让我们从指定的URL中获取数据,而不必让整个页面刷新,也就是说可以只更新网页的局部。

文章目录

  • 常用属性
  • 常用方法
  • send()方法
  • 例子
  • 对象的构造

    构造函数:

    • XMLHttpRequest()
      :构造函数初始化一个 XMLHttpRequest 对象。必须在所有其他方法被调用前调用构造函数。

    例如:

    let xhr = new XMLHttpRequest();

    常用属性

    onreadystatechange

    这是一个回调函数,会在

    XMLHttpRequest
    readyState
    属性发生改变时触发
    readystatechange
    事件的时候被调用。

    readyState

    readyState
    属性代表了
    XMLHttpRequest
    对象当前所处的状态。不同的属性值代表了不同状态,如下

    状态 描述
    0
    UNSENT
    代理被创建,但尚未调用
    open
    方法
    1
    OPENED
    open
    方法已被调用
    2
    HEADERS_RECEVIED
    send
    方法已被调用,并且头部和状态已经可得
    3
    LOADING
    下载中,
    respoenseText
    属性已经包含部分数据
    4
    DONE
    下载操作已完成

    respoenseText

    返回一个

    DOMString
    ,该
    DOMString
    包含对请求的响应,如果请求未成功或尚未发送,则返回null。

    responseType

    是一个枚举类型的属性,返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串,它将使用默认的"text"类型。

    responseXML

    返回一个包含请求检索的HTML或XML的Document,如果请求未成功、尚未发送,或者检索的数据无法正确解析为XML或 HTML,则为null。

    status

    返回了

    XMLHttpRequest
    响应中的数字状态码。
    status
    的值是一个无符号短整型。在请求完成前,
    status
    的值为0。值得注意的是,如果
    XMLHttpRequest
    出错,浏览器返回的
    status
    也为0。

    常用方法

    open()方法

    初始化一个请求。

    let xhr = new XMLHttpRequest();xhr.open(method, url, async, user, password);
    

    参数

    • method
      :要使用的HTTP方法,如
      GET
      POST
      PUT
    • url
      :表示将要请求的URL
    • async
      :可选值,默认为
      true
      。表示要不要进行异步操作。如果值为false,则为同步,反之则为异步。
    • user
      :可选值。用于认证用途;默认为null
    • password
      :可选值。用于认证用途,默认为null。

    send()方法

    该方法用于发送HTTP请求。如果为异步请求,则此方法在发送完之后会立即返回,而若为同步,则会阻塞至响应到达后才会返回。

    XMLHttpRequest.send()
    方法接受一个可选的参数,其作为请求主体;如果请求方法是
    GET
    或者
    HEAD
    ,则应将请求主体设置为
    null

    例子

    let xhr = new XMLHttpRequest(); //构造XMLHttpRequest实例对象
    xhr.open('GET', '/', true); //初始化一个请求
    xhr.onreadystatechange = function(){
    if(XMLHttpRequest.DONE === xhr.readyState && xhr.status === 200){
    console.log(xhr.respoenseText);
    }
    }
    xhr.send(null); //发送Http请求
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: