Ajax
ajax简介
概念及应用
全称:Asynchronous JavaScript And XML
ajax=异步的JavaScript和xml
ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的web应用程序的技术,通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据
比如:京东淘宝的二级分类,注册用户时名称的检验,以及在搜索框搜索时的关键字提示等等…
ajax优缺点
优点:
- 可以无需刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
缺点:
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO 不友好
xml简介
XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似,不同的是HTML 中都是预定义标签,而XML 中没有预定义标签,
全都是自定义标签,用来表示一些数据。
比如说我有一个学生数据:
name = “孙悟空” ; age = 18 ; gender = “男” ;
用XML 表示:
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
但是现在已经被JSON取代了
{"name":"孙悟空","age":18,"gender":"男"}
HTTP
HTTP协议(超文本传输协议),协议详细规定了浏览器和万维网服务器之间相互通信的规则
协议: 就是一种约定,一种规则
请求报文
请求行
格式:method url
例如:
GET /product_detail?id=2
Post /login
请求头
格式:名字冒号空格值
例如:
Host: baidu.com
Cookie: name=baidu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
请求体
请求行为GET请求,请求体为空
请求行为POST请求,请求行可以不为空
例:
username=admin&password=admin
响应报文
响应行
协议版本:
HTTP/1.1 200 ok
响应头
Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
...
空行
响应体
404 Not Found 服务器无法根据客户端的请求找到资源
403 Forbidden 资源不可用
401 Unauthorized 未授权/请求要求用户的身份认证
500 Internal Server Error 服务器内部错误,无法完成请求
200 OK 请求成功。一般用于GET 与POST 请求
html 文本/json 文本/js/css/图片...
<html>
...
</html>
Chrome网络控制台查看通信报文
打开一个网页右键检查
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XU7UYPtS-1632059106967)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\4.png)]
这个时候什么都没有,刷新一下,然后我们选择一个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jp7T8tlF-1632059106969)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\5.png)]
Headers:请求行和请求头、响应行和响应头
Response:响应体
原生ajax基本使用XHR
1.安装node.js
http://nodejs.cn/download/current/
2.安装express(服务端框架)和基本使用
1.打开vscode 打开自己的项目文件夹
2.然后在总文件夹下右键 在终端打开
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GKs6lAC0-1632059106970)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\1.png)]
3.输入命令 :
-
npm init --yes
-
npm install express --save
4.编写js代码
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send("Hello Express");
});
// 4. 监听端口,启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
5.运行js程序
右键js文件上一级目录的文件夹打开终端
node express基本使用.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYCLq9DD-1632059106972)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\2.png)]
6.运行成功后,就可以通过端口查看了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-erxAQbDP-1632059106973)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\3.png)]
3.安装nodemon自动重启工具
https://www.npmjs.com/package/nodemon
安装
npm install -g nodemon
启动服务
ndoemon server.js
ajax案例
1.准备
浏览器端使用的HTML文件和服务器端使用的js文件
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>
</body>
</html>
js文件:
//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Acess-Control-Allow-Origin','*');
//设置响应体
response.send('Hello Ajax');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中...");
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDwkyONy-1632059106974)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\6.png)]
启动成功后 发现请求都成功
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lS6dU5L7-1632059106974)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\7.png)]
2.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>
//获取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')
// 3. 发送
xhr.send();
// 4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){
// readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 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); // 响应体
//设置 result 的文本
result.innerHTML=xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
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');
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中...");
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvTUmDI8-1632059106975)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\8.png)]
ajax设置请求参数
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J3mMuWC7-1632059106976)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\9.png)]
3.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 POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
// 获取元素对象
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');
// 3. 发送 设置请求参数(请求体)
xhr.send('a=100&b=200&c=300');
// 4. 事件绑定
xhr.onreadystatechange = function(){
// 判断
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
// 处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
</html>
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');
});
app.post('/server', (request, response) => {
// 设置响应头, 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send("Hello Ajax POST");
});
//4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000端口监听中...");
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZRH6V2vG-1632059106977)(C:\Users\Administrator\Pictures\Saved Pictures\前端\Ajax\10.png)]
设置请求头信息
// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');
server.js中设置响应头允许自定义请求头 post改成all app.all
response.setHeader('Access-Control-Allow-Header','*');
4.Json数据请求
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>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();
// *2*.(自动转换) 设置响应体数据的类型(自动转换)
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);
// 1. 手动对数据转化 (字符串再转换成json)
// let data = JSON.parse(xhr.response); //转换成json
// result.innerHTML = data.name;
// *2*. (自动转换)自动转换(自动转换)
result.innerHTML = xhr.response.name; //已经自动变成json
}
}
}
}
</script>
</body>
</html>
js文件
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);
});
ajax使用
IE缓存问题
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IE缓存问题</title>
<style>
#result{
width:200px;
height:100px;
border:solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
btn.addEventListener('click', function(){
const xhr = new XMLHttpRequest();
xhr.open("GET",'http://127.0.0.1:8000/ie?time='+Date.now());
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>
js文件
app.get('/ie',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO IE');
});
网络请求超时问题
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请求超时与异常处理</title>
<style>
#result{
width:200px;
height:100px;
border:solid 1px #258;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
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:8000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>
js文件
//延迟响应
app.get('/delay',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
//定时器
setTimeout(()=>{
//设置响应体
response.send('延时响应');
},3000)
});
取消请求问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>取消请求</title>
</head>
<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();
}
btns[1].onclick = function(){
//abort 中止
x.abort();
}
</script>
</body>
</html>
请求重复问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重复请求问题</title>
</head>
<body>
<button>点击发送</button>
<script>
//获取元素对象
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:8000/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
// abort 中止
btns[1].onclick = function(){
x.abort();
}
</script>
</body>
</html>
总结
- XMLHttpRequest():创建 XHR 对象的构造函数
- status:响应状态码值,如 200、404
- statusText:响应状态文本,如 ’ok‘、‘not found’
- readyState:标识请求状态的只读属性 0-1-2-3-4
- onreadystatechange:绑定 readyState 改变的监听
- responseType:指定响应数据类型,如果是 ‘json’,得到响应后自动解析响应
- response:响应体数据,类型取决于 responseType 的指定
- timeout:指定请求超时时间,默认为 0 代表没有限制
- ontimeout:绑定超时的监听
- onerror:绑定请求网络错误的监听
- open():初始化一个请求,参数为:(method, url[, async])
- send(data):发送请求
- abort():中断请求 (发出到返回之间)
- getResponseHeader(name):获取指定名称的响应头值
- getAllResponseHeaders():获取所有响应头组成的字符串
- setRequestHeader(name, value):设置请求头
jQuery
get请求
$.get(url, [data], [callback], [type])
post 请求
$.post(url, [data], [callback], [type])
url: 请求的URL 地址
data: 请求携带的参数
callback: 载入成功时回调函数
type: 设置返回内容格式,xml, html, script, json, text, _defaul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 发送 AJAX 请求</title>
<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>
//使用jquery发送get请求
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
console.log(data);
},'json');
})
//使用jquery发送post请求
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
console.log(data);
},'json');
})
//通用方法(开发常用)
$("button").eq(2).click(function(){
$.ajax({
//url
url: 'http://127.0.0.1:8000/jquery',
//参数
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>
js文件
//JQuery
app.all('/jquery',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
axios
<!DOCTYPE html>
<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',{
//url参数
params:{
id: 100,
vip: 7
},
//请求头信息
headers:{
name: 'atguigu',
age: 20
}
}).then(response =>{
console.log(response)
})
}
//POST请求
btns[1].onclick = function(){
axios.post('/axios',{
username: 'admin',
password: 'admin',
//url
params:{
id: 200,
vip: 9
},
//请求头参数
headers: {
height: 180,
weight: 180,
}
}).then(response=>{
console.log(response.data);
console.log(response.headers);
})
}
//通用方法(开发使用)
btns[2].onclick = function(){
axios({
//请求方法
method : 'POST',
//url
url: '/axios',
//url参数
params: {
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>
js文件
//axios
app.all('/axios',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
Fetch
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch 发送 AJAX请求</title>
</head>
<body>
<button>AJAX请求</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch?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);
});
}
</script>
</body>
</html>
js文件
//fetch
app.all('/fetch',(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
跨域
同源跨域
同源策略是早由Netscape公司提出,是浏览器的一种安全策略。
同源: 协议、域名、端口号、必须完全相同。
违背同源策略就是跨域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<h>尚蛙谷</h><br>
<button>点击获取用户数据</button>
<script>
const btn = document.querySelector('button');
btn.onclick = function(){
axios({
method: 'GET',
url: 'http://127.0.0.1:9000/data'
}).then(response =>{
console.log(response.data);
})
}
</script>
</body>
</html>
js文件
const express = require('express');
const app = express();
app.get('/home', (request, response)=>{
//响应一个页面
response.sendFile(__dirname + '/index.html');
});
app.get('/data', (request, response)=>{
//防止出现跨域
response.setHeader('Access-Control-Allow-Origin','*');
response.send('用户数据');
});
app.listen(9000, ()=>{
console.log("服务已经启动...");
});
解决跨域
1.JSONP是什么
JSONP是一个非官方的跨域解决方法,纯粹凭借程序员的聪明才智开发出来,只支持get请求。
2.JSONP怎么工作?
在网页有一些标签天生具有跨域能力,比如: img link iframe script
JSONP就是利用script标签的跨域能力来发送请求的。
3.JSONP的使用
https://blog.csdn.net/inite/article/details/80333130
原生jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP实践</title>
</head>
<body>
用户名<input type="text" id="username"></input>
<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标签的提示文本;
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";
//3.将script插入到文档中
document.body.appendChild(script);
}
</script>
</body>
</html>
js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name: '尚硅谷atguigu'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
exist: 1,
msg: '用户名已经存在'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
jquery发送jsonp请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery-jsonp</title>
<style>
#result{
width:300px;
height:100px;
border:solid 1px #089;
}
</style>
<script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
<button>点击发送 jsonp 请求</button>
<div id="result">
</div>
<script>
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:8000/jquery-jsonp?callback=?', function(data){
$('#result').html(`
名称: ${data.name}<br>
校区: ${data.city}
`)
});
});
</script>
</body>
</html>
js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name: '尚硅谷atguigu'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});
app.all('/jquery-jsonp',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name:'尚硅谷',
city: ['北京','上海','深圳']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
CORS
1.CORS是什么?
CORS,跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源
2.CORS怎么工作?
CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应执行。
3.CORS的使用
https://blog.csdn.net/qq22692150/article/details/99011726
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<style>
#result{
width:200px;
height:100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>发送请求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
const result = document.getElementById('result');
btn.onclick = function(){
axios({
method: 'GET',
url: 'http://localhost:8000/cors-server',
}).then(response =>{
result.innerHTML = response.data;
})
}
</script>
</body>
</html>
js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});
app.all('/jquery-jsonp',(request, response) => {
});
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');
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
后言
此博客只是为简单记录学习,并没有深究,日后会补充
借鉴两篇博客:
- https://blog.csdn.net/weixin_44972008/article/details/113772348
- https://blog.csdn.net/qq_45632660/article/details/109823169