一. HTTP协议
1. URL
http://101.96.128.94:9999/img/index/banner1.png
结构：协议+服务器主机+端口+目录结构+资源名称
URL的完整结构
<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<flag>
详细结构的讲解
① <scheme>
协议，方案。以哪种方式传递资源
不区分大小写
| 常见协议 | 默认端口号 | 协议基本作用 |
|---|---|---|
| FTP | 21 | 文件上传，下载 |
| SSH | 22 | 安全的远程登录 |
| TLENT | 23 | 远程登录 |
| SMTP | 25 | 邮件传输 |
| DNS | 53 | 域名解析 |
| HTTP | 80 | 超文本传输 |
| POP3 | 110 | 邮件传输 |
| HTTPS | 443 | 加密传输的HTTPS |
②<user>:<pwd>
早期服务器管理员，会把用户名和密码写在地址栏中
这种方式非常不安全，现在不用了
③<host>
服务器主机名称
IP 127.0.0.1
域名 www.baidu.com
④<port>
端口号，计算机中每种应用提供服务的窗口
⑤<path>
资源在主机上存储的路径
⑥<params>
参数，跟踪状态参数 cookie session
⑦<query>
查询字符串
⑧<flag>
锚点
2. HTTP协议
HyperText Transfer Protocol 超文本传输协议
规范了数据是如何打包和传递的
3. web请求原理的详解
4. 报文/消息 message
Message,报文/消息，是在HTTP客户端与服务器之间传递的数据块，
HTTP协议规定，消息必须符合特定的格式才能被彼此理解。
1.Request Message
浏览器传送给服务器的消息
2.Response Messge
服务器传送给浏览器的消息
①Request Message 请求消息
请求起始行，请求头信息的第一行
GET 请求方法
HTTP/1.1 协议版本号
Host: www.tmooc.cn 请求的url
http原生的请求方法：
get 参数显示在查询字符串里
2kb上限
req.query
跟服务器要数据的时候使用
没有请求主体
post 参数在formdata
有请求主体
把数据传递给服务器的时候
req.body
put 往服务器上放文件
delete 从服务器上删文件
option 预请求
Restful Api规则的请求
get 所有的查询模块
没有请求主体
后台 req.params
post 新增的模块
有请求主体
req.body
put 修改模块
有请求主体
req.body
delete 删除模块
没有请求主体
req.params
请求头信息
Host: www.tmooc.cn 浏览器告诉服务器，要访问的主机是谁
Connection: keep-alive 浏览器告诉服务器，请开启持久连接
User-Agent: Mozilla 浏览器告诉服务器，当前浏览器的版本号和系统信息
Accept-Encoding: gzip 浏览器告诉服务器，我这个浏览器可以接收的压缩文件类型
Accept-Language: zh-CN 浏览器告诉服务器，我当前浏览器能够接收的自然语言的类型
Referer:http://www.tmooc.cn/ 浏览器告诉服务器，当前请求来自于哪个页面
请求主体 formdata
②Response Messge
响应起始行
HTTP/1.1 协议版本号
200 响应状态码
OK 对响应状态码简短解释---原因短句
响应头信息
Connection: keep-alive 服务器告诉浏览器，已经开启持久连接
Date: Mon, 31 Aug 2020 06:28:28 GMT 服务器告诉浏览器，响应的具体时间
Content-Type: text/html 服务器告诉浏览器，响应主体的数据格式
响应主体
服务器传送给浏览器的数据
5. 缓存
客户端将服务器响应回来的数据进行自动保存，当再一次访问同一个url时，直接使用保存好的数据，而不去连接服务器。
节省客户端流量
减少服务器端压力
6. HTTP的优化
减少连接的创建次数----开启持久连接
减少请求次数----------缓存
提高服务器运行速度（硬件提升/服务器集群）
尽可能减少响应数据的长度 res.send(“1”)
7. 安全的http协议
https:// 端口443
SSL：为数据通信提供安全支持
1.客户端发送请求---->SSL层加密---->服务器接收到加密文件---->在SSL层解密，获取明文
2.服务器发送响应---->SSL层加密---->浏览器接收到加密文件---->在SSL层解密，获取明文
二. DOM操作
form提交请求，自动收集整理数据(有name属性)
使用ajax就不用form，直接使用input控件，失去自动收集整理数据的能力
需要手写代码收集数据
document object Model 文档对象模型
获取html元素对象，再通过对象获取修改这个元素值，属性，内容。结论：使用dom可以动态用js修改获取元素的值，内容，属性。
js把html文档封装进了一个对象，document对象，
1.我们直接使用使用document调用方法，获取元素对象
2.通过元素对象，获取用户填写的数据
1. 获取input中的数据
1.input元素添加id，不用name
2.通过id获取input对象，存入obj_input
var obj_input=document.getElementById("input的id");
3.使用input对象，获取用户填入的值
var str=obj_input.value;
4.给input设置值，改变页面上input中的值
obj_input.value="..........."
2. 双标签内容区域的数据
1.给双标签添加id
2.使用document.getElementById("双标签id");获取双标签对象
3.获取双标签内容区域
var str=obj_div.innerHTML;
4.设置双标签内容区域
obj_div.innerHTML="........"
3. 代码优化
ES6 规定可以使用元素的id值，直接当做元素对象进行操作
4. 事件
通过用户在页面上的行为操作，来激发js的方式
onclick="" 用户在页面单击这元素，会激发事件，会调用双引号中的js
onload="" 页面加载事件，一个页面只要加载，就会调用js
onload必须写在body标签中
onblur="" 焦点移除事件
onfocus="" 获取焦点事件
三. AJAX
1. 同步Synchronous
在一个任务进行的过程中，不能开启别的任务
同步访问，浏览器在向服务器发送请求的时候，浏览器只能等待服务器的响应，不能做其他任何事
出现场合
1.浏览器地址栏输入url，就是同步
2.a标签跳转
3.form表单
2. 异步Asynchronous
多个任务可以同时进行
异步访问，浏览器在向服务器发送请求的时候，浏览器上可以做其他操作
出现场合
1.用户名重复的验证
2.百度的搜索联想
3. AJAX
Asynchronous javascript and xml ajax
本质，使用js提供的异步对象 XMLHttpRequest
异步的向服务器发送请求
并接收响应
4. 使用ajax
①创建异步对象xhr
var xhr=new XMLHttpRequest(); 准备好xhr对象，在后面被使用
②创建请求
xhr.open("请求方法","url",isAsy);
isAsy:要不要使用异步的方式发送 true 异步 false 同步
③发送请求
xhr.send(请求主体)
如果使用get/delete方法，没有请求主体时，可以不填，或者填xhr.send(null)；
如果使用post/put方法，有请求主体，xhr.send(formdata).
④接收响应数据
xhr.readyState 保存着xhr的请求状态，取值5个
0 请求尚未初始化
1 已经打开服务器连接，请求正在发送
2 开始接收响应头信息
3 开始接收响应主体
4 响应主体接收完毕
xhr.status 保存着响应状态码
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var r=xhr.responseText;
if(r==0){
d1.innerHTML="用户名或密码错误";
}else{
d1.innerHTML="登录成功";
}
}
}
案例
项目结构
publuc---静态资源文件夹
pro_login.html
pro_reg,html
pro_search.html
pro_userlist.html
router---路由模块文件夹
pro.js
app.js---服务器主模块
poo.js---连接池模块
app.js
const express = require("express");
const proRouter = require("./router/pro.js");
const bodyParser = require("body-parser");
const app = express();
app.listen(8080);
app.use(express.static("./public"));
app.use(bodyParser.urlencoded({extended:false}));
app.use("/pro",proRouter);
pool.js
const mysql = require("mysql");
const pool = mysql.createPool({
host:'127.0.0.1',
port:'3306',
user:'root',
password:'',
database:'xz',
connectionLimit:20
});
module.exports = pool;
router/pro.js
const express = require("express");
const pool = require("../pool.js");
const router = express.Router();
//用户登录
router.get("/v1/login/:uname&:upwd", (req, res) => {
let uname = req.params.uname;
let upwd = req.params.upwd;
let sql = "select * from xz_user where uname=? and upwd=?";
pool.query(sql, [uname, upwd], (err, result) => {
if (err) throw err;
if (result.length == 0) {
res.send("0");
} else {
res.send("1");
};
});
});
//用户列表
router.get("/v1/list", (req, res) => {
let sql = "select * from xz_user";
pool.query(sql, (err, result) => {
if (err) throw err;
res.send(result);
});
});
//用户注册
router.post("/v1/reg", (req, res) => {
let obj = req.body;
let sql = "insert into xz_user set ?";
pool.query(sql, [obj], (err, result) => {
if (err) throw err;
if (result.affectedRows == 1) {
res.send("1");
} else {
res.send("0");
}
});
});
//删除用户
router.delete("/v1/del/:uid", (req, res) => {
let uid = req.params.uid;
let sql = "delete from xz_user where uid=?";
pool.query(sql, [uid], (err, result) => {
if (err) throw err;
if (result.affectedRows == 1) {
res.send("1");
} else {
res.send("0");
}
});
});
//根据uid查询用户信息
router.get("/v1/search/:uid", (req, res) => {
let uid = req.params.uid;
let sql = "select * from xz_user where uid=?";
pool.query(sql, [uid], (err, result) => {
if (err) throw err;
if (result.length > 0) {
res.send(result);
} else {
res.send("0");
}
});
});
//修改用户信息
router.put("/v1/update", (req, res) => {
let obj = req.body;
let sql = "update xz_user set ? where uid=?";
pool.query(sql, [obj, obj.uid], (err, result) => {
if (err) throw err;
if (result.affectedRows > 0) {
res.send("1");
} else {
res.send("0");
}
});
});
module.exports = router;
public/pro_login.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>Document</title>
</head>
<body>
<h2>用户登录</h2>
用户名: <input type="text" id="uname"><br>
密码: <input type="text" id="upwd"><br>
<button id="btn">登录</button>
<script>
btn.addEventListener("click", function () {
if (!uname.value) {
alert("用户名不能为空");
return;
}
if (!upwd.value) {
alert("密码不能为空");
return;
}
let xhr = new XMLHttpRequest();
xhr.open("get", `/pro/v1/login/${uname.value}&${upwd.value}`);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == 1) {
alert("登录成功");
location.href = "pro_userlist.html";
} else {
alert("登录失败");
}
}
}
});
</script>
</body>
</html>
public/pro_reg.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>Document</title>
</head>
<body>
<h2>用户注册</h2>
用户名: <input type="text" id="uname"><br>
密码: <input type="password" id="upwd"><br>
邮箱： <input type="text" id="email"><br>
电话： <input type="text" id="phone"><br>
<button id="btn">注册</button>
<script>
btn.addEventListener("click", function () {
if (!uname.value || !upwd.value || !email.value || !phone.value) {
alert("请填写完整信息");
return;
}
let xhr = new XMLHttpRequest();
xhr.open("post", "/pro/v1/reg");
let formdata = `uname=${uname.value}&upwd=${upwd.value}&email=${email.value}&phone=${phone.value}`;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let result = xhr.responseText;
if(result == 1) {
alert("注册成功");
location.href="/pro_userlist.html";
}else{
alert("注册失败");
}
}
}
});
</script>
</body>
</html>
public/userlist.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>Document</title>
</head>
<body>
<h2>用户列表</h2>
<div id="d1"></div>
</body>
<script>
onload = function () {
let xhr = new XMLHttpRequest();
xhr.open("get", "/pro/v1/list");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let arr = JSON.parse(xhr.responseText);
let htmlStr = `
<table border="1px solid black">
<tr>
<td>用户名</td>
<td>邮箱</td>
<td>电话</td>
<td>姓名</td>
<td>性别</td>
<td>删除</td>
<td>修改</td>
</tr>
`;
for (let obj of arr) {
htmlStr += `
<tr>
<td>${obj.uname}</td>
<td>${obj.email}</td>
<td>${obj.phone}</td>
<td>${obj.user_name}</td>
<td>${obj.gender == 1 ? "男" : obj.gender == 0 ? "女" : "未填写"}</td>
<td><a href="javascript:del(${obj.uid})">删除</a></td>
<td><a href="/pro_search.html?uid=${obj.uid}">修改</a></td>
</tr>
`;
}
htmlStr += ` </table>`;
d1.innerHTML = htmlStr;
}
};
};
function del(uid) {
let xhr = new XMLHttpRequest();
xhr.open("delete", "/pro/v1/del/" + uid);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == 1) {
alert("删除成功");
} else {
alert("删除失败");
}
location.href = "/pro_userlist.html";
}
}
}
</script>
</html>
public/search.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>Document</title>
</head>
<body>
用户名:<input type="text" id="uname"><br>
邮箱:<input type="text" id="email"><br>
电话: <input type="text" id="phone"><br>
姓名: <input type="text" id="user_name"><br>
性别: <input type="radio" name="gender" id="man">男
<input type="radio" name="gender" id="woman">女
<input type="radio" name="gender" id="unk">保密 <br>
<button id="btn">修改</button>
<script>
function search() {
// 获取地址栏中的查询字符串中uid
let obj = new URLSearchParams(location.search);
var uid = obj.get("uid");
let xhr = new XMLHttpRequest();
xhr.open("get", `/pro/v1/search/${uid}`, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let r = xhr.responseText;
if (r == 0) {
alert("查无此人");
} else {
var arr = JSON.parse(r);
console.log(arr[0])
uname.value = arr[0].uname;
email.value = arr[0].email;
phone.value = arr[0].phone;
user_name.value = arr[0].user_name;
if (arr[0].gender == 1) {
man.checked = true;
} else if (arr[0].gender == 0) {
woman.checked = truel;
} else {
unk.checked = true;
}
}
}
};
}
onload = search;
//
btn.addEventListener("click", function () {
//获取所有的数据
let uid = new URLSearchParams(location.search).get("uid");
let _uname = uname.value;
let _email = email.value;
let _phone = phone.value;
let _user_name = user_name.value;
let _gender = -1;
if (man.checked) {
_gender = 1;
} else if (woman.checked) {
_gender = 0;
} else {
_gender = -1;
}
let xhr = new XMLHttpRequest();
xhr.open("put", "/pro/v1/update", true);
let formdata = `uid=${uid}&uname=${_uname}&email=${_email}&phone=${_phone}&user_name=${_user_name}&gender=${_gender}`;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let r = xhr.responseText;
if (r = 1) {
alert("修改成功");
location.href = "/pro_userlist.html";
} else {
alert("修改失败");
}
}
};
});
</script>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
