AJAX笔记
学习搭网站时，用到Ajax，但是不太了解，之前也没有系统的学习前端知识，于是上B站学习了一下Ajax，下面附上笔记记录一下
AJAX
简介
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，就是在不刷新整个网页的情况下，能够动态的从后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网、淘宝天猫等等。
express框架基本使用
简介
Express是一个基于node.js的极简、灵活的web应用开发框架。
Express可以快速搭建一个完整功能的网站。
Express的作用于node.js中的内置的http模块类似，都是用来创建web服务的。但是http模块使用起来比较繁琐。开发效率低，Express是基于http模块封装出来的，能够极大的提高开发效率。
1.初始化
npm init --yes npm是nodejs下的包管理工具
2.安装express框架
npm i express
3.运行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 Ajax GET');
// });
// app.post('/server',(request,response)=>{
// //设置响应头 设置允许跨域
// response.setHeader('Access-Control-Allow-Origin','*')
// //设置响应体
// response.send('Hello Ajax POST');
// });
//接收所有请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('Hello Ajax');
});
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('Hello Ajax');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已启动，8000端口监听中")
})
启动命令：node js文件名
安装nodemon
指令：npm install -g nodemon
作用：自动重启server.js
原生Ajax案例
GET.html
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>AJAX GET 请求title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
style>
head>
<body>
<button>点击发送请求button>
<div id="result">div>
<script>
//获取botton元素
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');
//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;
}
}
}
}
script>
body>
html>
POST.html
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>AJAX GET 请求title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
}
style>
head>
<body>
<div id="result">div>
<script>
//获取botton元素
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.open('POST','http://127.0.0.1:8000/server?a=100&b=200');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//自定义格式
//xhr.setRequestHeader('name','zeee')
//3.发送
// xhr.send('a=100&b=200');
xhr.send('a:100&b:200');
//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;
}
}
}
})
script>
body>
html>
返回JSON
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>JSON响应title>
<style>
#result{
width: 200px;
height:100px;
border:solid 1px #89b
}
style>
head>
<body>
<div id="result">div>
<script>
const result=document.getElementById('result');
//绑定键盘按下事件
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;
//手动数据转换
// let data=JSON.parse(xhr.response);
// console.log(data);
//自动转换
console.log(xhr.response)
result.innerHTML=xhr.response.name;
}
}
}
}
script>
body>
html>
server,js
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//响应数据
const data={
name:'Zee'
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体,send只能接收字符串或者buffer
response.send(str);
});
IE缓存问题
IE浏览器，服务端同一url改变内容后，IE浏览器读取缓存值，显示不变
解决：改变url
//初始化
xhr.open('GET','http://127.0.0.1:8000/json-server?t='+Date.now());
超时与网络异常
时间到了之后会自动取消请求。
<script>
const btn=document.getElementsByTagName('button')[0];
const result=document.getElementById('result');
//const result= document.querySelector('#result');
btn.addEventListener('click',function(){
const xhr=new XMLHttpRequest();
//超时设置2s设置
xhr.timeout=4000;
//超时回调
xhr.ontimeout=function(){
alert("网络异常");
}
//网络异常回调
xhr.onerror=function(){
alert('你的网络似乎出现了一些问题！');
}
xhr.open('GET','http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response;
}
}
}
})
script>
app.all('/delay',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
setTimeout(() => {
response.send('延时响应');
}, 3000);
});
手动取消请求
<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/delay');
x.send();
}
//abort
btns[1].onclick=function(){
x.abort();
}
script>
body>
jQuery发送AJAX请求
Bootcdn
CDN的全称是Content Delivery Network，即内容分发网络。
CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
CDN的关键技术主要有内容存储和分发技术。
jQuery语法
$.get(*URL,data,function(data,status,xhr),dataType)*
| 参数 | 描述 |
|---|---|
| URL | 必需。规定您需要请求的 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）xhr - 包含 XMLHttpRequest 对象 |
| dataType | 可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。 可能的类型：“xml” - 一个 XML 文档"html" - HTML 作为纯文本"text" - 纯文本字符串"script" - 以 JavaScript 运行响应，并以纯文本返回"json" - 以 JSON 运行响应，并以 JavaScript 对象返回"jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个 “?callback=?” 到 URL 来规定回调 |
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>jquery发送AJAX请求title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js">script>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b;
margin-bottom: 20px;
}
style>
head>
<body>
<div class="container">
<h2 class="page-header">jquery发送AJAX请求h2>
<div id="result">div>
<button class="btn btn-primary">GETbutton>
<button class="btn btn-danger">POSTbutton>
<button class="btn btn-info">通用型方法button>
div>
<script>
const result=document.getElementById('result');
//eq() 方法返回带有被选元素的指定索引号的元素。
//索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
//get(url，请求数据（json格式),回调函数）
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jquery-server',{a:100,b:20},function(data){
console.log(data);
result.innerHTML=data.name;
},'json')
})
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jquery-server',{a:100,b:20},function(data){
console.log(data);
},'json')
})
script>
body>
html>
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
//响应数据
const data={
name:'Zeezz'
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体,send只能接收字符串或者buffer
response.send(str);
});
jQuery通用方法发送ajax
<script>
const result=document.getElementById('result');
$('button').eq(2).click(function(){
$.ajax({
//url
url:'http://127.0.0.1:8000/jquery-server',
//参数 POST可以设置请求体
data:{a:100,b:200},
//请求类型
type:'GET',
//响应体数据类型
dataType:'json',
//成功的回调
success:function(data){
result.innerHTML=data.name;
},
//超时
timeout:2000,
//失败回调
error:function(){
result.innerHTML='出错咯'
},
//更多参数可以取查看官方文档
});
})
script>
同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
跨域解决
JSONP简介
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
工作原理
在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。
原生JSONP使用
1.动态的创建一个script标签
var script=document.createElement("script");
2.设置script的src，设置回调函数
script.src="http://127.0.0.1:8000/check-name;
function abc(data){alert(data.name)}
3.将script添加到body中
document.body.appendChild(script);
4.服务器中路由的处理
<body>
用户名:<input type="text" id="username">
<p>p>
<script>
//获取input元素
const input =document.querySelector('input');
const p=document.querySelector('p');
//声明handle函数
function handle(data){
input.style.border='solid 1px #f00';
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插入到文档中(body)
//body末尾
document.body.appendChild(script);
}
script>
body>
app.all('/check-username',(request,response)=>{
const data={
exist:1,
msg:'用户名已经存在'
};
//将数据转化为字符串
let str=JSON.stringify(data);
//返回结果 handle是一个函数 注意这里是·不是'
response.end(`handle(${str})`);
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已启动，8000端口监听中")
})
jQuery发送JSONP请求
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>jquery-jsonptitle>
<style>
#result{
width: 300px;
height: 100px;
border:solid 1px #089;
}
style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js">script>
head>
<body>
<button>点击发送 jsonp 请求button>
<div id="result">div>
<script>
$('button').eq(0).click(function(){
//url固定格式 ?callback=?
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
$('#result').html(`
名称:${data.xx}
校区:${data.city}
`)
})
});
script>
body>
html>
app.all('/jquery-jsonp-server',(request,response)=>{
const data={
xx:'地点',
city:['北京','上海','深圳']
};
//将数据转化为字符串
let str=JSON.stringify(data);
//接收callback参数
let cb =request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
设置CORS响应头实现跨域
简介
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
工作原理
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
使用
主要是服务器端的设置：
router.get("/testAJAX" , function (req , res)
//通过 res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
//*表任意地址
res.set("Access-Control-Allow-Origin","*");
res.set("Access-Control-Allow-Headers","*")
res.send("testAJAX 返回的响应");