同源策略：协议，域名，端口号必须完全相同。
违背同源策略就是跨域
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
案例代码：
AJAX JS代码
//1. 引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//这里为get方法
app.get('/home1', (request, response) => {
//设置响应头 设置允许跨域
//*表示接受所有域名，*号可换成指定地址，仅该地址能访问服务端
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX1');
// //响应一个数据
// var data = {
// name: 'hhh'
// };
// //对对象进行字符串转换
// var str = JSON.stringify(data);
// //设置响应体
// response.send(str);
});
//post方法
app.post('/home2', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX2');
});
//all方法：可以接受任意类型的请求
app.all('/home3', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
var data = {
name: 'HELLO AJAX3'
};
//对对象进行字符串转换
var str = JSON.stringify(data);
//设置响应体
response.send(str);
});
//延时响应
app.all('/time', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
//设置响应体
//json类型数据
var data = { name: '爹' };
response.send(JSON.stringify(data));
// response.send('HELLO AJAX4');
}, 2000); //2秒延迟
// //响应一个数据
// var data = {
// name: 'hhh'
// };
// //对对象进行字符串转换
// var str = JSON.stringify(data);
// //设置响应体
// response.send(str);
});
//jQuery服务
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
//json数据
var data = { name: '爹' };
response.send(JSON.stringify(data));
});
//axios服务
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
//json数据
var data = { name: '爹' };
response.send(JSON.stringify(data));
});
//fetch服务
app.all('/fetch-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader("Access-Control-Allow-Origin", "*");
//允许自定义响应头 *表示所有类型的请求头都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
//json数据
var data = { name: '爹' };
response.send(JSON.stringify(data));
});
// jsonp服务
app.all('/jsonp', (request, response) => {
//使用jsonp跨域，服务端返回的响应体应为js代码
// 由进行请求的script标签进行编译
// response.send('console.log("Hello jsonp")');
var data = {
name: '爹'
}
//将数据转化为字符串
var str = JSON.stringify(data);
//返回结果 形式为函数调用
// 函数要提前声明，函数参数为想要返回的数据
response.end(`fn(${str})`);
});
// jQuery-jsonp服务
app.all('/jsonp2', (request, response) => {
var data = {
name: '爹',
age: 66
};
//将数据转化为字符串
var str = JSON.stringify(data);
// 接收callback参数
var cb = request.query.callback;
//返回结果 形式为函数调用
// 函数要提前声明，函数参数为想要返回的数据
response.end(`${cb}(${str})`);
});
// });
//4.监听端口启动服务 1000为自定义端口
app.listen(1000, () => {
console.log("服务已经启动,1000端口监听中...");
})
1.标准方法 发送AJAX请求：
<!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请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<button>点击取消请求</button>
<div id="result"></div>
<script>
//获取button元素
var btn = document.getElementsByTagName('button');
var result = document.querySelector('#result');
//将xhr变量写到外部便于两个按钮都能用
var xhr = null;
//标识变量，解决重复请求问题
var isSending = false; //是否正在发送请求 false未，true正在
//绑定事件
btn[0].onclick = function() {
//判断标识变量
if (isSending) {
//如果上个请求正在发送，则取消上个请求
xhr.abort()
};
//AJAX操作
//1.创建对象
xhr = new XMLHttpRequest(); //xhr为自定义名
//修改 标识变量
isSending = true;
//设置响应体数据类型 自动将服务端数据转换成json数据
// xhr.responseType = 'json';
//超时设置 2s设置
// xhr.timeout = 2000;
//超时回调
// xhr.ontimeout = function() {
// alert('请求超时！');
// };
//网络异常回调
xhr.onerror = function() {
//网络未连接时提醒
alert('您的网络异常！');
};
//2.初始化 设置请求的方法(这里方法为GET)和url
xhr.open("GET", "http://127.0.0.1:1000/home1");
//用下条代码解决ie浏览器缓存问题
// xhr.open("GET", 'http://127.0.0.1:1000/home?t='+Date.now());
//post方法如下
// xhr.open("POST", "http://127.0.0.1:1000/home");
//url后可以加GET请求参数 如下
// xhr.open("GET", "http://127.0.0.1:1000/home?a=100&b=200");
//设置请求头
// xhr.setRequestHeader('头的名字', '值');
//3.发送
xhr.send();
//请求体可以发送post请求参数
// xhr.send('a=100&b=200&...');
// xhr.send('a:100&b:200&...');
// xhr.send('123');
//4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function() {
//判断 (服务端返回了所有的结果)
if (xhr.readyState === 4) {
//修改标识变量
isSending = false;
//判断响应状态码 200 404 403 401 500
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
// console.log(xhr.status); //状态码
// console.log(xhr.statusText); //状态字符串
// console.log(xhr.getAllResponseHeaders); //所有响应头
// console.log(xhr.response); //响应体
//手动对数据转化
// var data=JSON.parse(xhr.response);
// result.innerHTML=data.name;
//设置result文本
result.innerHTML = xhr.response;
} else {
}
}
}
}
//abort方法，取消请求
btn[1].onclick = function() {
xhr.abort();
}
</script>
</body>
</html>
2.jquery 发送 AJAX请求
<!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>
<!-- 引入cdn 远程jQuery -->
<!-- crossorigin="anonymous"为跨源请求的属性设置 -->
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<button>点击发送请求1</button>
<button>点击发送请求2</button>
<script>
//get，post发送请求
$('button').eq(0).click(function() {
//发送get请求 发送post请求只需把get改为post
//第一个参数给谁发
//第二个参数为发送的参数，对象格式
//第三个参数是一个回调，回调函数中的参数为响应体
//第四个参数为响应体类型
$.get('http://127.0.0.1:1000/jquery-server', {
a: 100,
b: 200
}, function(date) {
console.log(date);
}, 'json');
})
//jQuery通用方法，Ajax方法发送请求
$('button').eq(1).click(function() {
$.ajax({
//url
url: 'http://127.0.0.1:1000/time',
//参数 对象格式
data: {
a: 100,
b: 200
},
//请求类型
type: 'GET',
//响应体结果类型
dataType: 'json',
//成功的回调
success: function(data) {
console.log(data);
},
//超时时间
timeout: 5000,
//失败的回调
error: function() {
console.log('出错了！');
},
//头信息 自定义的头信息
headers: {
c: 300,
d: 400
}
})
})
</script>
</body>
</html>
3.axios 发送 AJAX请求
<!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>axios 发送 AJAX请求</title>
<!-- 引入axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<button>GET点击发送1</button>
<button>post点击发送2</button>
<button>AJAX通用点击发送3</button>
<script>
var btns = document.querySelectorAll('button');
//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:1000';
btns[0].onclick = function() {
//GET 请求
axios.get('/axios-server', {
//url参数
params: {
id: 100,
vip: 1
},
//请求头信息
headers: {
name: 'die',
age: 18
}
}).then(value => {
console.log(value);
})
};
btns[1].onclick = function() {
//post 请求
//第二个参数为请求体信息，第三个参数才是其它配置
axios.post('/axios-server', {
username: 'admin',
password: 'admin'
}, {
//url参数
params: {
id: 100,
vip: 1
},
//请求头信息
headers: {
height: 180,
weight: 200,
},
}).then(value => {
console.log(value);
})
};
btns[2].onclick = function() {
axios({
//请求方法
method: 'POST',
//url
url: '/axios-server',
// url参数
params: {
a: 10,
b: 20
},
//头信息
headers: {
c: 200,
b: 3000
},
//请求体参数
data: {
username: 'admin',
password: 'admin'
}
}).then(response => {
//全部信息
console.log(response);
//响应状态码
console.log(response.status);
// 响应状态字符串
console.log(response.statusText);
// 响应头信息
console.log(response.headers);
// 响应体
console.log(response.data);
})
}
</script>
</body>
</html>
4.fetch 发送 AJAX请求
<!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>fetch 发送 AJAX请求</title>
</head>
<body>
<button>请求</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function() {
// ?c=10 ?后为参数
fetch('http://127.0.0.1:1000/fetch-server?c=10', {
//请求方法
method: 'POST',
// 请求头
headers: {
name: '666'
},
// 请求体
body: 'a=100&b=200'
}).then(response => {
// json为fetch中的一个方法，可以获得json数据
return response.json();
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>
5.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>jsonp跨域</title>
<style>
#thisdiv {
height: 200px;
width: 200px;
border: solid 2px #90b;
}
</style>
</head>
<body>
<div id="thisdiv"></div>
<script>
//处理数据
function fn(data) {
var div = document.querySelector('#thisdiv');
div.innerHTML = data.name;
}
// 用script标签进行跨域时在script标签内时这样写
// 1.创建script标签
// var script = document.createElement('script');
// 2.设置script标签src
// script.src = 'http://127.0.0.1:1000/jsonp';
// 3.将script标签插入文档中
// document.body.appendChild(script);
</script>
<!-- 用script标签进行跨域时在script标签外时这样写 -->
<script src="http://127.0.0.1:1000/jsonp"></script>
</body>
</html>
6.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-jsonp</title>
<style>
#dddd {
width: 200px;
height: 200px;
border: solid 3px #90c;
}
</style>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button>点击发送jsonp请求</button>
<div id="dddd"></div>
<script>
$('button').eq(0).click(function() {
// callback=?参数为固定形式
$.getJSON('http://127.0.0.1:1000/jsonp2?callback=?', function(data) {
$('#dddd').html(`
名称:${data.name},
年龄:${data.age}
`)
});
});
</script>
</body>
</html>
