ajax简单使用【VUE版本】
1、前端服务器express的安装
1.1、初始化express服务
npm init --yes # node项目初始化
npm i express # 安装express服务
1.2、设置配置文件
# 根目录下新建一个文件夹ExpressFile【文件夹名自定义】,再创建配置文件expressconfig.js【文件名自定义】,写入如下内容
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//可以接收任意类型的请求
app.all('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 允许自定义设置请求头
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
// 接收get请求,post同理接收post
app.get('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO AJAX POST');
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已经启动, 8000 端口监听中....");
});
1.3、启动express服务
# 终端切换到ExpressFile文件夹下,执行如下语句
node expressconfig.js
# 访问 http://127.0.0.1:8000/
2、原生ajax操作
2.1、GET基本操作
//获取button元素
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?a=100&b=200&c=300');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0[未初始化] 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){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
2.2、post基本操作
//获取元素对象
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');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','atguigu');
//3. 发送
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
// xhr.send('1233211234567');
//4. 事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
});
2.3、获取json数据
配置js增加代码
//JSON 响应
app.all('/json-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
const data = {
name: 'wj'
};
//对对象进行字符串转换
let str = JSON.stringify(data);
//设置响应体
response.send(str);
});
请求js代码
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;
// 1. 手动对数据转化
// let data = JSON.parse(xhr.response);
// console.log(data);
// result.innerHTML = data.name;
// 2. 自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
2.4、IE缓存问题
btn.addEventListener('click', function(){
const xhr = new XMLHttpRequest();
xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); // 增加一个随机时间
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
2.5、请求超时设置
btn.addEventListener('click', function(){
const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常, 请稍后重试!!");
}
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题!");
}
xhr.open("GET",'http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
}
})
2.6、取消请求设置
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:8000/delay');
x.send();
}
// 取消请求
btns[1].onclick = function(){
x.abort();
}
2.7、相同请求发送问题
//标识变量
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/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
3、jquery发送ajax请求
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 发送 AJAX 请求</title>
<!--crossorigin="anonymous"设置后不会带原网址的cookie-->
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">jQuery发送AJAX请求 </h2>
<button class="btn btn-primary">GET</button>
<button class="btn btn-danger">POST</button>
<button class="btn btn-info">通用型方法ajax</button>
</div>
<script>
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
},'json');
});
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
});
});
$('button').eq(2).click(function(){
$.ajax({
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>
4、axios发送ajax请求(vue与react)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios 发送 AJAX请求</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<button>GET</button><button>POST</button><button>AJAX</button>
<script>
const btns = document.querySelectorAll('button');
//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btns[0].onclick = function () { // GET 请求
axios.get('/axios-server', {
params: { //url 参数
id: 100,
vip: 7
},
headers: { // 请求头信息
name: 'atguigu',
age: 20
}
}).then(value => {
console.log(value);
});
}
btns[1].onclick = function () {
axios.post('/axios-server',
{ // 请求体
username: 'admin',
password: 'admin'
},
{ // 其他参数
params: { //url 参数
id: 200,
vip: 9
},
headers: { //请求头参数
height: 180,
weight: 180,
}
}
);
}
btns[2].onclick = function(){
axios({
method : 'POST',//请求方法
url: '/axios-server',//url
params: { //url参数
vip:10,
level:30
},
headers: { //头信息
a:100,
b:200
},
data: { //请求体参数
username: 'admin',
password: 'admin'
}
}).then(response=>{
console.log(response.status); // 响应状态码
console.log(response.statusText); // 响应状态字符串
console.log(response.headers);//响应头信息
console.log(response.data); //响应体
})
}
</script>
</body>
</html>
注:具体使用可以参考官网
5、fetch函数发送ajax请求
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
method: 'POST', //请求方法
headers: { //请求头
name:'atguigu'
},
body: 'username=admin&password=admin' //请求体
}).then(response => {
// return response.text();
return response.json();
}).then(response=>{
console.log(response);
});
}
6、jsonp使用(跨域1)
6.1、jsonp原理
js请求代码
<script>
function handle(data) { //处理数据
const result = document.getElementById('result'); //获取 result 元素
result.innerHTML = data.name;
}
</script>
<!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
<script src="http://127.0.0.1:8000/jsonp-server"></script>
服务端代码
app.all('/jsonp-server',(request, response) => {
const data = {
name: 'wj'
};
let str = JSON.stringify(data); //将数据转化为字符串
response.end(`handle(${str})`);//返回结果
});
6.2、jsonp实践1
js客户端代码
//获取 input 元素
const input = document.querySelector('input');
const p = document.querySelector('p');
function handle(data){ //声明 handle 函数
input.style.border = "solid 1px #f00";
//修改 p 标签的提示文本
p.innerHTML = data.msg;
}
input.onblur = function(){//绑定事件
let username = this.value; //获取用户的输入值
//向服务器端发送请求 检测用户名是否存在
//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的 src 属性
script.src = 'http://127.0.0.1:8000/check-username';
//3. 将 script 插入到文档中
document.body.appendChild(script);
}
服务端代码
app.all('/check-username',(request, response) => {
const data = {
exist: 1,
msg: '用户名已经存在'
};
let str = JSON.stringify(data); //将数据转化为字符串
response.end(`handle(${str})`); //返回结果
});
6.2、jquery实现jsonp实践
js代码
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){ # 必须加callback=?'
$('#result').html(`
名称: ${data.name}<br>
校区: ${data.city}
`)
});
});
服务端代码
app.all('/jquery-jsonp-server',(request, response) => {
const data = {
name:'citys',
city: ['北京','上海','深圳']
};
let str = JSON.stringify(data); // 将数据转化为字符串
let cb = request.query.callback; // 接收 callback 参数
response.end(`${cb}(${str})`); // 返回结果
});
7、cors跨域处理
app.all('/cors-server', (request, response)=>{
//设置响应头
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method", '*');
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 指定具体那些请求可以跨域
response.send('hello CORS');
});
8、nodemon的安装
原由:文件更改后,会自动重启nodejs服务
# 安装nodemon插件
npm install -g nodemon
# 在express配置js文件的目录下执行,启动express[监听ExpressConfig.js文件的改变]
nodemon ExpressConfig.js