认识Ajax

1、认识Ajax

// 涉及到 AJAX 操作的页面“不能”使用文件协议访问（文件的方式访问）
// AJAX 是一套 API 核心提供的类型：XMLHttpRequest
// 1. 安装浏览器（用户代理）
//  xhr 就类似于浏览器的作用（发送请求接收响应）
var xhr = new XMLHttpRequest()

// 如果需要补货第一个状态的变化，需要注意代码执行顺序的问题（不要出现来不及的情况）
// xhr.onreadystatechange = function () {
//   // 这个事件并不是只在响应时触发，状态改变就触发
//   // console.log(1)
//   console.log(this.readyState)
// }

// 2. 打开浏览器 输入网址
xhr.open('GET', 'http://day-11.io/time.php')

// 3. 敲回车键 开始请求
xhr.send()

// 4. 等待响应
// 因为客户端永远不知道服务端何时才能返回我们需要的响应
// 所以 AJAX API 采用事件的机制（通知的感觉）
xhr.onreadystatechange = function () {
  // 这个事件并不是只在响应时触发，XHR 状态改变就触发
  // console.log(1)
  if (this.readyState !== 4) return
  // 获取响应的内容（响应体）
  console.log(this.responseText)
}

View Code

2、了解readyState

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象

xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接

xhr.send()

xhr.addEventListener('readystatechange', function () {
  switch (this.readyState) {
    case 2:
      // => 2
      // 已经接受到了响应报文的响应头

      // 可以拿到头
      // console.log(this.getAllResponseHeaders())
      console.log(this.getResponseHeader('server'))
      // 但是还没有拿到体
      console.log(this.responseText)
      break

    case 3:
      // => 3
      // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
      // 在这里处理响应体不保险（不可靠）
      console.log(this.responseText)
      break

    case 4:
      // => 4
      // 一切 OK （整个响应报文已经完整下载下来了）
      console.log(this.responseText)
      break
  }
})

View Code

3、遵循HTTP协议

var xhr = new XMLHttpRequest()

xhr.open('POST', '/add.php') // 设置请求行

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 格式设置请求体

View Code

4、post发送请求

// 找一个合适的时机，做一件合适的事情
var btn = document.getElementById('btn')
// 1. 获取界面上的元素 value
var txtUsername = document.getElementById('username')
var txtPassword = document.getElementById('password')
var loading = document.getElementById('loading')

btn.onclick = function () {
  loading.style.display = 'block'
  var username = txtUsername.value
  var password = txtPassword.value
  // 2. 通过 XHR 发送一个 POST 请求
  var xhr = new XMLHttpRequest()
  xhr.open('POST', 'login.php')
  // !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 ！！！
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // xhr.send('username=' + username + '&password=' + password)
  xhr.send(`username=${username}&password=${password}`)
  // 3. 根据服务端的反馈 作出界面提示
  xhr.onreadystatechange = function () {
    if (this.readyState !== 4) return
    console.log(this.responseText)
    loading.style.display = 'none'
  }
}

View Code

5、同步和异步

// console.time('abc')
// for (var i = 0; i < 100000000; i++) {}
// console.timeEnd('abc')

// console.log('begin request')
var xhrAsync = new XMLHttpRequest()
// open 方法的第三个参数是 async 可以传入一个布尔值，默认为 true
xhrAsync.open('GET', 'time.php', true)
console.time('async')
xhrAsync.send()
console.log(xhrAsync.responseText)
// console.log('end request')
console.timeEnd('async')

// 同步模式 ajax 操作会有楞等的情况
// 区别在于 send 方法会不会出现等待情况
// console.log('begin request')
var xhrSync = new XMLHttpRequest()
// open 方法的第三个参数是 async 可以传入一个布尔值，默认为 true
xhrSync.open('GET', 'time.php', false)
console.time('sync')
xhrSync.send()
console.log(xhrSync.responseText)
// console.log('end request')
console.timeEnd('sync')

View Code

6、获取XML文件数据

var xhr = new XMLHttpRequest()
xhr.open('GET', 'xml.php')
xhr.send()
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return
  // this.responseXML 专门用于获取服务端返回的 XML 数据，操作方式就是通过 DOM 的方式操作
  // 但是需要服务端响应头中的 Content-Type 必须是 application/xml
  console.log(this.responseXML.documentElement.children[0].innerHTML)
  console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])
}

View Code

7、onload

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

View Code