★ Ajax

Ajax 一图解所有

Ajax 是什么

• Asynchronous JavaScript And XML 异步的 JavaScript 和 XML
• 它是一种异步请求数据的 web 开发技术，不是新的开发语言而是一种使用现有标准的新方法
• 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页的内容

---

Ajax 的使用

• 1.创建Ajax核心对象XMLHttpRequest

let xhr = null
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
} else { // IE6, IE5 
    xhr = new ActiveXObject("Microsoft.XMLHTTP")
}

• 2.向服务器发送请求

/*
 * method: 请求的类型 GET POST 等
 * url: 文件在服务器上的位置 
 * async: 表示要不要执行异步操作
 */
xhr.open(method, url, async) // 初始化一个请求
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') // 设置 http 请求头信息
// 'Content-type', 'application/x-www-form-urlencoded' 表示客户端提交给服务器的文本内容的编码方式是 url 编码
xhr.send(string) // 发送请求 string 应用于 post 请求发送数据

• 3. 服务器响应数据：分同步异步两种情况
  • 同步处理

  xhr.open('GET', 'info.txt', false)
  xhr.send()
  document.getElementById('app').innerHTML = xhr.responseText
  

  • 异步处理

  xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
          document.getElementById('app').innerHTML = xhr.responseText
      }
  }
  

readyState

• 它是 XMLHttpRequest 对象的一个属性，用来标识当前的状态，0-5
  • 0: 未初始化，尚未调用 xhr.open() 方法
  • 1: 启动，已经调用 open 方法但是尚未调用 send 方法
  • 2: 发送，已经调用 send 方法但是尚未接收到响应
  • 3: 接受，已经接收到部分响应数据
  • 4: 完成，已经结束到全部响应数据，并且可以在客户端使用

status

• HTTP 状态码 ( status ) 由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP 状态码共分为5种类型：
  • 1xx: 信息，服务器收到请求，需要请求者继续执行操作
  • 2xx: 成功，操作被成功接受并处理
  • 3xx: 重定向，需要进一步操作以完成请求
  • 4xx: 客户端错误，请求包含语法错误或无法完成请求
  • 5xx: 服务器错误，服务器在处理请求的过程中发生了错误

常见状态码

• 200 表示从客户端发来的请求在服务器端被正常处理了。
• 204 表示请求处理成功，但没有资源返回。
• 301 表示永久性重定向。该状态码表示请求的资源已被分配了新的 URI，以后应使用资源现在所指的 URI。
• 302 表示临时性重定向。
• 304 表示客户端发送附带条件的请求时（ 指采用 GET 方法的请求报文中包含 if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since 任一个首部 ）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回 304Modified（ 服务器端资源未改变，可直接使用客户端未过期的缓存 ）
• 400 表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
• 401 表示未授权（ Unauthorized )，当前请求需要用户验证
• 403 表示对请求资源的访问被服务器拒绝了
• 404 表示服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
• 500 表示服务器端在执行请求时发生了错误。也有可能是 Web 应用存在的 bug 或某些临时的故障。
• 503 表示服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。