模板引擎
模板引擎 ： 可以通过一些手段让模板拥有逻辑处理的能力。是后端赋予的；
常见的模板引擎 ： numjucks 、pug 、jade 、ejs smarty .....
ejs 模板引擎
nodejs里使用ejs
1.下载安装 npm i ejs
2.引入 ejs 模块
3.设置 ejs 模板引擎
4.渲染ejs模板 : ejs模板需要把html后缀改成ejs后缀；
ajax
Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式
异步的JavaScript
它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
XML
是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON
所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。
ajax 是什么？ async JavaScript and xml 异步的 js和 xml
ajax 通过异步传递 json或者 xml数据的，也是做前后端交互的。
form表单也可以传递数据，基于跳转 ，基于页面的跳转 ，有刷 。
ajax 无刷新传递数据；
输入用户名 校验用户名是否重复 。
无刷传递数据
一定需要保证 html运行的服务器和ajax请求的地址是同一个服务器
同一个服务器 ： 协议、域名、端口 都需要一致 ；
html运行的地址 ： http://localhost:8989/registry
通过 liveserver ： - - http://127.0.0.1:5500/day20/2.ajax%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/views/resitry.html
view in browser ：
file:///Users/yuweihai/Desktop/%E7%9B%AE%E5%BD%95/%E9%B8%BF%E8%92%99%E5%89%8D%E7%AB%AF/zz4101/day20/2.ajax%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/views/resitry.html
请求的地址 ： http://localhost:8989/checkusername
ajax的状态
ajax的状态值指，运行ajax时，无论是成功还是失败都要响应的步骤的几种状态。例如：尚未调用send()方法时的初始化前、正在发送请求、正在响应等，由ajax对象和服务器之间的交互所得。通过ajax.readyState获得 0~4 范围的一个状态值。
ajax状态码是值，ajax无论请求是否成功，由HTTP协议根据所提交的信息，服务器返回的http头信息代码，通过ajax.state属性来获得。
ajax状态值
ajax的 XMLHttpRequest 不是一次就完成的，而是经历过多种状态后获取的结果。这些状态分为5种：
0：(未初始化) 还没有调用open()方法。
1：(启动) 已经调用open()方法，但还没有调用send()方法。
2：(发送) 已经调用send()方法，但还没有接收到响应。
3：(接收) 已经接收到部分响应数据。
4：(完成) 已经接收到全部的响应数据，且可以在客户端使用了。
ajax状态码
在HTTP1.1协议下，HTTP状态码总共可分为5大类：
1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误无法或不能完成
5xx：服务器执行一个完全有效请求失败
状态码详细说明：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
ax 发送json数据
一、GET、POST请求区别：
1、GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
POST把提交的数据则放置在是HTTP包的包体中，通过request body传递参数。
2、GET请求在URL中传送的参数是有长度限制的，提交的数据最多只能是1024字节，理论上POST没有限制。
3、GET请求只能进行url编码（字符串类型），而POST支持多种编码方式。
ajax获取xml数据
平时使用response来获取服务端的响应数据；对于XML数据需要使用responseXML来获取。
客户端获取到的responseXML有着和document类似的获取标签元素对象的方法
从而可以从存在标签的响应数据中获取到被包裹在内的值
ajax请求超时和取消请求
express模拟请求接口
//server.js
//1、引入express
const express = require("express");
//2、创建应用对象
const app = express();
//3、创建路由规则
// request是对请求报文的封装
// response 是对响应报文的封装
// 请求超时
app.get("/delay", (request, response) => {
// 获取get请求的参数
console.log(request.query);
// 设置响应头 防止跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
setTimeout(() => {
response.send("请求超时，Hello Ajax!");
}, 3000);
});
// 取消请求
app.get("/cancel", (request, response) => {
// 获取get请求的参数
console.log(request.query);
// 设置响应头 防止跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
// 延时返回
setTimeout(() => {
response.send("取消请求，Hello Ajax!");
}, 5000);
});
// 重复请求问题
app.get("/pardon", (request, response) => {
// 获取get请求的参数
console.log(request.query);
// 设置响应头 防止跨域问题
response.setHeader("Access-Control-Allow-Origin", "*");
// 延时返回
setTimeout(() => {
response.send("重复请求，Hello Ajax!");
}, 2000);
});
// 4、监听端口启动服务
app.listen(8888, () => {
console.log("服务已经启动，8888端口监听中。。。");
});
### Ajax取消重复请求
- `html`部分
<div>
<button id="post">发起get请求</button>
<div id="con"></div>
</div>
- `js`文件部分
<script>
// 获取节点
const btn = document.getElementById("post");
const odiv = document.getElementById("con");
// 定义一个请求的变量
let xhr = null
// 是否有同一个请求正在发送的标识
let flag = false
// 绑定点击事件发起请求
btn.onclick = function () {
// 判断标识变量,如果有相同的请求正在发送就取消
if(flag){
xhr.abort()
}
xhr = new XMLHttpRequest();
flag = true
xhr.open("GET", "http://127.0.0.1:8888/pardon");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
flag = false
if (xhr.status == 200) {
// 处理结果
console.log("状态码", xhr.status); //状态码
console.log("状态字符串", xhr.statusText); //状态字符串
console.log("所有响应头", xhr.getAllResponseHeaders); //所有响应头
console.log("响应体", xhr.response); //响应体
odiv.innerHTML = xhr.response;
} else {
}
}
};
};
</script>
### 2、请求超时
- `html`部分
<div>
<button id="post">请求超时</button>
<div id="con"></div>
</div>
- `js`部分
<script>
// 获取节点
const btn = document.getElementById("post");
const odiv = document.getElementById("con");
// 绑定点击事件
btn.onclick = function () {
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8888/delay");
//设置超时时间 2S没有响应发出提示信息
xhr.timeout = 2000;
xhr.ontimeout = function () {
alert("请求超时，请稍后重试~");
};
// 网络异常问题,如断网
xhr.onerror = function(){
alert('您的网络不太好~')
}
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 处理结果
console.log("状态码", xhr.status); //状态码
console.log("状态字符串", xhr.statusText); //状态字符串
console.log("所有响应头", xhr.getAllResponseHeaders); //所有响应头
console.log("响应体", xhr.response); //响应体
odiv.innerHTML = xhr.response;
} else {
}
}
};
};
</script>
### 3、取消Ajax请求
- `html`部分
<div>
<button id="post">发起get请求</button>
<button id="cancel">取消请求</button>
<div id="con"></div>
</div>
<script>
// 获取节点
const btn = document.getElementById("post");
const cancel = document.getElementById("cancel");
const odiv = document.getElementById("con");
// 定义一个请求的变量
let xhr = null
// 绑定点击事件发起请求
btn.onclick = function () {
xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8888/cancel");
xhr.send();
};
cancel.onclick = function(){
console.log(11)
xhr.abort()
odiv.innerHTML = '请求已取消~'
}
</script>
ajax的get请求封装
使用基本五点
1.创建一个异步对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态的变化
5.处理返回的结果
基本格式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(ev) {
var but = document.querySelector("button");
but.onclick = function(ev1) {
// 1.创建一个异步对象
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("GET", "hello.txt?t="+(new Date().getTime()), true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function(ev2) {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
// console.log("发送请求数据成功");
console.log(xmlhttp.responseText);
} else {
console.log("发送请求数据失败");
}
}
}
// 5.处理返回的结果
}
}
</script>
</head>
<body>
<button type="button">发送请求</button>
</body>
</html>
Ajax封装
1.将请求数据的代码封装成一个js文件中的方法
function ajax(url, success, error) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("GET", url + "?t=" + (new Date().getTime()), true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function(ev2) {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304) {
// console.log("发送请求数据成功");
// console.log(xmlhttp.responseText);
success(xmlhttp);
} else {
// console.log("发送请求数据失败");
error(xmlhttp);
}
}
}
}
2.测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/ajax_ask.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(ev){
var $but = document.querySelector("button");
$but.onclick = function(){
ajax("hello.txt", function(xmlhttp){
//发送请求成功
console.log(xmlhttp.responseText);
}, function(xmlhttp){
//发送请求失败
console.log("请求失败");
});
}
}
</script>
</head>
<body>
<button type="button">发送请求</button>
</body>
</html>
