优点:按需加载,不需要刷新就可以向服务器发送请求,提高利用率,网页整体加载速度变快,数据交互更加快速,体验更好。
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示:
孙悟空
18
男
{"name":"孙悟空","age":18,"gender":"男"}
HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
HTTP请求分为 请求 和 响应
请求报文
行 请求类型 url路径 HTTP协议版本
头 请求头
空体
体 GET请求体为空,POST请求体可以不为空
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP协议版本 响应状态码 响应状态字符串
头 响应头
空体
体 主要的返回结果(html语法内容)
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体
尚硅谷
响应状态码:404 找不到;403 禁止;401 未授权;500 内部错误 等等
Request:亲求 Response:响应
控制台看不见的话,按快捷键Ctrl+R。
AJAX Node.js搭建的服务器环境,安装详情在视频P7。视频P6是控制台查看报文的方式。
express是服务端框架,是基于Node.js平台的,需提前安装Node.js。
安装
在vscode终端(快捷键ctrl+~)输入 npm i express
使用
创建一个js文件(例如aaa.js),在里面创建好express的代码,在终端输入node aaa.js 回车即可。在浏览器打开自己创建的端口(以我的代码为例,输入127.0.0.1:5000)。
注意:在终端输入 node 文件名 时,一定要注意文件路径与终端显示路径是否匹配。
// 1. 引入express
const exprss = require('express');
// 2. 创建应用对象
const app = exprss();
// 3.创建路由规则
// (request,response) 形参名,可自行定义,一般为request和response
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
// 设置响应
response.send('坚持坚持再坚持');
});
app.listen(5000,()=>{
console.log('服务器已启动,5000端口监听中');
})
准备一个前端页面和一个服务端代码。
服务端get设定路由规则的路径 (/server),路径正确就会执行回调函数的代码,并且由response做出相应。(以下是GET请求服务端代码创建路由模块如下,只是加了路径,设置了响应,其他片段同上)
// 3.创建路由规则
app.get('/server',(request,response)=>{
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('HELLO AJAX');
});
如果端口被占用,记得先关闭其他的。
操作DOM先获取元素,给元素绑定事件,在进行AJAX操作。创建对象,设置请求方式(GET/POST)和服务端地址,在send()发送到服务端,后绑定事件处理服务端返回的结果。点击被绑定事件的按钮即可发送AJAX请求。
//获取button元素(获取的是button按钮索引值为0的那一个)
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:5000/server');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变(0-1是一次改变,以此类推,共4次)
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果,第四次改变就是返回结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功(2开头的都表示成功)
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{
}
}
}
}
GET请求传递参数
GET请求参数传递是直接在服务端地址后面加上?进行传递,用&隔开。
xhr.open('GET', 'http://127.0.0.1:5000/server?a=100&b=200&c=300');
鼠标经过时,自动发送AJAX请求返回服务器数据。
获取元素绑定事件
const result = document.getElementById("result");
//绑定经过事件 'mouseover'
result.addEventListener('mouseover',function(){
......
}
绑定事件
//绑定事件
result.addEventListener('mouseover',function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('POST', 'http://127.0.0.1:5000/server');
//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){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}
}
}
})
发送POST请求先初始化:
xhr.open('POST', 'http://127.0.0.1:5000/server);
当然服务端也要改为POST(app.post('/server', (request, response) => {...}
const express = require('express');
const app = express();
//创建路由规则
app.post('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
POST请求参数传递在send()中,和GET完全不同(样式可以自定义,但一般有要求)
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
// xhr.send('1233211234567');
设置请求头信息,在初始化.open()之后,发送.send()之前精选设置,设置方式如下。
xhr.setRequestHeader('名字','值')
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 以下这种是自定义的
xhr.setRequestHeader('name','atguigu');
对于自定义设置的请求头,要在服务端创建路由时添加一个响应头,预定义的不用,还得将接收类型改为all。
//可以接收任意类型的请求
app.all('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//自定义添加的响应头
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
工作中服务端返回的大都为JSON格式数据。
服务端response.send('XXXX');在发送数据时,只能发送字符串类型,所以要发送服务端的数据,就要通过JSON对服务端数据进行转化后通过send()发送到网页,JSON.stringify(数据);,在通过JSON转化后读取。
const express = require('express');
const app = express();
app.all('/json-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
const data = {
name: 'atguigu'
};
//对对象进行字符串转换
let str = JSON.stringify(data);
//设置响应体
response.send(str);
});
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
读取时有两种方法读取,可以手动转化和自动转化。
手动转化:JSON.parse(xhr.response);
// 事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 1. 手动对数据转化
let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name;
}
}
}
自动转化:需要提前设置响应体数据类型。xhr.responseType = 'json';
// onkeydown键盘按下事件
window.onkeydown = function(){
//发送请求
const xhr = new XMLHttpRequest();
//设置响应体数据的类型
xhr.responseType = 'json';
//初始化
xhr.open('GET','http://127.0.0.1:5000/json-server');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 2. 自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
nodemon自动重启工具可以帮助我们解决在修改服务端数据时来回重启的问题。(检测变化后自动重启)
终端输入:npm install -g nodemon
安装后启动服务端终端指令变为 nodemon 文件名.js (例如:nodemon server.js)
//2. 初始化 设置请求方法和 url
xhr.open("GET",'http://127.0.0.1:5000/ie?t='+Date.now());
服务端代码没什么变化
/针对 IE 缓存
app.get('/ie', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO IE - 5');
});
2.7 AJAX请求超时与网络异常处理
当运行过程中请求超时时,服务端可能不会及时快速响应,在请求超时或者网络异常是给用户提醒。
(如果服务端返回数据要2秒,前端请求设置时间为1秒就可以算作请求超时)
服务端返回时间设置
//延时响应
app.all('/delay', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
//设置响应体
response.send('延时响应');
}, 1000)
});
前端请求时间及网络异常设置
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
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:5000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
在事件初始化前(xhr.open之前)对请求截止时间等经行设置
xhr.timeout = 1000; 请求时间1S
添加超时回调
xhr.ontimeout = function(){ 指令 }
添加网络异常回调
xhr.onerror = function(){ 指令 }
在请求的结果还没有返回之前,是可以取消请求的。
利用xhr.abort()的方法即可。(为了让返回结果不是那么快,给响应体加一个定时器设置一下返回时间就可以)。
//获取元素对象
const btns = document.querySelectorAll('button');
// 两按钮共用一个,因为要重复赋值,用let提前声明一下
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:5000/delay');
x.send();
}
// abort
btns[1].onclick = function(){
x.abort();
}
如果服务端响应速度比较慢,在响应还没返回时,前端多次进行重复的请求,就会造成请求拥堵。
解决办法就是如果上一个请求还没返回响应数据,还处在响应中,这时又创建了一个新的和上一个一样的请求,就直接取消上一个请求。
先声明一个标识变量,在事件初始化前对标识变量进行判断,如果上一次请求再进行就利用abort()先取消,在事件初始化前对标识变量重新赋值,响应后同时修改标识变量为下一次做准备(响应也有成功和失败,防止失败后,修改标识变量直接先加在进入响应后,再做判断,代码如下)。
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:5000/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
发送jQuery请求时要先引入jQuery
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:5000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
},'json');
});
app.get('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:5000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
});
});
服务端可以是post,也可以是all,post请求也可以是all。post数据没在url后面。
app.post('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
// or
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
功能性更加的强大,但是简易程度不太行。属于自定义的请求头,需要设置请求头信息。(其他需求可以去文档查看)
$('button').eq(2).click(function(){
$.ajax({
//url
url: 'http://127.0.0.1:5000/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
}
});
});
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));
});
npm安装:npm install axios (简写npm i axios)
或者直接引入
......
const btn = document.querySelectorAll('button');
服务端类型为all,设置可以自定义请求头信息。
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
btn[0].onclick = function () {
//GET 请求
axios.get(''http://127.0.0.1:5000/axios-server', {
//url 参数
params: {
aa: 200,
bb: 6
},
//请求头信息
headers: {
name: 'lqqq',
age: 20
}
}).then(value => {
console.log(value);
});
}
数据返回和jQuery不一样,jQuery是基于回调函数,Axios是基于promise。返回结果是对象,在数
据获取这块非常完整。
可以利用 axios.defaults.baseURL = ' ';下面路径就可以不用加这个。服务端代码都一样。
axios.defaults.baseURL = 'http://127.0.0.1:5000';
axios.defaults.baseURL = 'http://127.0.0.1:5000';
btn[1].onclick = function () {
axios.post('/axios-server', {
//请求体
username: 'lqqq',
password: '926'
}, {
//url
params: {
aa: 200,
bb: 9
},
//请求头参数
headers: {
height: 180,
weight: 180,
}
});
}
请求体是JSON格式。
优点:语法来说相对简单
axios.defaults.baseURL = 'http://127.0.0.1:5000';
btn[2].onclick = function(){
axios({
//请求方法
method : 'POST',
//url
url: '/axios-server',
//url参数
params: {today:6,tommory:7},
//头信息
headers: {aa:100,b:'abcd'
},
//请求体参数
data: {username: 'hello', password: 'happy' }
}).then(response=>{
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
}
fetch()函数是全局对象,可以直接调用,返回的结果为promise对象。
url参数可以直接添加?并缀在url后面
fetch('http://127.0.0.1:8000/fetch-server?abc=20', {...}
获取参数时先调它本身的text()方法并return,然后再用promis的then方法获取。因为包了两层promise。如果响应体返回的是json字符串,先用json()把数据解析成js对象在处理。
btn[0].onclick = function(){
fetch('http://127.0.0.1:5000/fetch-server?abc=20', {
//请求方法
method: 'POST',
//请求头
headers: {
name:'lqqq'
},
//请求体
body: 'username=admin&password=admin'
}).then(response => {
// return response.text();
return response.json();
}).then(response=>{
console.log(response);
});
}
//fetch 服务
app.all('/fetch-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name:'长源'};
response.send(JSON.stringify(data));
});
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
app.all('/jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name: 'LuoQQQQ'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
//4. 监听端口启动服务
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
本地地址5500可以获取5000地址的函数,并显示执行结果。
var script = document.createElement("script");
script.src = "http://localhost:5000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
document.body.appendChild(script);
验证服务端是否存在用户名,若存在,输入框标统并提示。(这个案例只是展示可以在服务器读取数据,并不是真正的检测是否存在用户名,若要实现这一功能,服务器得配置相应数据,调取函数值还得做判断,最后输出结果)
const express = require('express');
const app = express();
//用户名检测是否存在
app.all('/check-username',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
exist: 1,
msg: '用户名已经存在'
};
response.send(JSON.stringify(data));
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
引入jQuery
这里的路径后面要加 ?callback=? ,是固定值。
$.getJSON('http://127.0.0.1:5000/jquery-jsonp-server?callback=?', function(data){......}
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:5000/jquery-jsonp-server?callback=?', function(data){
$('#result').html(`
游戏: ${data.name}
名称: ${data.city}
`)
});
});
服务端响应体也要接收
//接收 callback 参数
let cb = request.query.callback;
app.all('/jquery-jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name:'游戏',
city: ['和平暖暖','QQ飞车','王者荣耀']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
返回的数据如下
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", '*') ;
// 下面的表示只为5500端口设置
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
response.send('hello CORS');
});
*号表示通配符,都可以放行。
("Access-Control-Allow-Origin", " * ");
如果服务端数据在浏览器缓存了,Ctrl + F5 强制刷新就可以了。