1、什么是AJAX?
AJAX（Asynchronous JavaScript And XML），（异步 JavaScript 和 XML），是指一种创建交互式（前后端交互）网页应用的网页开发技术。
简单来说，AJAX 是一种在无需重新加载整个网页的情况下，能够更新网页中的一部分的技术，前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2、AJAX核心对象
AJAX的核心对象时XMLHttpResquest。是AJAX的异步操作，和服务器 交互主要依赖该对象。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
3、理解AJAX的核心对象XMLHttpRequest
以前浏览器负责显示页面，和后端交互。两件事情同一时刻只能做一件，没法同时进行。这样会让用户感觉不好(友好性不好)，比如：当浏览器发送请求时，就没法显示内容，这时浏览器中是空白，给用户的感觉不好。
使用XMLHttpRequest对象，可以把浏览器解脱出来，可以让浏览器只负责显示，而完成请求的事情由XMLHttpRequest对象负责。这样两者各负其责，效率更高，效果更好，用户体验很好，用户永远不会看到浏览器空白
4、AJAX与后端交互的步骤
-
创建XMLHttpRequest对象
例： let xhr = new XMLHttpRequet() -
使用open方法
设置请求的数据（请求方式，请求的地址，是否异步）
xhr.open(请求方式，请求的地址，是否异步) -
使用onreadystatechange事件属性
设置回调函数，当后端响应回来后，前端要做什么事情
xhr.onreadystatechange = function(){
// xhr.readyState==4 表示请求响应的过程完毕了
// xhr.status==200：表示后端执行没有问题。
if(xhr.readyState==4 && xhr.status==200){
// 5、接收响应
xhr.responseText;
}
}
-
使用send()函数
xhr.send(); -
使用 responseText属性接收后端发来的响应内容
5、XMLHttpRequest对象的属性和方法
一、属性：
1）、事件属性： onreadystatechange
此事件的触发时机，是后端响应时触发。它会被触发三次。进一步说：当readyState属性的值发生改变时，触发；具体指的是：1变成2触发一次，2变成3触发一次，3变成4触发一次
2）、readyState属性：
前后端交互过程中，状态的变化，即进行到了哪一步。
- 0：当XMLHttpRequest创建完毕后的初始值
- 1：当调用了open函数后， 准备好了，表示在open函数调用后，到 send函数执行前
- 2：后端接收到了响应
- 3：后端（服务器端）处理中
- 4：后端处理完毕，即：前后端的交互完毕
3）、status属性：
该属性描述的是HTTP的响应状态码
200：后端执行代码的成功。
500：后端执行代码错误（服务器端出错）
404：找不到页面（如php文件的文件名或者路径写错了）
4）、responseText属性：
该属性，表示后端响应的内容，在php中，就是echo后面写的内容
二、方法：
1）、open(请求方式，请求地址，是否异步)
参数：
请求方式：常见的是get和post，当然，还有head …………；也就是浏览器发送请求时 form标签里的method属性的值
请求地址：后端处理的程序文件名（地址），也就是浏览器发送请求时，form标签里 action属性的值。如果是get请求，那么，发给后端的数据，写在地址的后面，用问号隔开。
如： xxx.php?键1=值1&键2=值2&键3=值3
是否异步：true：表示异步，false：表示同步
2）、send(发送给后端的数据)
参数：
如果请求方式是get时，不用写这个参数
如果请求方式是post时，send函数里参数就是发送给后端的数据，这样会把数据放在请求体中。该参数的格式，也是键值对的方式，如：键1=值1&键2=值2&键3=值3
3）、setRequestHeader(“header”,“value”)
设置HTTP请求的（头）首部信息，可以向服务器传递参数，这个方法必须在send之前调用
参数：
头部的属性名（键）
属性值（值）
在发送post请求时，必须设置请求头为：
setRequestHeader(“content-type”,“application/x-www-form-urlencoded”)
为了大家更好理解，做了一个小demo
html代码：
<div id="box">
<input id="musictxt" type="text" placeholder="请输入你喜欢的音乐"><br>
<ul id="musicbox">
</ul>
</div>
css代码：
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 300px;
margin: 50px auto;
border: 1px solid #ccc;
}
ul {
list-style: none;
}
#musictxt {
width: 200px;
height: 35px;
border: 0;
border-bottom: 1px solid #000;
}
#musicbox {
width: 200px;
}
</style>
js代码：
<script>
$('musictxt').oninput = function () {
let xhr = new XMLHttpRequest()
xhr.open("get", "getMusic.php?name=" + this.value, true)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let arr = JSON.parse(xhr.responseText)
console.log(arr)
let htmlStr = ""
arr.forEach((item) => {
htmlStr += `<li>${item.musicname}</li>`
})
$("musicbox").innerHTML = htmlStr
}
}
xhr.send()
}
function $(str) {
return document.getElementById(str)
}
</script>
php代码（getMusic.php）
<?php
header("content-type:text/html;charset=utf-8");
$musicname=$_GET['name'];
$conn=mysqli_connect("localhost","root","root","mydb2001");
$sqlstr="select musicname from music where musicname like'%{$musicname}%'";
$result= mysqli_query($conn,$sqlstr);
mysqli_close($conn);
$arr = mysqli_fetch_all($result,MYSQLI_ASSOC);
echo json_encode($arr);
?>
再创建一个数据库
create table music(
id char(3) primary key,
musicname varchar(20) not null
)
insert into music value('001','你是我的眼');
insert into music value('002','你笑起来真好看');
insert into music value('003','达拉崩吧');
insert into music value('004','你瞒我瞒');
insert into music value('005','疯人院');
insert into music value('006','你的答案');
insert into music value('007','夏天的风');
insert into music value('008','是你');
最后效果如图所示：
