原生AJAXJS基础:原生 ajax: ajax 概述, ajax 底层原理, XHR对象, XHR 对象的属性、方法及

1. AJAX 概述

AJAX: Asynchronous JavaScript AND XM, 异步的 JS与 XML

1.1 简介

Google 在 2001 年, 为 Google 搜索添加了 Google Suggest 功能, 可以在用户浏览网页的同时, 从服务器端获取更新后的搜索建议, 命名为 AJAX

1.2. 目标

实现在无刷新, 无提交, 无跳转的情况下页面内容局部更新, 提高用户的浏览体验

1.3. 应用场景

搜索建议, 数据重要性判断, 在线股票, 在线聊天室, 异步加载分页数据......

1.4. 涉及的技术

AJAX 涉及到的技术: HTML, CSS, JS, DOM, HTTP, XML -> 属于纯客户端技术

1.5. 浏览器中发起请求的种类

同步请求:
- 浏览器请求后 -> 一片空白, 等待服务器响应 -> 刷新页面, 清空输入内容
  - 地址栏输入地址, 表单提交, 超链接, JS 跳转
异步请求:
- AJAX: 浏览器中有内容, 同时又发起请求处理响应 -> 页面中原有内容没有改变

1.6. 底层原理

在客户端浏览网页的同时, 浏览器底层使用 XMLHttpRequest 对象, 向服务器发起 HTTP 请求, 并接受服务器的响应消息 -> 浏览的同时服务器也在工作

2. AJAX 对象

2.1. AJAX 对象与属性

AJAX 对象: XHR 对象
- 作用: 向 Web 服务器发起异步请求并接收返回的响应消息( 数据 )
  - 整个过程程序员是不可见的, 调试错误只能靠监视请求和响应消息
- 构建 XHR 对象:
  - var XHR = new XMLHttpRequest()
    - W3C(chrome / firefox / safari / opera / IE9+): 标准对象 XMLHttpRequest
    - IE8-: ActiveXObject('Microsoft.XMLHTTP')
  - 考虑兼容时:
```
if (window.XMLHttpRequest) {
  var XHR = new XMLHttpRequest()
} else {
  var XHR = new ActiveXObject('Microsoft.XMLHTTP')
}
```
XHR 对象的常见属性及方法
- XHR 常见的属性成员:
  - readyState: 表示 XHR 对象的当前状态, 即请求 -> 响应过程进行到哪一步, 可取值 5 个, 只能依次递增, 不能回退, 自动改变不能手动赋值
    - 0: UNSENT, 请求尚未发送
    - 1: OPENED, XHR 对象已经打开到 Web 服务器连接
    - 2: HEADERS_RECEIVED, XHR 对象已经接收到响应消息起始行和头部
    - 3: LOADING, XHR 对象正在加载响应的主体
    - 4: DONE, XHR 对象已经接收完成响应消息
  - status: 初始值为 0, 服务器响应状态码, 只有 XHR.readyState 值为 2 后才有值
  - statusText: 初始值为 "", 响应消息中原因短句, 只有 XHR.readyState 值为 2 后才有值
  - responseText: 初始值为 "", 响应消息的主体内容, 当 XHR.readyState 值为 3 开始有值, 变为 4 后值开始稳定
  - responseXML: 初始值为 null, XML DOM 树对象, 响应消息的主体内容, XHR.readyState 值为 3 时有值
- XHR 对象的方法成员
  - open(method, url, isAsyn): 建立和服务器的连接
  - send(请求主体): 发送请求消息
    - GET: send(null)
    - POST: send('name=xxx&age=xxx')
  - setRequestHeader(name, value): 设置请求消息头部
  - getRequestHeader(name): 获取响应消息头部
  - getAllResponseHeaders(): 获取响应消息的所有头部
- XHR 对象的事件成员
  - onreadystatechange: XHR.readyState 属性值的每次改变都会触发该事件
    - readyState:
      - 0 -> 1: open()
      - 1 -> 2: send()
      - 2 -> 3: 自然
      - 3 -> 4: 自然

2.2. 状态改变规则

初始已建立与服务器的连接请求完成响应加载加载完成 ( 0 ) -------------------> ( 1 ) --------------------> ( 2 ) ----------------> ( 3 ) ------------> ( 4 )

UNSENT ↑ OPENED ↑ HEADERS_RECEIVED ↑ LOADING ↑ DONE 初始 open() send() 自然自然

2.3. 使用 XHR 对象发起异步请求步骤

创建 XHR 对象
- var XHR = new XMLHttpRequest()

绑定监听( 监听 readyState 状态改变 )事件

XHR.onreadystatechange = function () {
  if (XHR.readyState == 4 && SHR.status == 200) {
    XHR.responseText
  }
}

建立连接
- XHR.open('GET', 'login.php', true)
  - 传递参数时: XHR.open('GET', 'login.php?name=' + u + '&pwd=' + p, true)
在请求主体发出之前修改请求头部( 这步是非必须的 )
- XHR.setRequestHeader('ContentType', 'application/x-www-form-urlencoded')
发送请求
- XHR.send(null)

Ex:

使用 XHR 发起异步的 GET 请求

var XHR = new XMLHttpRequest()
XHR.onreadystatechage = function () {
  if (XHR.readyState == 4) {
    if (XHR.status == 200) {
      // 处理响应消息
      XHR.responseText
    } else {
      alert('响应完成但有问题')
    }
  }
}
// 建立连接
var testName = 'lcy'
XHR.open('GET', 'X.php?testName' + testName, true)
// 发送请求
XHR.send(null)

使用 XHR 发起异步的 POST 请求

var XHR = new XMLHttpRequest()
var testName = 'lcy'
XHR.onreadystatechange = function () {
  if (XHR.readyState  == 4) {
    if (XHR.status == 200) {
      // 处理响应消息
      XHR.responseText
    } else {
      alert('响应完成但有问题')
    }
  }
}
// 建立连接
XHR.open('POST', 'X.php', true)
// 发送请求
XHR.send('testName=' + testName)

3. 各种数据格式

3.1. 纯文本

3.2. 文本和网页

<div> <span>css 指南</span> </div>
<div> <span>JS 指南</span> </div>
<div> <span>H5 指南</span> </div>

3.3. XML

<books>
	<book>
		<name>css 指南</name>
	</book>
	<book>
   		<name>JS 指南</name>
    </book>
    <book>
    	<name>H5 指南</name>
    </book>
</books>

3.4. JavaScript

3.6. json

JSON 字符串格式, 作用: 描述数据
- JSON VS XML
- XML 是字符串格式描述数据, 麻烦 -> 重量级
- JSON 是字符串格式描述数据, 简单 -> 轻量级
JSON 字符串语法要求
1. 一个 JSON 字符串只能有且只有一个根
  - 根: [] / {}
2. JSON 中可以包含数字, Boolean, null, 字符串
  - 字符串必须用 "" 包裹
3. [] 数组可以包裹多个值, 使用逗号 , 分隔
4. {} 对象可以包裹多个键值对, 使用逗号 , 分隔, 键和值之间用冒号分隔, 键必须用双引号 "" 包裹
格式转换
- 将 JS 对象转化为 JSON 字符串
  - var resJSON = JSON.stringify(JS对象)
- 将 JSON 字符串转化为 JS 对象
  - var result = JSON.parse(JSON 字符串)