是什么?
Ajax全称Asynchronous Javascript And XML,也就是异步的JavaScript和XML。通过Ajax可以向服务器发送异步请求,进行无刷新更新数据。
XML简介
XML是可扩展标记语言,被设计用来传输和存储数据。它与HTML类似,但是HTML都是预定义标签,都是已经定义好的,而XML全是自定义标签,需要进行自定义。
Ajax返回数据
以前Ajax通过服务端返回的就是XML格式字符串,前端js对字符串进行解析。现在使用的是json格式。
为什么?
1、可以在无需刷新页面的情况下向服务端发送请求。
2、允许根据用户的事件(鼠标事件、键盘事件、表单事件、文档事件)更新页面页面内容。
在哪里使用?
场景一:在浏览器输入关键字,出现相关的关键字。
场景二:注册时输入文本,会出现相应提示。
注:使用场景不止以上两种,还有很多很多
如何使用?(本文使用express框架)
后端js文件:server.js
//1、引入express
const express = require("express");
//2、创建应用对象
const app = express();
//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
//GET
app.get('/server', (request, response) => {
//设置响应头(设置允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*')
//设置响应体
response.send('HELLO AJAX');
});
//POST
app.post('/server', (request, response) => {
//设置响应头(设置允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*')
//返回结果
let result = {
name: '戴望浩'
}
//设置响应体
response.send(JSON.stringify(result));
});
//4、监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动,8000端口监听中……");
})
前端html文件:ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#result {
width: 100px;
height: 100px;
border: 1px saddlebrown solid;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
//获取div元素
const result = document.getElementById('result');
//绑定按钮的onclick事件
btn.onclick = () => {
//1、创建对象
const xhr = new XMLHttpRequest();
//2、初始化 设置请求的方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3、发送
xhr.send();
//4、事件绑定 处理服务端返回的结果
//on 当……时候
//readystate 是xhr对象中的一个属性,表示状态(0:未初始化,1:open已经调用完毕,2:send已经调用完毕,3:服务端返回了部分结果,4:服务端返回了全部结果)
//change 改变
xhr.onreadystatechange = () => {
//判断服务器是否返回了所有结果
if (xhr.readyState === 4) {
//判断响应的状态码(是否请求成功)
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果(包括行、头、空行、体)
//1、响应行
//设置result的文本
result.innerHTML = xhr.response;
}
else {
}
}
}
}
//绑定mouseover事件
result.addEventListener('mouseover', () => {
//1、创建对象
const xhr = new XMLHttpRequest();
//设置返回类型
xhr.responseType = 'json';
//2、初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3、发送
xhr.send();
//4、事件绑定
xhr.onreadystatechange = () => {
//判断服务器是否返回了所有结果
if (xhr.readyState === 4) {
//判断响应的状态码(是否请求成功)
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果(包括行、头、空行、体)
//1、响应行
//设置result的文本
result.innerHTML = xhr.response.name;
}
else {
}
}
}
})
</script>
</body>
</html>
效果:
鼠标移入事件:
点击按钮事件: