AJAX 的优势操作流程及使用

AJAX 的优势：

• 不需要插件的⽀持，原⽣ js 就可以使⽤

• ⽤户体验好（不需要刷新⻚⾯就可以更新数据）

• 减轻服务端和带宽的负担

• 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索

AJAX 的操作流程

首先通过PHP页面将数据库中的数据取出 取出后转成json格式的字符串，后利用ajax把字符串返还给前台 再利用json.parse解析通过循环添加到页面上 那么反之，前端的数据可以利用ajax提交到后台 但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上 最后再由PHP将数据插入到数据库中

AJAX 的使用：

1. 在 js 中有内置的构造函数来创建 ajax 对象

创建 ajax 对象以后，我们就使⽤ ajax 对象的⽅法去发送请求和接受响应

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。 XMLHttpRequest 对象方法描述

1.创建⼀个 ajax 对象

// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

上⾯就有了⼀个 ajax 对象 我们就可以使⽤这个 xhr 对象来发送 ajax 请求了

2.配置链接信息

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', './data.php')

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

3.发送请求

//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()

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

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

  #### 5.AJAX 状态码

  ajax 状态码 - xhr.readyState

是用来表示一个 ajax 请求的全部过程中的某一个状态

readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行

readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后

readyState === 2 : 表示 send 方法已经执行完成

readyState === 3 : 表示正在解析响应内容

readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

这个时候我们就会发现，当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据

所以，配合 http 状态码为 200 ~ 299

一个 ajax 对象中有一个成员叫做 xhr.status 这个成员就是记录本次请求的 http 状态码的

两个条件都满足的时候，才是本次请求正常完成



使用 ajax 发送请求时携带参数
我们使用 ajax 发送请求也是可以携带参数的
参数就是和后台交互的时候给他的一些信息
但是携带参数 get 和 post两个方式还是有区别的