旅游网站技术流程图,有没有专门做装修的网站,网站服务器有哪些类型,做网站需要知道哪些事情8.1、ajax简介及相关知识
8.1.1、原生ajax
8.1.1.1、AJAX 简介
AJAX 全称为 Asynchronous JavaScript And XML#xff0c;就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求#xff0c;最大的优势#xff1a;无刷新获取数据。 按需请求#xff0c;可…8.1、ajax简介及相关知识
8.1.1、原生ajax
8.1.1.1、AJAX 简介
AJAX 全称为 Asynchronous JavaScript And XML就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求最大的优势无刷新获取数据。 按需请求可以提高网站的性能
AJAX 不是新的编程语言而是一种将现有的标准组合在一起使用的新方式。
使用场景 注册账号核对输入是否符合设置要求发送ajax请求返回相关信息 京东、淘宝下拉加载更多的数据显示 鼠标移入显示新的页面数据 鼠标点击显示不同的页面切换数据 ··············
8.1.1.2 XML 简介
XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似不同的是 HTML 中都是预定义标签而 XML 中没有预定义标签 全都是自定义标签用来表示一些数据。
比如说我有一个学生数据
name 孙悟空 ; age 18 ; gender 男 ;
用 XML 表示
student name孙悟空/name age18/age gender男/gender
/student
现在已经被 JSON 取代了。
用 JSON 表示
{name:孙悟空,age:18,gender:男}
8.1.1.3 AJAX 的特点
AJAX 的优点
\1) 可以无需刷新页面而与服务器端进行通信。 速度很快
\2) 允许你根据用户事件来更新部分页面内容。 按需更新鼠标移入请求数据鼠标点击请求数据
AJAX 的缺点
\1) 没有浏览历史不能回退
\2) 存在跨域问题(同源)
\3) SEO 不友好
8.1.2、HTTP
HTTPhypertext transport protocol协议『超文本传输协议』协议详细规定了浏览器和万维网服务器之间互相通信的规则。约定, 规则
8.1.2.1、请求报文 重点关注格式与参数
请求行 请求类型 url路径部分 请求版本) POST /s?ieutf-8 HTTP/1.1
名字: 值
请求头 Host: bdqn.com
Cookie: namebdqn
Content-type: application/x-www-form-urlencoded /请求类型
User-Agent: chrome 83
请求空行
请求体get请求请求体为空post请求体可以不为空 usernameadminpasswordadmin 8.1.2.2、响应报文 response
响应行 协议版本 响应状态码
HTTP/1.1 200 OK
响应头
Content-Type: text/html;charsetutf-8 //响应类型描述
Content-length: 2048 //响应长度
Content-encoding: gzip //压缩方式
响应空行
响应体 返回的结果
html
head
/head
body
h1hello world/h1
/body
/html
8.1.2.3、常用状态码
404 找不到
403 被禁止
401 未授权
500 错误
200 正确ok
8.1.2.4、网站查看 8.1.3、node.js安装
Node.js — Run JavaScript Everywhere 安装网址
检测是否安装
在开始的位置点开输入cmd点击命令提示符在窗体里输入node -v出现版本信息
8.1.4、express框架
ajax发送请求需要一个服务端所以简单学习express
打开终端
npm init --yes 初始化
npm i express 安装express
npm list express 查看express的版本
创建express.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 端口监听中....);
});
启动express
在终端输入 node 文件名 如node express基本使用.js
在浏览器地址栏http://127.0.0.1:8000/可以显示响应文本
释放8000窗口ctrlC
8.1.5、nodemon安装
可以帮助自动重启express后台服务器
nodemon - npm
npm install -g nodemon
安装完毕重启severs.js
启动命令
nodemon severs.js 8.2、原生ajax**实现**
8.2.1、页面及服务器准备
8.2.1.1、页面准备
需求点击按钮发送请求将响应体结果返回在div中
button点击发送请求/button
div idresult/div 8.2.1.2、、服务器准备
新建server.js文件
//1. 引入express
const express require(express);//2. 创建应用对象
const app express();//3. 创建路由规则
// server 请求行的url有/server就回执行对应函数
app.get(/server, (request, response) {//设置响应头 设置允许跨域//Access-Control-Allow-Origin 响应头名字response.setHeader(Access-Control-Allow-Origin, *);//设置响应体response.send(你好ajax);
});
//4. 监听端口启动服务
app.listen(8000, () {console.log(服务已经启动, 8000 端口监听中....);
});
8.2.2、ajax基本请求
8.2.2.1、get请求
bodybutton点击发送请求/buttondiv idresult/divscript//获取button元素const btn document.querySelector(button);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?a100b200c300);//3. 发送xhr.send();//4. 事件绑定 处理服务端返回的结果// on 当....时候// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4// 0 表示初始化1表示open()发送完毕 2 表示send()发送完毕 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;} else {}}};};/script/body
8.2.2.2、post请求 headmeta charsetUTF-8 /titleAJAX POST 请求/titlestyle#result {width: 200px;height: 100px;border: solid 1px #903;}/style/headbodydiv idresult/divscript//获取元素对象const result document.getElementById(result);//绑定事件result.addEventListener(mouseover, function () {//1. 创建对象const xhr new XMLHttpRequest();//2. 初始化 设置类型与 URLxhr.open(POST, http://127.0.0.1:8000/server);//5、 设置请求头 xhr.setRequestHeader(头的名字, 头的值);// 用于做用户身份的校验// Content-Type 设置请求体内容类型// application/x-www-form-urlencoded 参数查询字符串类型固定写法xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);//6、 自定义请求头信息这个自定义的请求头需要在server.js中设置所有头信息都能接受xhr.setRequestHeader(name, bdqn);//3. 发送 可以传递参数设置请求体xhr.send(a100b200c300);// xhr.send(a:100b:200c:300);// xhr.send(1233211234567);//4. 事件绑定xhr.onreadystatechange function () {//判断if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {//处理服务端返回的结果result.innerHTML xhr.response;}}};});/script/body
server.js
//可以接收任意类型的请求
app.all(/server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);//响应头 所有类型的头信息都可以接受response.setHeader(Access-Control-Allow-Headers, *);//设置响应体response.send(HELLO AJAX POST);
});
8.2.2.3、JSON返回值 div idresult/divscriptconst result document.getElementById(result);//绑定键盘按下事件window.onkeydown function () {//1、发送请求const xhr new XMLHttpRequest();//设置响应体数据的类型 响应数据自动转成jsonxhr.responseType json;//2、初始化xhr.open(GET, http://127.0.0.1:8000/json-server);//3、发送xhr.send();//4、事件绑定xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {//这里返回的是一个字符串需要转成对象// console.log(xhr.response);// result.innerHTML xhr.response;// 1. 手动对数据转化// let data JSON.parse(xhr.response);// console.log(data);// result.innerHTML data.name;// 2. 自动转换console.log(xhr.response);result.innerHTML xhr.response.name;}}};};/script
severs.js
//JSON 响应
app.all(/json-server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);//响应头response.setHeader(Access-Control-Allow-Headers, *);//响应一个数据const data {name: bdqn,};//对对象进行字符串转换let str JSON.stringify(data);//设置响应体response.send(str);
});
8.2.3、IE缓存问题处理一般现在不需要额外处理
ie浏览器会对ajax请求的结果做一个缓存处理。产生的问题就是ajax的下一次请求ie浏览器就会走本地的缓存而不是服务器返回的最新数据这样对时效比较强的场景ajax请求就会影响我们的结果。
button点击发送请求/buttondiv idresult/divscriptconst btn document.querySelector(button);const result document.querySelector(#result);btn.addEventListener(click, function () {const xhr new XMLHttpRequest();// 为了解决ie浏览器缓存的问题在发送请求时添加参数当前时间戳xhr.open(GET, http://127.0.0.1:8000/ie?t Date.now());xhr.send();xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200 xhr.status 300) {result.innerHTML xhr.response;}}};});/script
server.js
//针对 IE 缓存
app.get(/ie, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);//设置响应体response.send(HELLO IE - 6);
});
8.2.4、超时与网络异常处理 button点击发送请求/buttondiv idresult/divscriptconst btn document.querySelector(button);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 server.js
//延时响应
app.all(/delay, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);// 允许任何头类型自带的还有自定义的response.setHeader(Access-Control-Allow-Headers, *);//为了测试服务器延迟响应到前台setTimeout(() {//设置响应体response.send(延时响应);}, 3000);
});
8.2.5、ajax取消请求
abort() 取消请求
bodybutton点击发送/buttonbutton点击取消/buttonscript//获取元素对象const btns document.querySelectorAll(button);let x null;btns[0].onclick function () {xhr new XMLHttpRequest();xhr.open(GET, http://127.0.0.1:8000/delay);xhr.send();};// abort() 取消请求btns[1].onclick function () {xhr.abort();};/script/body
8.2.6、重复请求问题
如果用户疯狂点击请求后台数据会导致服务器压力比较大。
处理办法发送请求前看之前有没有同样的请求有的话就把前面的请求去掉发送一个新的请求
bodybutton点击发送/buttonscript//获取元素对象const btns document.querySelectorAll(button);let x null;//1、标识变量是否正在发送AJAX请求let isSending false;btns[0].onclick function () {//判断标识变量if (isSending) x.abort(); // 如果正在发送, 则取消该请求, 创建一个新的请求x new XMLHttpRequest();//2、修改标识变量的值在发送ajax请求isSending true;x.open(GET, http://127.0.0.1:8000/delay);x.send();x.onreadystatechange function () {if (x.readyState 4) {//3、修改标识变量请求响应回来了标识变量为falseisSending false;}};};/script/body
8.3、JQuery中发送ajax请求
sever.js
//jQuery 服务
app.all(/jquery-server, (request, response) {//设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *);response.setHeader(Access-Control-Allow-Headers, *);// response.send(Hello jQuery AJAX);const data { name: bdqn };response.send(JSON.stringify(data));
});
8.3.1、get请求
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式xml, html, script, json, text, _default。
$(button).eq(0).click(function(){$.get(http://127.0.0.1:8000/jquery-server,{a:100, b:200}, function(data){console.log(data);},json);});
8.3.2、post请求
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式xml, html, script, json, text, _default。 $(button).eq(1).click(function(){$.post(http://127.0.0.1:8000/jquery-server, {a:100, b:200}, function(data){console.log(data);});});
8.3.3、通用方法ajax $(button).eq(2).click(function(){$.ajax({//urlurl: http://127.0.0.1:8000/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}});});
8.4、axios发送ajax请求 axios官网axios (v1.7.2) - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选 axios线上链接script srchttps://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js/script
headmeta charsetUTF-8 /titleaxios 发送 AJAX 请求/titlelink hrefhttps://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css relstylesheet /script srchttps://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.js/script/headbodydiv classcontainerh2 classpage-headeraxios发送AJAX请求/h2button classbtn btn-primaryGET/buttonbutton classbtn btn-dangerPOST/buttonbutton classbtn btn-info通用型方法ajax/button/divscriptvar btns document.querySelectorAll(button);// 设置基本路径axios.defaults.baseURL http://127.0.0.1:8000;// get请求btns[0].addEventListener(click, function () {axios.get(/axios-server, {//设置请求头headers: {id: 007,},}).then((response) {console.log(服务器返回的数据, response.data);},(error) {console.log(错误信息, error.message);});});// post请求btns[1].addEventListener(click, function () {axios.post(/axios-server,{username: admin,password: 123456,},{// urlparams: {id: 008,},// 请求头参数headers: {height: 180,weight: 180,},}).then((res) {console.log(res.data);}).catch((error) {console.log(error.message);});});// axios通用请求btns[2].addEventListener(click, async function () {try {let res await axios({method: POST, //默认是geturl: /axios-server1, //请求路径params: {//url参数id: 005,},headers: {a: 100,},data: {//请求体参数username: tom,password: 123abc,},});console.log(res.data);} catch (error) {console.log(error);}});/script/body
8.5、跨域
8.5.1、同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出是浏览器的一种安全策略。
同源 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
8.5.2、演示同源策略
server.js
const express require(express);const app express();app.get(/home, (request, response) {//响应一个页面 绝对路径,当前js文件所处的目录response.sendFile(__dirname /index.html);
});app.get(/data, (request, response) {response.send(用户数据);
});app.listen(8001, () {console.log(服务已经启动...);
});
index.html 跟serve.js同级
在网址栏直接输入 http://localhost:8001/home,不用vscode打开否则会出现跨域问题
bodyh1bdqn/h1button点击获取用户数据/buttonscriptconst 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
8.5.3 、如何解决跨域
8.5.3.1、 JSONP
1) JSONP 是什么
JSONP(JSON with Padding)是一个非官方的跨域解决方案纯粹凭借程序员的聪明才智开发出来只支持 get 请求。
2) JSONP 怎么工作的
在网页有一些标签天生具有跨域能力比如img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。
3jsonp的简单原理
jsonp原理.html
headmeta charsetUTF-8 /titleDocument/titlestyleh1 {width: 300px;height: 100px;border: 1px solid red;}/style/headbodyh1 idres/h1script// 提前定义好数据处理函数用于处理script请求回来的数据function handle(data) {const res document.getElementById(res);res.innerHTML data.name;}/script!--1、 script的正常使用引入外部资源--!-- script src./js/app.js/script --!--2、 script跨域请求数据 --script srchttp://127.0.0.1:8000/jsonp-server/script/body
app.js 演示script的正常用法引入外部资源
var data {name: jack,
};//1、 自定义一个handle的函数处理这个data数据放入到页面中
// function handle(data) {
// const res document.getElementById(res);
// res.innerHTML data.name;
// }
// 2、这个自定义函数放入到html页面中截止到这就是简单的引入
// 3、去sever.js文件中变形操作handle(data);
server.js
//jsonp服务
app.all(/jsonp-server, (request, response) {// 返回字符串这个字符串要写js能识别的语法js引擎要对返回内容进行解析// response.send(console.log(hello jsonp));// 返回数据处理函数const data {name: 北大青鸟,};//将数据转化为字符串let str JSON.stringify(data);//返回结果.end()不用设置响应头这个handle在页面中要提前定义response.end(handle(${str}));
});
4) JSONP 的案例使用
需求用户输入用户名失焦时发送ajax请求判断用户名是否存在存在将input变成红色框且显示用户名已存在
body用户名: input typetext idusernamep/pscript//获取 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-username;//3. 将 script 插入到文档中否则script不执行document.body.appendChild(script);}/script
/body
sever.js
//用户名检测是否存在
app.all(/check-username, (request, response) {const data {exist: 1, msg: 用户名已经存在,};//将数据转化为字符串let str JSON.stringify(data);//返回结果交给handle处理函数response.end(handle(${str}));
});
1) CORS 是什么
CORSCross-Origin Resource Sharing跨域资源共享。CORS 是官方的跨域解决方 案它的特点是不需要在客户端做任何特殊的操作完全在服务器中进行处理支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段允许服务器声明哪些 源站通过浏览器有权限访问哪些资源
2) CORS 怎么工作的
CORS 是通过设置一个响应头来告诉浏览器该请求允许跨域浏览器收到该响应 以后就会对响应放行。
3) CORS 的使用
sever.js
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);
});
bodybutton发送请求/buttondiv idresult/divscriptconst btn document.querySelector(button);btn.onclick function(){//1. 创建对象const x new XMLHttpRequest();//2. 初始化设置x.open(GET, http://127.0.0.1:8000/cors-server);//3. 发送x.send();//4. 绑定事件x.onreadystatechange function(){if(x.readyState 4){if(x.status 200 x.status 300){//输出响应体console.log(x.response);}}}}/script
/body
参考文档
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
8.5.3.3、搭建代理服务器
前端通过在前端框架中搭建临时代理服务器解决跨域问题
