AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
学习Ajax对于前端页面的逻辑优化与用户体验感的提高有很大的影响，学习Ajax我们一般会基于简单的框架express在node.js技术里使用，去node.js官方网站下载合适的node.js包之后，在D盘自己创建一个文件夹（最好别用中文创建），之后进到文件夹的最底层执行cmd命令：npm init --yes 对node.js进行初始化，之后安装express框架用npm i express 。这样我们进行Ajax测试的基本环境就搭建好了。
JavaScript中可以通过以下方式绑定某个HTML标签：
绑定按钮标签：
const button = document.getElementsByTagName('button')[0];绑定div标签：
<div id="result"></div>
<script>
const result = document.getElementById("result");
</script>ajax核心对象xmlHttpRequest的请求发送与收取响应结果四部曲：
// 1.创建ajax测试对象
const xhr = new XMLHttpRequest();
// 2.初始化，设置请求方法与url
xhr.open('GET','http://192.168.100.216:8080/server');
// 3.发送
xhr.send();
// 4.事件绑定 处理服务端返回的结果
// on 在...时
// readystate 状态 0（检测请求）,1（open）,2(send),3(返回部分结果),4（返回所有结果）
// change 改变时触发
xhr.onreadystatechange = function(){
// 应该在readyState是4时进行处理
if(xhr.readyState == 4){
// 判断响应的状态码 200 403 404 401 500
// 响应状态码中以2开头的都是成功
if(xhr.status-200 < 300){
// 处理服务端响应的结果
// 返回的结果是http协议封装的报文结构：行 头 空行 体
// 获取响应状态码
console.log(xhr.status);
// 获取响应状态字符串
console.log(xhr.statusText);
// 获取所有的响应头
console.log(xhr.getAllResponseHeaders());
// 获取响应体
console.log(xhr.response);
// 设置result的文本 为我们的响应体
// 然后在一块div里显示文本
result.innerHTML = xhr.response;
}
}
}js脚本
// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则: http://+本地ip地址+:端口号+路由
// request是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('hello ajax ');
});
// 监听端口，启动服务
app.listen(8080,()=>{
console.log("服务已经启动,8080端口监听中");
})测试01：采用Ajax向本地端口8080发请求并将响应内容渲染在页面上。
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<title>ajax-test01</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 3px #90d
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
// 通过dom的方式绑定这个按钮对象
const button = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
// 设置对象的鼠标点击事件
button.onclick = function(){
// console.log('测试这个按钮');
// 1.创建ajax测试对象
const xhr = new XMLHttpRequest();
// 2.初始化，设置请求方法与url
xhr.open('GET','http://192.168.100.216:8080/server');
// 3.发送
xhr.send();
// 4.事件绑定 处理服务端返回的结果
// on 在...时
// readystate 状态 0（检测请求）,1（open）,2(send),3(返回部分结果),4（返回所有结果）
// change 改变时触发
xhr.onreadystatechange = function(){
// 应该在readyState是4时进行处理
if(xhr.readyState == 4){
// 判断响应的状态码 200 403 404 401 500
// 响应状态码中以2开头的都是成功
if(xhr.status-200 < 300){
// 处理服务端响应的结果
// 返回的结果是http协议封装的报文结构：行 头 空行 体
// 获取响应状态码
console.log(xhr.status);
// 获取响应状态字符串
console.log(xhr.statusText);
// 获取所有的响应头
console.log(xhr.getAllResponseHeaders());
// 获取响应体
console.log(xhr.response);
// 设置result的文本 为我们的响应体
// 然后在一块div里显示文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>js
// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则: http://+本地ip地址+:端口号+路由
// request是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('hello ajax ');
});
// 监听端口，启动服务
app.listen(8080,()=>{
console.log("服务已经启动,8080端口监听中");
})测试02：采用Ajax实现鼠标放在某块div上时向本地端口8080请求显示提示内容，离开时也发一次请求消失提示内容。
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax-test02</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 3px #90d
}
</style>
</head>
<body>
<div id="result"></div>
<script>
// 使用dom的方式创建绑定对象
const result = document.getElementById("result");
// 鼠标放上就显示
result.addEventListener("mouseover", function () {
console.log('鼠标放在这块div了');
// 创建ajax对象
const xhr = new XMLHttpRequest();
// 初始化请求方式与url
xhr.open('POST', 'http://192.168.100.216:8080/server1');
// 设置请求头信息xhr.setRequestHeader('name','value');
// 自定义的头信息需要在js脚本文件中添加新的响应头通过且请求方式为all
// 发送
xhr.send();
// 事件绑定，处理返回结果
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status < 300 && xhr.status >= 200) {
result.innerHTML = xhr.response;
}
}
});
// 鼠标离开就隐藏
result.addEventListener("mouseleave",function(){
// 创建ajax对象
const xhr = new XMLHttpRequest();
// 初始化请求方式与url
xhr.open('POST','http://192.168.100.216:8080/server1');
// 发送
xhr.send();
// 事件绑定，处理返回结果
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status<300 && xhr.status>=200){
result.innerHTML = null;
}
}
})
</script>
</body>
</html>js
// 引入express
const express = require('express');
// 创建新的app
const app = express();
// 创建路由规则
// 设置端口监听
app.post('/server1',(request,response)=>{
// 设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send("鼠标覆盖这块div");
});
app.listen(8080,()=>{
console.log("服务已经启动，8080端口正在监听");
});测试03：采用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>ajax-tes03</title>
<style>
#result {
width: 200px;
height: 200px;
border: 3px solid #904;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById("result");
var message = "success";
// 设置键盘按下事件
window.onkeydown = function () {
// 创建Ajax对象
const xhr = new XMLHttpRequest();
// 初始化请求方式与URL
xhr.open('POST', 'http://192.168.100.216:8080/server3')
// 发送
xhr.send();
// 事件绑定，处理返回结果
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = message;
window.alert('你按下了键盘');
}
}
}
</script>
</body>
</html>js
// 引入express
const express = require('express');
// 创建新的app
const app = express();
// 创建路由规则
app.post('/server3',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.send('sucess');
});
app.listen(8080,()=>{
console.log("正在监听8080端口");
})至此，Ajax的请求学习就结束了，当然还有一些关于路由参数提交的知识没有写出来，下个文章补。
3778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
