Ajax
XML
ajax设置请求参数
运行:node server.js
//1-get.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax get请求</title>
<style>
#result{
width: 12.5rem;
height: 6.25rem;
border: solid 1px aquamarine;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取btn元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
// 2.设置请求的方法
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 3.发送
xhr.send();
// 4.事件绑定 处理服务端返回的结果
// on when 当。。的时候
//readystate 是 xhr 对象中的属性，表示状态 0 1 2 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.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX POST请求</title>
<style>
#result{
width: 200px;
height: 100px;\
border: solid 1px #7FFFD4;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化，设置类型和URL
xhr.open('POST','http://127.0.0.1:8000/server');
//3.发送
xhr.send();
//4.事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
</html>
//server.js
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文 的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应
response.send('hello')
});
app.post('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应
response.send('hello post');
})
// 4.监听端口服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})
post设置请求体
//3.发送
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
设置请求头
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
nodemon
Nodemon 是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。 Nodemon 是一款完美的开发工具，可以使用 npm 安装。
安装
npm install -g nodemon
对server.js文件开启nodemon服务
nodemon server.js
处理超时问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX POST请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #7FFFD4;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
btn.addEventListener('click', function(){
//发送请求
const xhr = new XMLHttpRequest();
//超时设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常，请稍后重试！");
}
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一点问题");
}
//初始化
xhr.open('GET','http://127.0.0.1:8000/timeout');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文 的封装，response是对响应报文的封装
app.all('/timeout',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(() => {
//设置响应体aa
response.send('延时响应');
},3000)
});
// 4.监听端口服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})
取消请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>取消请求</title>
</head>
<body>
<button>点击发送</button>
<button>点击取消</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:8000/timeout');
x.send();
}
//取消请求
btns[1].onclick = function(){
x.abort();
}
</script>
</body>
</html>
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文 的封装，response是对响应报文的封装
app.all('/timeout',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(() => {
//设置响应体aa
response.send('延时响应');
},3000)
});
// 4.监听端口服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})
处理重复请求（标识一个变量解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>重复请求</title>
</head>
<body>
<button>点击发送</button>
<script>
//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; //是否正在发送AJAX请求
btns[0].onclick = function(){
//判断标识变量
if(isSending) x.abort();//如果正在发送，则取消该请求，创建一个新的请求
x = new XMLHttpRequest();
isSending = true;
x.open("GET",'http://127.0.0.1:8000/timeout');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
</script>
</body>
</html>
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文 的封装，response是对响应报文的封装
app.all('/timeout',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(() => {
//设置响应体aa
response.send('延时响应');
},3000)
});
// 4.监听端口服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})
jquery发送ajax请求
//ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery发送ajax请求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
<h2>jquery发送ajax请求</h2>
<button>GET</button>
<button>POST</button>
<button>通用型方法</button>
</div>
<script>
//get
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
console.log(data);
},'json');
})
//post
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jquery-server', {a:100,b:200}, function(data){
console.log(data);
},'json');
})
//ajax
$('button').eq(2).click(function(){
$.ajax({
//url
url:'http://127.0.0.1:8000/jquery-server',
//参数
data:{a:100,b:200},
//请求类型
type:'GET',
//响应体结果
dataType:'json',
//成功的回调
success: function(data){
console.log(data);
},
//超时时间
timeout:2000,
//失败的回调
error:function(){
console.log('出错啦！！');
},
headers:{
c:300,
d:400
}
});
});
</script>
</body>
</html>
//server.js
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文 的封装，response是对响应报文的封装
//jquery服务
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name: '尚硅谷'};
response.send(JSON.stringify(data));
});
// 4.监听端口服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中。。。");
})