01-XMLHttpRequest

XMLHttpRequest

构造方法

没有任何参数，只是生成了一个实例

实例属性

状态

属性名	描述
XMLHttpRequest.readyState	返回一个整数，表示实例对象的状态；0=实例生成但未调用open()方法、1=open()方法调用但未调用send()方法，可使用setRequestHeader()方法设置请求头信息、2=send()方法已经调用并且收到了响应头、3=正在接收传来的响应体，若responseType属性等于text或者空字符串说明responseText属性就会包含已经收到的部分信息、4=响应体全部接收完毕或接收失败
XMLHttpRequest.timeout	设置请求超时时间，以毫秒为单位

响应行

属性名	描述
XMLHttpRequest.status	返回响应状态码，请求发出之前是0
XMLHttpRequest.statusText	返回响应状态信息

响应体

属性名	描述
XMLHttpRequest.response	返回成功的响应体，若失败或成功但是数据不完整该属性值为null，但是若responseType属性等于text或者空字符串，在请求未结束前包含部分请求体，是只读属性
XMLHttpRequest.responseType	是一个字符串，表示服务器返回的数据类型，在调用open()方法后send()方法之前可设置这个属性告诉服务器返回指定数据类型；空字符串和text=字符串、arraybuffer=ArrayBuffer对象二进制数组、blob=Blob对象二进制对象、document=Document对象文档对象、json=JSON对象
XMLHttpRequest.responseText	返回服务器接收的字符串，若responseType属性等于text或者空字符串，在请求未结束前包含部分请求体，是只读属性
XMLHttpRequest.responseXML	返回服务器接收的HTML或XML，若不能被解析成XML或 HTML则为null（部分数据不能被正确解析所以也为null），是只读属性
XMLHttpRequest.responseURL	返回返回响应的服务器URL，这个属性不一定和请求的服务器URL一致，因为请求可以在服务端跳转，此外还会将URL中的锚点剔除
XMLHttpRequest.withCredentials	布尔值，表示跨域请求时是否发送请求域的Cookie，默认为false

监听函数

所有XMLHttpRequest的监听事件绑定，都必须在send()方法调用之前

属性名	描述
XMLHttpRequest.onreadystatechange	readystatechange事件的监听函数，readyState属性变化时触发
XMLHttpRequestEventTarget.ontimeout	timeout事件的监听函数，请求超时触发
XMLHttpRequest.upload	用AJAX上传文件时，该属性是一个拥有一系列监控进度事件的对象，可监控上传进度和状态
XMLHttpRequest.onprogress	progress事件的监听函数，正在发送和加载数据持续触发
XMLHttpRequest.onabort	abort事件的监听函数，用户主动触发（即调用调用abort()方法），因为错误中止不会触发
XMLHttpRequest.onerror	error事件的监听函数，因为错误导致中止时触发
XMLHttpRequest.onload	load事件的监听函数，请求成功时触发
XMLHttpRequest.onloadstart	loadstart事件的监听函数，请求发出时触发
XMLHttpRequest.onloadend	loadend事件的监听函数，请求完成时触发，不管成功或失败

实例方法

方法名	描述
XMLHttpRequest.open(method,URI,[flag,user,passwd])	设置请求行（method需要大写的请求方法字符串，URI是相对路径时是相对与当前页面的URL）、是否是异步请求（默认false），身份认证信息（默认空字符串，一般用不着）
XMLHttpRequest.send(data)	设置发送的请求体并开始发送请求，可以是字符串、FormData、ArrayBufferView和Blob
XMLHttpRequest.abort()	终止发出的请求，readyState变为4，status变为0
XMLHttpRequest.setRequestHeader(key,value)	设置请求头信息
XMLHttpRequest.overrideMimeType(MIME)	覆盖服务器返回的MIME类型，不过最好还是使用responseType告诉服务器要使用的什么类型，若服务器无法返回指定类型时才会使用该方法进行覆盖；必须在send()方法之前调用
XMLHttpRequest.getResponseHeader(lab)	获取指定响应头，若不存在返回null，若有多个相同的头会将多个头的值连成字符串并用逗号空格分隔
XMLHttpRequest.getAllResponseHeaders()	获取所有响应头

AJAX示例

步骤：

1. 创建XMLHttpRequest实例
2. 发出HTTP请求
3. 接收服务器传回数据
4. 更新网页数据

let xhr = new XMLHttpRequest(); //创建XMLHttpRequest实例
xhr.onreadystatechange=function(){  //设置AJAX状态监听函数
  if(xhr.readyState === 4){ //若AJAX处于结束状态
    if(xhr.status === 200){ //若响应状态码是200
      console.log(xhr.response);  //打印请求体数据
    }else{
      console.log(xhr.statusText);  //否则打印请求状态信息
    }
  }
}
xhr.open("GET","/path",true); //设置请求头
xhr.send(); //发出请求，未设置请求体