【前端学习】ajax

基础
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。
一、发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

（感觉可以封装一个同步ajax库）
1、open与send方法
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

防止缓存：增加随机参数防止命中缓存，或者添加时间戳也可以

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

2、setRequestHeader(header,value)
header: 规定头的名称
value: 规定头的值
3、关于async参数
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

二、服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

xmlhttp.responseXML;
xmlhttp.responsetText;

三、onreadystatechange事件

四、XMLHttpRequest
尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP）
1、构造函数
XMLHttpRequest()
2、属性
2.1 XMLHttpRequest.onreadystatechange
当 readyState 的值改变的时候，callback 函数会被调用。
2.2 XMLHttpRequest.readyState 只读
返回一个无符号短整型（unsigned short）数字，代表请求的状态码
2.3 XMLHttpRequest.response 只读
返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含整个响应实体（response entity body）。
2.4 XMLHttpRequest.responseText 只读
返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。
2.5 XMLHttpRequest.responseType
XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
2.6 XMLHttpRequest.responseURL 只读
返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。
只读属性XMLHttpRequest.responseURL返回响应的序列化URL，如果URL为空则返回空字符串。如果URL有锚点，则位于URL # 后面的内容会被删除。如果URL有重定向， responseURL 的值会是经过多次重定向后的最终 URL 。
2.7 XMLHttpRequest.status 只读
返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。
2.8 XMLHttpRequest.statusText 只读
返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。与 XMLHTTPRequest.status 不同的是，它包含完整的响应状态文本（例如，“200 OK”）。
2.9 XMLHttpRequest.timeout
一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。
2.10 XMLHttpRequestEventTarget.ontimeout
当请求超时调用的 event handler。
2.11 XMLHttpRequest.upload 只读
XMLHttpRequestUpload，代表上传进度。
2.12 XMLHttpRequest.withCredentials
一个布尔值 (en-US)，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。
3、方法
3.1 XMLHttpRequest.abort()
如果请求已被发出，则立刻中止请求。
3.2 XMLHttpRequest.getAllResponseHeaders()
以字符串的形式返回所有用 CRLF分隔的响应头，如果没有收到响应，则返回 null。

CRLF 回车符（CR）和换行符（LF）是文本文件用于标记换行的控制字符（control
characters）或字节码（bytecode）。
CR = Carriage Return，回车符号（\r，十六进制 ascii码为0x0D，十进制 ascii 码为13），用于将鼠标移动到行首，并不前进至下一行。
LF = Line Feed，换行符号（ \n,十六进制 ascii 码为 0x0A，十进制 ascii 码为10）。
紧邻的 CR 和 LF（组成 CRLF，\r\n，或十六进制 0x0D0A）将鼠标移动到下一行行首。（Windows 操作系统默认的文本换行符为 CRLF；Linux 以及 macOS 系统默认使用
LF，早期的 mac os 系统使用 CR 换行。）

3.3 XMLHttpRequest.getResponseHeader()
返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。
3.4 XMLHttpRequest.open()
初始化一个请求。该方法只能在 JavaScript 代码中使用，若要在 native code 中初始化请求，请使用 openRequest()。

XMLHttpRequest.open(method, url,[ async, [user, [password]]]);

3.5 XMLHttpRequest.overrideMimeType()
覆写由服务器返回的 MIME 类型。

如果服务器没有指定一个Content-Type 头, XMLHttpRequest 默认MIME类型为"text/xml". 如果接受的数据不是有效的XML，将会出现格”格式不正确“的错误。你能够通过调用 overrideMimeType() 指定各种类型来避免这种情况。

3.6 XMLHttpRequest.send()
方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。
3.7 XMLHttpRequest.setRequestHeader()
是设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。
如果没有设置 Accept 属性，则此发送出send() 的值为此属性的默认值*/* 。
安全起见，有些请求头的值只能由user agent设置

4、事件
4.1 abort
当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。
也可以使用 onabort 属性。
4.2 error
当 request 遭遇错误时触发。
也可以使用 onerror 属性
4.3 loadend
当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。
也可以使用 onloadend 属性。
4.4 loadstart
接收到响应数据时触发。
也可以使用 onloadstart 属性。
4.5 progress
当请求接收到更多数据时，周期性地触发。
也可以使用 onprogress 属性。
4.6 timeout
在预设时间内没有接收到响应时触发。
也可以使用 ontimeout 属性。

使用XMLHttpRequest