@[toc]
1.原生AXAJ
通过axjx可以先服务器发送异步请求，==最大优势无刷新获取数据==
xml json
1.1AXJX的优缺点
1）可以无需刷新页面请求数据。
2）允许你根据用户事件更新部分页面数据。
3）没有浏览历史，存在跨域问题。
1.2 HTTP
HTTP是超文本传输协议，
2.express的使用
在vscode的终端中
// 1.引入express
const {
request, response } = require('express');
const express=require('express');
// 2.创建应用对象
const app=express();
// 3.创建路由对象
// request 是对响应报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
response.send('hello');
})
// 4.监听端口的启动
app.listen(8000,()=>{
console.log("服务已启动");
})
启动express
3.axja
<!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>
#serve {
width: 300px;
height: 400px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="app">
<button @click="getdata">点击</button>
<div id="serve"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
const result = document.getElementById("serve");
const app = new Vue({
el: "#app",
data: {
},
methods: {
getdata() {
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化数据 设置请求的方法和URL
xhr.open("GET", "http://127.0.0.1:8000/serve");
// 3.发送
xhr.send();
// 4.事假绑定，处理服务返回的结果
// 总共有四种转态 0 1 2 3 4
xhr.onreadystatechange = function () {
// 确保拿到说有的数据
if (xhr.readyState == 4) {
// 判断转态吗
if (xhr.status >= 200 && xhr.status <= 300) {
// 1.响应行
console.log(xhr.status); //状态码
console.log(xhr.setRequestHeader);
console.log(xhr.responseText); //状态字符串
console.log(xhr.response); //响应体
result.innerHTML = xhr.response;
}
}
};
console.log("dayu");
},
},
});
</script>
</body>
</html>
js
// 1.引入express
const {
request, response } = require('express');
const express=require('express');
// 2.创建应用对象
const app=express();
// 3.创建路由对象
// request 是对响应报文的封装
// response 是对响应报文的封装
app.get('/serve',(request,response)=>{
// 设置跨域请求
response.setHeader('Access-Control-Allow-Origin','*');
response.send('hello');
})
// 4.监听端口的启动
app.listen(8000,()=>{
console.log("服务已启动");
})
4.服务端响应json数据
服务器发送json数据
app.all('/json-server',(request,response)=>{
// 设置跨域请求
response.setHeader('Access-Control-Allow-Origin','*');
// 设置请求头
response.setHeader('Access-Control-Allow-Headers','*');
// 数据
const data={
name:'nohao',
age:14
}
// j将对象转化为字符串
let str =JSON.stringify(data);
response.send(str);
})
1.手动转换
let data = JSON.parse(xhr.response);
```java
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) {
console.log(xhr.response);
// result.innerHTML = xhr.response;
// 手动转化
let data = JSON.parse(xhr.response);
console.log(data.name);
result.innerHTML = data.name && data.age;
}
}
};
2.自动转换
> // 设置数据响应的类型
xhr.responseType = "json";
// 自动转换
result.innerHTML = xhr.response.name;
```java
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.innerHTML = xhr.response;
// 自动转换
result.innerHTML = xhr.response.name;
}
}
};
5.IE 缓存问题和网络延时
xhr.open("GET", "http://127.0.0.1:8000/ie?t"+Data.now());
通过Data.now（）来实时请求。
app.all('/delay',(request,response)=>{
// 设置跨域请求
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
setTimeout(() => {
response.send("延时响应");
}, 3000);
})
xhr.timeout = 1000;
// 超时回调
xhr.ontimeout = function () {
alert("网络异常");
};
// 网络异常
xhr.onerror = function () {
alert("网络有问题");
};
6.重复请求
xhr.abort();取消请求，给请求设置一个延时
methods: {
getdata() {
console.log("hhh");
if (isending) {
xhr.abort();
}
xhr = new XMLHttpRequest();
xhr.abort();
isending = true;
xhr.open("GET", "http://127.0.0.1:8000/a");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
isending = false;
}
};
},
},
)
