09-Ajax
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术)
它用于网页的数据动态提交，AJAX可以做到不重新加载网页的情况下，与服务端交换数据并自动更新网页。它本质是让网页的服务器进行异步数据操作。
异步和同步的区别
- 同步：当js代码执行到Ajax代码时，页面其它代码被搁置，当执行完Ajax的代码时，才去处理后面的代码。
- 异步：当js代码执行到Ajax代码时，页面继续执行后续其它代码。
Ajax处理GET请求
GET请求步骤
- 创建Ajax对象
- 创建请求事件的监听
- 初始化url地址格式
- 设置open('get',url,true);
- 发送数据send(null);
Get请求示例
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 300px;
margin: 100px auto;
border: 3px solid red;
text-align: center;
}
input{
margin-top: 30px;
}
p{
margin-top: 10px;
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<div><form action="./02.php" method="get">
账号<input type="text" name="text" id="te">
<p class="tips"></p>
<br>
密码<input type="password" name="password" id="pass">
<br>
<input type="submit" class="submit" value="提交">
</form></div>
<script>
let oSub = document.querySelector(".submit");
let oP = document.querySelector(".tips");
oSub.onclick = function () {
//1.创建Ajax对象
let xhr = new XMLHttpRequest();
//2.创建请求事件的监听,成功后获取服务器返回的数据
xhr.onreadystatechange = function () {
if(xhr.status==200 && xhr.readyState==4){
//输出服务端返回的数据
let data = xhr.responseText;//json字符串
let res = JSON.parse(data);//JSON字符串转换成对象
oP.innerHTML = res.text +"欢迎您";
}
}
//3.因为是get请求，发送给服务器的数据通过url发送，配置url地址
let text = document.getElementById("te").value;
let pass = document.getElementById("pass").value;
let url = "02.php?text="+text+"&password="+pass;
//4.设置open参数
xhr.open('get',url,true);
//5.send发送
xhr.send(null);
return false;//让页面不会跳转到服务器数据块
}
</script>
</body>
</html>
02.php文件
<?php
/*
1.Ajax的get请求
1.1 创建Ajax对象
1.2 创建请求事件的监听
1.3 初始化url地址格式
1.4 设置open('get',url,true);
1.5 发送数据send(null);
*/
echo json_encode($_GET);
然后，我们打开html文件，页面如下所示。
23.jpg
接着，我们输入账号和密码，点击提交后出现的页面如下，账户是服务端返回给我们的数据。
24.jpg
总结：通过get请求的方式只需按照步骤，一步步进行就OK，但是我们得直到GET请求的弊端，它并不适合用于表单数据的提交，因为它是通过url头提交用户数据的，这样很不安全。
Ajax处理POST请求
POST请求步骤
- 创建Ajax对象
- 创建请求事件的监听
- 设置open('get',url,true);
- 将发送的数据处理成字符串str
- 发送数据send(str);
POST请求示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 500px;
height: 300px;
margin: 100px auto;
border: 3px solid red;
text-align: center;
}
input{
margin-top: 30px;
}
p{
margin-top: 10px;
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<div><form action="./03.php" method="post">
账号<input type="text" name="text" id="te">
<p class="tips"></p>
<br>
密码<input type="password" name="password" id="pass">
<br>
<input type="submit" class="submit" value="提交">
</form></div>
<script>
let oSub = document.querySelector(".submit");
let oP = document.querySelector(".tips");
oSub.onclick = function () {
//1.创建Ajax对象
let xhr = new XMLHttpRequest();
//2.创建请求事件的监听,成功后获取服务器返回的数据
xhr.onreadystatechange = function () {
if(xhr.status==200 && xhr.readyState==4){
//输出服务端返回的数据
let data = xhr.responseText;//json字符串
console.log(data);
let res = JSON.parse(data);//JSON字符串转换成对象
oP.innerHTML = res.text +"欢迎您";
}
}
//3.因为是post请求，无需配置url地址，直接拼接数据通过send发送
let text = document.getElementById("te").value;
let pass = document.getElementById("pass").value;
xhr.open('post',"./03.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send("text="+text+"&password="+pass);
return false;//让页面不会跳转到服务器数据块
}
</script>
</body>
</html>
03.php文件
<?php
/*
1.Ajax的post请求
1.1 创建Ajax对象
1.2 创建请求事件的监听
1.3 设置open('get',url,true);
1.4 将发送的数据处理成字符串str
1.5 发送数据send(str);
*/
echo json_encode($_POST);
然后我们打开index.html文件，如下如所示
23.jpg
接着输入账户和密码，点击提交。出现了欢迎您字样，这个是服务端返回的数据
24.jpg
post请求是表单提交最常用的，它不是通过url请求头提交数据，更加的安全和实用。
