AJAX
第一章：ajax介绍
1、AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
2、作用：通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
XML介绍
-
XML 可扩展标记语言。
-
XML 被设计用来传输和存储数据。
-
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标
ajax特点
1、可以无需刷新页面而与服务器端进行通信。
2、允许你根据用户事件来更新部分页面内容。
ajax使用
核心对象
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。
使用步骤
1、创建 XMLHttpRequest 对象 var xhr = new XMLHttpReq
2、设置请求信息 xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3、发送请求 xhr.send(body) //get 请求不传 body 参数，只有 post 请求
4、接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}
ajax请求状态
xhr.readyState 可以用来查看请求当前的状态
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>发送</button>
<script>
//获取按钮
const btn = document.querySelector('button');
//绑定事件
btn.onclick = function(){
//创建对象
const xhr = new XMLHttpRequest();
//初始化 设置请求方法与路径
xhr.open('GET','http://127.0.0.1:9000/data');
//发送
xhr.send();
//处理返回结果
//on:当。。。。时候
//readystate：是xhr对象中属性，有 0 1 2 3 4 值表示状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){//判断服务端是否返回全部结果
//判断响应码：2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果
//响应
console.log(xhr.status);//响应码
console.log(xhr.statusText);//响应码字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}
}
}
}
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
app.get('/data',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send("hello ajax");
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
第二章：jquery发送ajax
2.1、get请求
格式：
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引用jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button>get请求</button>
<script>
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function(data){
console.log(data);
},'json');
});
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
const data = {
name:'javaxa'
}
let str = JSON.stringify(data);
response.send(str);
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
2.2、post请求
格式：
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _defaul
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引用jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button>post请求</button>
<script>
$('button').eq(0).click(function(){
$.post('http://127.0.0.1:8000/jquery-server',{a:100,b:100},function(data){
console.log(data);
});
});
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
const data = {
name:'javaxa'
}
let str = JSON.stringify(data);
response.send(str);
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
2.3、ajax通用请求
$.ajax()方法是jQuery最底层的Ajax实现。它的结构为：
$.ajax(options)
该方法只有一个参数，但是这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有的参数都是可选的。常用参数见下表：
1.url
要求为String类型的参数，（默认为当前地址）发送请求的页面。
2.type
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3.timeout
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
4.async
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
5.cache
要求为Boolean类型的参数，默认为true（当dataType为Script时，默认为false），设置false将不会从浏览器缓存中加载请求信息。
6.data
要求为Object或String类型的参数，发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。get请求中将附加在URL后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包的mine信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用jQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本javascript代码。不会自动缓存结果，除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp:JSON格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
8.beforeSend
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是唯一的参数。
function(XMLHttpRequest){
this;//调用本次ajax请求时传递的options参数
}
9.complete
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest,textStatus){
this; //调用本次ajax请求时传递的options参数
}
10.success
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
（1）由服务器返回，并根据dataType参数进行处理后的数据。
（2）描述状态的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等
this; //调用本次ajax请求时传递的options参数
}
11.error
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。ajax事件函数如下：
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
12.contentType
要求为String类型的参数，当发送信息至服务器时。内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
13.dataFilter
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataTYpe参数。函数返回的值将由jQuery进一步处理。
function(data,type){
//返回处理后的数据
return data;
}
14.global
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart和ajaxStop可用于控制各种ajax事件。
15.ifModified
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
16.jsonp
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
17.username
要求为String类型的参数，用于响应HTTP访问认证请求的用户。
18.password
要求为String类型的参数，用于响应HTTP访问认证请求的密码。
19.processData
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲而非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
一般来说前七个加上 第10 第11 个差不多够用。
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引用jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button>ajax通用请求</button>
<script>
$('button').eq(0).click(function(){
$.ajax({
//请求路径
url:'http://127.0.0.1:8000/jquery-server',
//请求参数
data:{
age:20
},
//请求方法的方式
type:'get',
//返回的数据类型
dataType:'json',
//成功回调
success:function(data){
console.log(data);
},
//超时时间
timeout:2000,
//失败回调
error: function(){
console.log("出错了");
},
//设置请求头
});
});
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
app.all('/jquery-server',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
const data = {
name:'javaxa'
}
let str = JSON.stringify(data);
response.send(str);
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
2.4、axios发送ajax
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<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/1.3.6/axios.js"></script>
</head>
<body>
<button>get</button>
<button>post</button>
<button>ajax</button>
<script>
const btn = document.querySelectorAll('button');
//添加请求路径的默认前缀
axios.defaults.baseURL = 'http://127.0.0.1:8000';
btn[0].onclick = function(){
axios.get('/axios-server',{
//url路径参数
params:{
id:1001,
vip:3
}
//请求头
// Headers:{
// name:'javaxa',
// age:20
// }
}).then(value =>{
console.log(value);
});
};
btn[1].onclick = function(){
axios.post('/axios-server',{
username:'javaxa',
password:'000000'
},{
//url路径参数
params:{
id:1001,
vip:3
},
headers:{
name:'javaxa',
age:20
}
});
};
btn[2].onclick = function(){
axios({
//请求方法
method:'post',
//请求路径
url:'/axios-server',
//请求参数
params:{
vip:4,
age:20
},
//请求头
headers:{
a:100,
b:90
},
//请求体：
data:{
username:'javaxa',
password:'000000'
}
}).then(response=>{
//响应状态码
console.log(response.status);
console.log(response.statusText);
});
};
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//axios
app.all('/axios-server',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
const data = {
name:'javaxa'
}
let str = JSON.stringify(data);
response.send(str);
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
拓展：fetch发送ajax请求
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>ajax</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch-server',{
//请求方法
method:'post',
//请求头
headers:{
name:'asddfa'
},
//请求体
body:'username=javaxa&password=000000'
}).then(response=>{
// return response.text();
return response.json();
}).then(response => {
console.log(response);
});
};
</script>
</body>
</html>
服务端代码：
//1、引入express
const express = require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//fetch
app.all('/fetch-server',(request,response)=>{
//设置响应头 设置允跨域许访问
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
const data = {
name:'javaxa'
}
let str = JSON.stringify(data);
response.send(str);
});
//4、监听端口服务
app.listen(8000,()=>{
console.log("服务以启动，8000 端口监听中");
});
第三章：跨域
3.1、同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。 违背同源策略就是跨域
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击获取数据</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function(){
const x = new XMLHttpRequest();
//因为是同源的，所以不用加全部路径，url可以简写
x.open('GET','/data');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
if(x.status >= 200 && x.status < 300){
console.log(x.response);
}
}
};
};
</script>
</body>
</html>
服务端代码：
const express = require('express');
const app = express();
app.get('/home',(request,response)=>{
//响应一个页面：
//路径为：http://127.0.0.1:9000/home
response.sendFile(__dirname + '/index.html');
});
//发送数据
app.get('/data',(request,response)=>{
response.send("用户数据");
});
app.listen(9000,()=>{
console.log("服务已启动.......");
});
3.2、解决跨域
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
通过 cors 来解决
CORS 是什么
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方 案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源.
CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。
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.send("testAJAX 返回的响应");
})
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>发送</button>
<script>
//获取按钮
const btn = document.querySelector('button');
//绑定事件
btn.onclick = function(){
//创建对象
const xhr = new XMLHttpRequest();
//初始化 设置请求方法与路径
xhr.open('GET','http://127.0.0.1:9000/data');
//发送
xhr.send();
//处理返回结果
//on:当。。。。时候
//readystate：是xhr对象中属性，有 0 1 2 3 4 值表示状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){//判断服务端是否返回全部结果
//判断响应码：2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果
//响应
console.log(xhr.status);//响应码
console.log(xhr.statusText);//响应码字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}else{
}
}
}
}
</script>
</body>
</html>
服务端代码：
const express = require('express');
const app = express();
//跨域设置
app.all('/data',(request,response)=>{
//服务端设置了这个，则表明可以跨域
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Method','*');
response.send("hello cors");
});
app.listen(9000,()=>{
console.log("服务已启动.......");
});
