Ajax起步
Express作为一个基于Node.js的一个极简的开发框架
//引入express
const express = require('express');
//创建应用对象
const app =express();
//创建路由规则
app.get('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello Express');
});
app.listen(8000 , ()=>{
console.log("服务已经启动，8000端口打开");
})app.liesten()是 Express 框架中启动 HTTP 服务器的核心方法，其作用是将 Express 应用绑定到指定端口并开始监听客户端请求。第一个是开放端口，第二个是回调函数，在端口开启后紧接着触发
response.setHeader('Access-Control-Allow-Origin','*'); 设置响应头，表示允许跨域，这样设置表示允许所有类型的请求进行跨域
Ajax进行基本请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Get请求</title>
<style>
#result{
width: 200px;
height:100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>按钮1</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
//创建对象
const xhr = new XMLHttpRequest();
xhr.open('GET','http:127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定，处理服务端返回结果
//当状态发生改变时调用，其中readystate是xhr对象的属性
//其中有五个状态0 1 2 3 4
//0是刚开始的属性，1是初始化完成，2是发送请求，3是服务端返回部分值，4是服务端返回所有值
//change是改变
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
// console.log(xhr.status);
// console.log(xhr.statusText);
// console.log(xhr.getAllResponseHeaders());
// console.log(xhr.response);
result.innerHTML=xhr.response;
}
}
}
}
</script>
</body>
</html>其中getElementsByTagName是根据标签获取一个动态的集合，其中[0]是用来获取第0个按钮
getElementById是根据id，作为唯一标识获取相对应的元素
get传参
xhr.open('GET','http:127.0.0.1:8000/server');直接在对应的url后面?加参数就可以
post传参
<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');
//3.发送
xhr.send("a=111&b=222");
//4.事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status>=200&& xhr.status<300){
result.innerHTML = xhr.response;
}
}
}
})
</script>当鼠标移过result对象时，执行函数，向服务端发送post请求，服务端需要有进行接收
将请求体放在send里，可以直接进行传参
app.post('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello Express ;try to Post it!!!');
});请求头设置
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','huidu');
//3.发送
xhr.send('a=111&b=222');由于有自定义的请求头，这就需要响应服务端可以接收任意请求头：由于服务端还要进行预检，需要对服务端进行option传参，所以建议用all
app.all('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello Express ;try to Post it!!!');
});服务端响应JSON数据
app.get('/json-server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
const data ={
name:'huidu'
}
//response.send('Hello Json;try to get it!!!');
response.send(JSON.stringify(data));
});服务端的响应体中是不能返回一个对象的，所以需要JSON.stringify()将对象数据转化为字符串，然后进行响应对象的传输
我们可以在发送之前设置响应体的类型
<script>
const result = document.getElementById('result');
window.onkeydown = function(){
//发送请求
const xhr = new XMLHttpRequest();
//初始化
xhr.open('GET','http://127.0.0.1:8000/json-server');
xhr.responseType='json';
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
if(xhr.status>=200&&xhr.status<300){
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
</script>也可以用JSON.parse()进行数据转换const result =JSON.parse(xhr.response)
Ajax对于网络超时与网络异常的处理
为了测试相关内容，我们首先需要让服务端进行延时处理setTimeout，第一个回调函数，第二个是延迟事件
app.get('/overtime',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Origin','*');
setTimeout(()=>{
response.send('延迟显示');
},3000)
//设置响应体
});xhr.timeout=用于设置超时时间，ontimeout用于超时处理，onerror同理
<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(){
result.innerHTML="网络超时！！！";
}
xhr.onerror=function(){
result.innerHTML="网络异常！！！";
}
xhr.open('GET','http://127.0.0.1:8000/overtime');
xhr.send();
xhr.onreadystatechange= function(){
if(xhr.readyState ===4){
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
})
</script>在JavaScript中，document.querySelector('#result') 和 document.getElementById('result') 都是用于获取DOM元素的方法，但它们在实现机制、适用场景和性能上存在关键区别。
其中document.querySelector('#result')被用于如嵌套结构、组合条件，但是作用时间较长，document.getElementById('result')实现速度较快，作用于唯一id值
箭头函数和传统函数最大的区别就是箭头函数无法实例化，且无法使用this,但是它胜在简洁
Ajax进行取消请求
<script>
const btn = document.getElementsByTagName('button');
const result=document.querySelector('#result');
let hxr = null;
btn[0].addEventListener('click',()=>{
hxr = new XMLHttpRequest();
hxr.open("GET","http://127.0.0.1:8000/no-send");
hxr.send();
hxr.onreadystatechange=function(){
if(this.readyState===4){
if(this.status>=200&&this.status<300){
result.innerHTML=this.response;
}
}
}
});
btn[1].addEventListener('click',()=>{
hxr.abort();
})
</script>hxr.abort();取消请求的核心
jQuery的Ajax传输
GET/POST传参
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
const result = document.getElementById('result');
$('button').eq(0).click(()=>{
// $.get('http://127.0.0.1:8000/jQuery',{a:100,b:200},(data)=>{
// // 正确操作：修改DOM内容而非变量本身
// result.innerHTML = JSON.stringify(data);
// })
$.post('http://127.0.0.1:8000/jQuery',{a:100,b:200},(data)=>{
// 正确操作：修改DOM内容而非变量本身
result.innerHTML = JSON.stringify(data);
})
})
</script>上面是简单的get/post传参，并非通用方法
$.post('url',传入参数,回调函数(获取的参数是response响应体对象))
通用型方法
<script>
const result = document.getElementById('result');
$('button').eq(0).click(() => {
$.ajax({
//url
url: 'http://127.0.0.1:8000/jQuery',
//请求类型
type: 'POST',
//响应体结果类型
//dataType:'json',
//传入参数
data: {
a: 100,
b: 200
},
//成功的回调
success: (data) => {
result.innerHTML = data;
console.log("成功的回调");
},
//超时时间
timeout: 2000,
//失败的回调
error: () => {
console.log("出错了");
},
headers: {
a: 100,
b: 200
}
})
})
</script>axios的Ajax传输
<script>
const result = document.getElementById('result');
const btn = document.getElementsByTagName('button');
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btn[0].addEventListener('click', () => {
axios.get('/axios-serve', {
//url参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
name: 'huidu',
age: 20
}
}).then((value) => {
result.innerHTML = value.data;
})
})
btn[1].addEventListener('click', () => {
axios.post('/axios-serve', {
name: 'huidu',
age: 20
}, {
headers: {
id: 200,
vip: 1
},
params: {
id: 200,
vip: 500
}
})
})
</script>其中params是get传入参数，也就是？之后的内容
跨域资源共享
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/CORS
Ajax本身是支持同源策略的，需要同协议，同ip和同端口
但是我们可以在服务端加入响应头 ，来确保可以完成跨域资源共享
response.setHeader('Access-Control-Allow-Origin','*');
浙公网安备 33010602011771号