XHR和AJAX通信

  • 浏览器和服务器通过HTTP协议进行通信，用户输入网址回车或提交表单后，浏览器就会向服务器发起HTTP请求。1999年，微软允许JavaScript脚本发HTTP请求，2005年由谷歌发扬光大。
  • AJAX（Asynchronous JavaScript and XML ），AJAX就是通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，提取数据并将数据更新到对应的位置而不用刷新整个网页的一种技术。到今天，使用脚本来发起通信的技术就叫AJAX，是一个代名词。AJAX包括以下几个步骤：
    • 创建 XMLHttpRequest 实例
    • 发出 HTTP 请求
    • 接收服务器传回的数据
    • 更新网页数据
  • XHR是AJAX的主要接口，是一个构造函数，用new命令生成实例不需要传入参数，实例生成后可以使用一些方法和指定回调函数进行通信操作。

XHR的实例属性

  • XMLHttpRequest.readyState实例对象的状态
    • 0：实例已生成
    • 1：open()方法已调用，send()方法未调用，可使用setRequestHeader()设置请求头信息。
    • 2：send()方法调用，收到响应头信息和状态码
    • 3：开始下载服务器返回的数据
    • 4：已全部接收到服务器返回的数据或接收失败。
  • XMLHttpRequest.onreadystatechange
    属性指向一个函数，当readystate变化时执行该属性。
  • XMLHttpRequest.response
    服务器返回的数据体，可以是任何格式，responseType可以指定其格式
  • XMLHttpRequest.responseType
    表示服务器返回的数据格式，在send()之前，open之后设置
  • XMLHttpRequest.responseText
    属性返回从服务器接收到的字符串
  • XMLHttpRequest.responseXML
  • XMLHttpRequest.responseURL
  • XMLHttpRequest.status，XMLHttpRequest.statusText
    status是状态码，statusText是服务器发送的状态提示，比如"OK"或者"NOT FOUND"
  • XMLHttpRequest.timeout，XMLHttpRequestEventTarget.ontimeout

XHR实例方法

介绍两个主要的

  • open()
    初始化XHR实例对象，共接受五个参数。
    • method 请求动词如GET,POST,PUT,DELETE等
    • URL 请求发送的目标URL
    • async 默认为true表示异步，false同步
    • User
    • Password
  • send()
    用于发出实际的请求，GET请求没有参数参数默认为null，POST请求需要包含数据。