AJAX 「 ※ Learning ※ 」
编辑
39
2025-03-12
简介
AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
【原生】AJAX请求
准备工作
1、前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。
2、前往并下载 Express 框架。
安装Node.js
node -v //检查Node.js版本npm -v // 检查Npm包版本npm install -g npm // 更细Npm安装Express
npm init --yesnpm i express //mac用户前置sudo命令HTTP协议请求
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
请求报文
响应报文
状态码
Express规则
// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send('Hello AJAX!')
})
app.post('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('Hello AJAX!')
})
// 监听端口，启动服务
app.listen(8000, ()=>{
console.log('服务器已启动，8000端口监听中...')
})AJAX基本操作
<button>点我发送请求</button>
<div id="result" class="w-48 h-48 border solid black"></div><script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
btn.onclick = function() {
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
// 3. 发送
xhr.send();
// 4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是xhr对象中的属性，表示状态 0-4
// 0：xhr对象创建完成
// 1：open方法调用完成
// 2：send方法调用完成
// 3：服务端返回部分结果
// 4：服务端返回所有结果，可以在该阶段获取返回结果
// change 改变
xhr.onreadystatechange = function() {
// 判断服务端返回所有结果
if (xhr.readyState === 4) {
// 判断响应状态码 200 404 403 401 500
// 2xx 都为成功
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
// 1. 响应行
// console.log(xhr.status); // 状态码
// console.log(xhr.statusText); // 状态字符串
// console.log(xhr.getAllResponseHeaders()); // 所有响应头
// console.log(xhr.response); // 响应体
// 设置result的文本
result.innerText = xhr.response;
}
}
}
}
</script>POST请求设置
/* 当鼠标移入#result，则发送Post请求... */
<div id="result" class="w-48 h-48 border solid black"></div><script>
const result = document.getElementById('result');
result.addEventListener('mouseover', function () {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 设置请求头信息（预定义）
xhr.setRequestHeader('name','parlo'); //可以设置自定义请求头
//3.发送
xhr.send('a=100&b=200'); //请求体也可以为'number'；'a:100&b:100..'
//4.事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerText = xhr.response;
}
}
}
});
</script>当设定为自定义的请求头时，则需要在后端添加新的请求类型（一般不需要前端去操作）
// server.js
// 可以接受任意类型的请求
app.all('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
response.setHeader('Access-Control-Allow-Headers', '*')
// 设置响应体
response.send('Hello AJAX!')
})服务端响应JSON数据
// server.js
// 可以接受任意类型的请求
app.all('/json-server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
response.setHeader('Access-Control-Allow-Headers', '*')
// 响应一个数据
const data = {
name: 'parlo',
}
// 对象转换为字符串
let str = JSON.stringify(data)
// 设置响应体
response.send(str)
})/* 当键盘在浏览器视口按下，则发送请求 */
<div id="result" class="w-48 h-48 border solid black"></div>手动转换数据
<script>
//当键盘在浏览器视口下，按下键盘则发送POST请求
const result = document.getElementById('result')
window.onkeydown = function () {
// 发送请求
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('get', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 手动处理服务器返回的结果
let data = JSON.parse(xhr.response)
console.log(data)
result.innerText = data.name
}
}
}
}
</script>自动转换数据
<script>
//当键盘在浏览器视口下，按下键盘则发送POST请求
const result = document.getElementById('result')
window.onkeydown = function () {
// 发送请求
const xhr = new XMLHttpRequest();
// 设置响应体类型
xhr.responseType = 'json'
// 初始化
xhr.open('get', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 自动处理服务器返回的结果
console.log(xhr.response)
result.innerText = xhr.response.name
}
}
}
}
</script>Nodemon工具
安装Nodemon
npm install -g nodemon运行服务端
nodemon server.jsIE缓存问题解决
解决全世界最好用的IE浏览器的缓存解决问题！需要注意的是，现代浏览器几乎不需要调整。
<button>点我发送请求</button>
<div id="result" class="w-48 h-48 border solid black"></div>// server.js
app.get('/ie', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send('HELLO IE! 2~~~');
});<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
btn.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('GET', 'http://localhost:8000/ie?t=' + Date.now()); //为IE浏览器添加参数 + 时间戳
// 发送
xhr.send();
// 绑定事件
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerText = xhr.response;
}
}
};
});
</script>超时与网络异常
增加友好的判定来告知AJAX请求的网络情况。
<button>点我发送请求</button>
<div id="result" class="w-48 h-48 border solid black"></div>// server.js
app.get('/delay', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
setTimeout(() => {
response.send('延时响应');
}, 3000);
});<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
btn.addEventListener('click', () => {
// 创建对象
const xhr = new XMLHttpRequest();
// 设置超时时间
xhr.timeout = 2000;
// 设置超时回调
xhr.ontimeout = function () {
alert('网络超时，请稍后重试！');
};
// 设置网络异常回调
xhr.onerror = function () {
alert('网络异常，请稍后重试！');
};
// 初始化
xhr.open('GET', 'http://localhost:8000/delay');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerText = xhr.response;
}
}
};
});
</script>取消请求
取消正在发送的AJAX请求。
<button>点击发送请求</button>
<button>点击取消请求</button><script>
const btn = document.querySelectorAll('button');
let xhr = null; // 作用域需放在外层
btn[0].onclick = function () {
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8000/delay');
xhr.send();
};
btn[1].onclick = function () {
xhr.abort(); //取消请求
};
</script>重复请求问题
当多次发送AJAX请求时，取消之前的请求。这样可以减少服务器的性能冲突。
<script>
const btn = document.querySelectorAll('button');
let xhr = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求
btn[0].onclick = function () {
if (isSending) xhr.abort();//判断！如果正在发送，则取消本次发送
xhr = new XMLHttpRequest();
//修改 标识变量的值
isSending = true;
xhr.open('GET', 'http://localhost:8000/delay');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
//修改表示变量
isSending = false;
}
};
};
btn[1].onclick = function () {
xhr.abort(); // 取消请求
};
</script>【jQuery】AJAX请求
<button>GET请求</button>
<button>POST请求</button>// jquery
app.all('/jquery-server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
//response.send('HELLO jquery AJAX');
const data = {name:'parlo'};
response.send(JSON.stringify(data));
});GET请求
<script>
$('button').eq(0).click(function () {
$.get('http://127.0.0.1:8000/jquery-server', {name: 'parlor', age: 18}, function (data) {
console.log(data);
}, 'json');
});
</script>POST请求
<script>
$('button').eq(1).click(function () {
$.post('http://127.0.0.1:8000/jquery-server', {name: 'parlor', age: 18}, function (data) {
console.log(data);
}, 'json');
});
</script>通用方法
- 2
- 0
-
分享