AJAX

• ajax 全名 async javascript and XML
• 是前后台交互的能力
• 也就是我们客户端给服务端发送消息的工具，以及接受响应的工具
• 是一个 默认异步 执行机制的功能
• XML与JSON：都是可以跨平台、跨语言的一种数据格式。
• JSON的格式：
  • [] : 写在[]中的字符串，必须使用双引号
    1. 原生： ['a',"b"]
    2. JSON： ["a","b"]
  • {} : key 必须加双引号，value如果是字符串，必须加双引号
    1. 原生：{ name : '张三'} {name : "张三"} { 'name': '张三'} { "name": "张三"}
    2. JSON: { "name" : "张三" }
  • 在JSON的值中：不能出现 undefined/NaN/function/Infinity

• 通过异步与服务器通信，将用户请求的数据通过回调函数返回，并利用javascript将数据动态的添加到页面中，且整个过程不需要重新加载整个页面就可以完成

AJAX 的优势

1. 异步与服务器通信
2. 不需要刷新页面就可以更新数据
3. 减少服务器负担，实现前后端负载平衡
4. 缺点： 搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到
5. 缺点：没有历史记录
6. 缺点：存在风险

AJAX 的使用

• 在 js 中有内置的构造函数来创建 ajax 对象
• 创建 ajax 对象以后，我们就使用 ajax 对象的方法去发送请求和接受响应

创建一个 ajax 对象

// 除IE6所有浏览器都支持的
const xhr = new XMLHttpRequest()

// IE6
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

// 兼容
let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Mricosoft.XMLHTTP');

• 上面就是有了一个 ajax 对象
• 我们就可以使用这个 xhr 对象来发送 ajax 请求了

配置链接信息

const xhr = new XMLHttpRequest()

// xhr 对象中的 open 方法是来配置请求信息的
// 第一个参数是本次请求的请求方式 get / post / put / ...
// 第二个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求方式', '请求地址', 是否异步)
xhr.open('get', './data.php')

• 上面的代码执行完毕以后，本次请求的基本配置信息就写完了

发送请求

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')

// 使用 xhr 对象中的 send 方法来发送请求
xhr.send()

• 上面代码是把配置好信息的 ajax 对象发送到服务端

一个基本的 ajax 请求

• 一个最基本的 ajax 请求就是上面三步
• 但是光有上面的三个步骤，我们确实能把请求发送的到服务端
• 如果服务端正常的话，响应也能回到客户端
• 但是我们拿不到响应
• 如果想拿到响应，我们有两个前提条件
  1. 本次 HTTP 请求是成功的，也就是我们之前说的 http 状态码为 200 ~ 299
  2. ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段