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','是你');
最后效果如图所示: