对于Ajax,是在script标签内进行使用的。
最主要的代码只有以下几行:
// xhr就是浏览器的作用
var xhr = new XMLHttpRequest();
// 打开浏览器,输入网址或者后台处理文件
// ?后面传递参数
// 最后的布尔值决定是否异步操作,推荐true,否则会在send部分出现停留问题。默认也是true,可以不填
xhr.open('GET', 'time.php?id=564', true);
// 发送请求
// send里面也可以传递参数,仅限于POST方法时
xhr.send();
// 等待结果
// 出现变化后即进行处理
xhr.onreadystatechange = function(){
//这里面写处理函数
}
Ajax采用的机制是给事件传递的不同步骤划分不同的等级的方式
分类如下:
case 1:
//刚注册
var xhr = new XMLHttpRequest();
case 2:
//已经接收到了响应报文的报文头
xhr.open();
case 3:
// 正在下载响应体
// 此时如果获取响应报文的话,可能会不完整,不适合在这里处理响应体
case 4:
//已经完整下载报文,此次响应结束
下面写一个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX发送GET请求并传递参数</title>
</head>
<body>
<ul id='list'>
</ul>
<script>
// 获取Dom对象
var listElement = document.getElementById('list');
//发送请求,获取列表数据
var xhr = new XMLHttpRequest();
// 后面的是我们的处理文件
xhr.open('GET', 'users.php');
xhr.send();
xhr.onreadystatechange = function () {
// 如果状态值不为4,即报文未下载完毕,即退出函数,等待下一次状态变化
if(this.readyState != 4 ) return;
// 状态值为4,进行后续操作
// data存储我们获得的报文,注意需抓化为JSON格式
var data = JSON.parse(this.responseText);
// 遍历data,并向我们的Dom对象添加内容
for(var i=0;i<data.length;i++){
// 创建新Dom对象
var liElement = document.creatElement('li');
// 为新的Dom对象添加内容
liElement.innerHtml = data[i].name;
// 将我们创建好的Dom对象添加到ul列表中
listElement.appendChild(liElement);
}
}
// var xhr = new XMLHttpRequest();
// //?后面传参数
// xhr.open('GET', 'users.php?id=2');
// xhr.send(null);
// xhr.onreadystatechange = function () {
// if(this.readyState != 4) return;
// console.log(this.responseText);
// }
</script>
</body>
</html>
当然,除了GET方法之外,POST方法也可以
但是post方法需要添加一行代码
POST方法对于传递的参数量没有限制,但是比GET方法要慢
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
实例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX发送POST请求</title>
<style>
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
opacity: .5;
text-align: center;
line-height: 300px;
}
#loading::after {
content: '加载中...';
color : #fff;
}
</style>
</head>
<body>
<div id="loading"></div>
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td></td>
<td><button id="btn">登录</button></td>
</tr>
</table>
<script>
var btn = document.getElementById('btn');
var txtUsername =document.getElementById('username');
var txtPassword = document.getElementById('password');
var loading = document.getElementById('loading');
btn.onclick = function () {
loading.style.display = 'block';
var username = txtUsername.value;
var password = txtPassword.value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'login.php');
// 注意,post方法必须添加下面这一行代码
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.send('username='+username+'&password='+password);
xhr.send(`username=${username}&password=${password}`);
xhr.readystatechange = function () {
if(this.readyState != 4)return;
loading.style.display = 'none';
console.log(this.responseText);
}
}
</script>
</body>
</html>