ajax

ajax是什么

AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

那异步？异步请求是什么

可以做一个例子：

领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作

ajax的异步请求就是类似上面这种例子

浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作

如何使用

分三步

创建XMLHttpRequest的实例对象
使用实例与服务器创建连接
给服务器发送所需的数据
绑定onreadystatechange事件监听通信状态，并且根据收到的服务器端数据更改操作网页dom

创建一个XMLHttpRequest对象

通过一个XMLHttpRequest()构造函数创建一个实例对象

const xhr = new XMLHttpRequest();

与服务器创建连接

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

xhr.open(method, url, [async][, user][, password])

参数说明：

method：表示当前的请求方式，常见的有GET、POST
url：服务端地址
async：布尔值，表示是否异步执行操作，默认为true
user: 可选的用户名用于认证用途；默认为`null
password: 可选的密码用于认证用途，默认为`null

给服务端发送数据

通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端

xhr.send([body])

body: 在 XHR 请求中要发送的数据体，如果不传递数据则为 null

如果使用GET请求发送数据的时候，需要注意如下：

将请求数据添加到open()方法中的url地址中
发送请求数据中的send()方法中参数设置为null（就是啥也不写）

注册onreadystatechange 事件

我们发送请求肯定是要根据请求结果来干一些事情，但我们要怎么样知道请求什么时候返回数据，并且在合适的时刻对dom进行操作？
只要 readyState属性值一变化，就会触发一次 readystatechange 事件
这里就涉及到onreadystatechange 的三个属性
- onreadystatechange：这是一个函数，每当 readyState 属性改变时，就会调用该函数
- readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  - 0: 请求未初始化，open()方法未被调用
  - 1: 服务器连接已建立，send()方法未被调用
  - 2: 请求已接收，send()方法已经被调用，响应头和响应状态已经返回
  - 3: 请求处理中，响应体下载中；responseText已经获取部分数据
  - 4: 请求已完成，且响应已就绪（就是数据已经发送回来），整个请求完毕
- status:此次请求返回的状态
  - 200: 请求成功，一切正常
  - 404: 未找到页面

举个例子

如下

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息：" + request.status)
        }
    }
}

当然，我觉得实际使用应该是要封装一下ajax！！！

ajax的基本使用和介绍