请问：什么是ajax?

Ajax全称Asynchronous javascript and xml（异步 JavaScript 和 XML）的简写，是指围绕【由js向服务器发起http请求】这个功能而开发的一套完整的做法

Ajax 其实就是浏览器与服务器之间的一种异步通信方式

ajax 的工作原理

概述： Ajax模块在处理网络请求时包括以下四个步骤(即我们所称的获取数据原生四步走)：

1.创建xhr对象
2.构建xhr的属性和方法
3.通过xhr对象发送HTTP请求

4.通过xhr对象的方法接收服务器回传的数据

 `  let xhr = new XMLHttpRequest;

    xhr.open('get','http://localhost:8888/qq?q=123&e=244',false)

    xhr.onreadystatechange = function(){
    
    if(xhr.readyState == 4 && xhr.status == 200)
   
   { console.log(xhr.response)
   
   }

   }

   xhr.send('12')  `

Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据

XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式

XML 现在已经不怎么用了，现在比较常用的是 JSON

使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

补充：Ajax可以发出同步请求(只能按顺序一步一步一个一个执行)，也可以发出异步请求(可以多个任务同时进行，互不干扰)，但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”

xhr对象的日常属性和方法

在Ajax规则中，“请求”从创建到被发送需要至少经历如下几个步骤：

        1.通过XMLHttpRequest类创建xhr对象

        2.为xhr对象添加属性与回调方法

        3.令xhr对象执行open()方法，指明请求被发往某处

        4.令xhr对象执行send()方法，发出请求

说明：XMLHttpRequest对象用来在【浏览器】与【服务器】之间传递数据，通俗上来说将此对象成为request请求对象、请求对象或请求

1.onreadystatechange属性：

描述：

onreadystatechange属性指向一个回调函数。当页面的加载状态发生改变时，readyState属性就会跟随发生变化，而这时onreadystatechange属性所对应的回调函数就会自动被调用

语法：

xhr.onreadystatechange = function(){};

注意：

onreadystatechange事件也可以配合addEventListener使用，但是IE6~IE8不支持addEventListener，再者为了兼容性，onreadystatechange中不使用this，而是直接使用xhr

xhr.addEventListener('readystatechange', () => {}, fasle);

2.readyState属性：

描述：

一个只读属性，用一个整数和对应的常量来表示XMLHttpRequest请求当前所处的状态，一般会在onreadystatechange事件的回调函数中，通过判断readyState属性的值，进而执行不同状态对应的函数

属性值：

    0 对应常量 unsnet 表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用

    1 对应常量opened 表示open()方法还没有被调用，仍然可以使用setRequestHeader()设定HTTP请求头

    2 对应常量 headers_received 表示send()方法已经执行并且头信息和状态码已经收到  

   3 对应常量 loading 表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息

    4 对应常量 done 表示服务器数据已经完全接收，或者本次接收已经失败了

语法：

xhr.onreadystatechange = function() {

if(xhr.readyState == n) {

//执行对应的函数

}

3.status属性

描述：

表示本次请求所得到的HTTP状态码是一个整数

语法：

if(xhr.readyState == n) {

if(xhr.status == 200) {

//通信成功

}

说明：

a.本属性是只读属性

b.本属性有以下可能值

200 ，OK 访问正常

301 Moved Permanently 永久移动

302 Moved temporarily 暂时移动

304 Not Modified 未修改

307 Temporary Redirect 暂时重定向

401 Unauthorized 未授权

403 Forbidden  禁止访问

404 Not Found 未发现指定网址

500 Internal Server Error 服务器发生错误

补充：一般来说认为200就是通信成功的标志

4.statusText属性

描述：

表示服务器发送的状态提示，是一个只读字符串

语法：

xhr.statusText

说明：

不同于status属性，该属性返回状态码所对应的状态信息，比如 OK

5.responseText属性

描述：

返回从服务器接收到的字符串内容，该属性为只读。如果本次请求没有成功或者数据不完整，该属性就会等于null；如果服务器返回的数据格式是JSON，就可以使用responseText属性来进行数据解析

语法：

xhr.responseText

6.open()方法

描述：

表示要将请求发往某处，只是设置而不是真的发送

语法：

xhr.open('请求类型','url地址','是否异步');

说明：

    第一个参数是用get/post请求

    第二个参数是用来设置请求发送到的url地址

    第三个参数是布尔值用来设置是否异步请求，默认false表示同步

补充：

    目前我们的页面都采用localhost方式在本地主机上直接访问，因此url直接写出php文件的相对路径即可

    而如果通过其他方式打开可能会引起js跨域问题，就会报错

7.setRequestHeader()方法

描述：

用于设置HTTP请求头信息

语法：

xhr.setRequestHeader("key",'value');

说明：

本方法必须在open()之后、send()之前被调用

本方法用来设置在请求发送时，一并被发送出的一些补充信息

  `xhr.setRequestHeader('content-type',application/json)`

补充：

请求头content-type是用来告诉后端前端请求体中的内容格式的，针对的是post

ajax