ajax基础

使用 AJAX 的过程可以类比平常我们访问网页过程:

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
 xhr.send(null)  
 // 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
 xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
 if (this.readyState === 4) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
 }

=============================================================

// onload 是 HTML5 中提供的 XMLHttpRequest v2.0 定义的
xhr.onload = function () {
  console.log(this.readyState)
  console.log(this.responseText)

设置一个请求头:

  xhr.setRequestHeader('Foo', 'Bar') ;

   // 一旦你的请求体是 urlencoded 格式的内容，一定要设置请求头中 Content-Type 'application/x-www-form-urlencoded'
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

xhr.send('key1=value1&key2=value2') // 以 urlencoded 格式设置请求体*/

readyState:
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被
触发多次，所以我们有必要了解每一个状态值代表的含义：

image.png
image.png