bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
历届学生/front-end-team-10/每天课程/2023-03-03/ajaxV1.js Normal file
View File

@@ -0,0 +1,54 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
* url : 请求地址
*/
get(params) {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(params)
}
post(params) {
this.xhr.open("POST", `${params.url}`)
// POST 一般发送两种格式的数据
// 表单类型 FormData 数据格式 name=value&name=value
// json数据类型 数据格式就是 JSON.stringify() 后的字符串对象
// json 用的多
// var par = ""
// for (const key in params.data) {
// par += `&${key}=${params.data[key]}`
// }
// par = par.replace("&", "")
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(params)
}
ReadyState(params) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
params.success(data)
} else {
params.error(this.xhr)
}
}
}
}
}
var http = new Http();

58
历届学生/front-end-team-10/每天课程/2023-03-03/ajaxV2.js Normal file
View File

@@ -0,0 +1,58 @@
class Http {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
* url : 请求地址
*/
get(params) {
return new Promise((success, error) => {
var par = ""
for (const key in params.data) {
par += `&${key}=${params.data[key]}`
}
par = par.replace("&", "?")
this.xhr.open("GET", `${params.url}${par}`)
this.xhr.send()
this.ReadyState(success, error)
})
}
post(params) {
return new Promise((success, error) => {
this.xhr.open("POST", `${params.url}`)
// POST 一般发送两种格式的数据
// 表单类型 FormData 数据格式 name=value&name=value
// json数据类型 数据格式就是 JSON.stringify() 后的字符串对象
// json 用的多
// var par = ""
// for (const key in params.data) {
// par += `&${key}=${params.data[key]}`
// }
// par = par.replace("&", "")
this.xhr.setRequestHeader('Content-Type', 'application/json');
this.xhr.send(JSON.stringify(params.data))
this.ReadyState(success, error)
})
}
ReadyState(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var data = JSON.parse(this.xhr.response);
success(data)
} else {
error(this.xhr)
}
}
}
}
}
var http = new Http();

90
历届学生/front-end-team-10/每天课程/2023-03-03/ajax封装.html Normal file
View File

@@ -0,0 +1,90 @@
<!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>
<script src="./ajaxV2.js"></script>
</head>
<body>
</body>
<script>
// callback 回调函数
// 解决：获取异步代码返回值
// 问题：回调地狱
// http.post({
// url: 'http://127.0.0.1:3000/api/json/test_post',
// data: {
// id: 82,
// page: 1
// },
// success: (res) => {
// console.log(res);
// },
// error: (err) => {
// console.log("请求失败：",err);
// },
// })
// promise
// 主要获取异步编程返回值，避免和解决了回调函数的问题
// 让我们可以用同步的方式来编写异步代码
// 三种状态：
// 进行中 成功 失败
// 两种写法
// then catch 导致回调地狱
// async await 强制把异步转化为同步来执行
// promise 是异步还是同步？
// 1 promise 里面放的是异步代码
// 2 promise 里面的异步代码会被同步执行
// 3 then catch 是异步执行的
// 4 async await 同步执行
// http.get({
// url: 'http://127.0.0.1:3000/api/json/mechanismList',
// data: {
var getdata = async () => {
var result = await http.get({
url: 'http://127.0.0.1:3000/api/json/mechanismList',
data: { id: 82, page: 1 }
})
console.log(result);
}
getdata()
// async await
// a().b().c()
// 链式调用
// class a {
// test = 0;
// a1(){
// this.test = 1;
// return this;
// }
// a2(){
// this.test = 2
// return this;
// }
// a3(){
// this.test = 3
// }
// }
// var c = new a()
// c.a1().a2().a3()
// console.log(c.test);
</script>
</html>

89
历届学生/front-end-team-10/每天课程/2023-03-03/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!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>
<ul>
</ul>
</body>
<script>
// 1 拿出电话, 创建一个 ajax 类实例
var xhr = new XMLHttpRequest();
// 2 设置拨号的号码 设置请求方式和请求的地址
xhr.open("GET", "http://127.0.0.1/index.php")
// 3 拨打电话 发送请求
xhr.send()
// 4 10086 的语音提示 状态监听
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
console.log(data);
// console.log(data.result.list);
// data.result.list.forEach(v => {
// document.querySelector("ul").innerHTML += `
// <li>
// <div class="title">${v.title}</div>
// <img src="${v.img_src}" alt="">
// </li>
// `
// });
} else {
alert("当前网络不佳，请稍后再试！")
}
}
}
var a = {
id: 1,
name: '张三',
age: 18
}
var c = JSON.stringify(a)
console.log(c);
// console.log(window);
// xml -> json txt
// json 就是数组和对象的各种组合
// JSON.stringify 把对象或者数组转 string
// JSON.parse 把string 格式的对象，数组，转为对象数组
// var userLogin = {
// userName: '',
// userPwd: ''
// }
// var result = {
// status: 200,
// data: 'error'
// }
// var data = {
// title: '你好',
// newsArray: [
// { item: '新闻1' },
// { item: '新闻2' },
// { item: '新闻3' },
// ]
// }
</script>
</html>

71
历届学生/front-end-team-10/每天课程/2023-03-03/info.html Normal file
View File

@@ -0,0 +1,71 @@
<!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>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<div class="img">
</div>
</body>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", `http://127.0.0.1:3000/api/json/info?id=${query("id")}&quantity=${query("sl")}`)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
rendList(data)
} else {
alert("当前网络不佳，请稍后再试！")
}
}
}
}
function rendList(list) {
console.log("详情：", list);
list.result.forEach(v => {
$(".img").innerHTML += `
<img src="${v}" alt="">
`
});
}
getData()
function query(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
};
return null;
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
</script>
</html>

18
历届学生/front-end-team-10/每天课程/2023-03-03/jsonp.html Normal file
View File

@@ -0,0 +1,18 @@
<!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>
</body>
<script>
function getData(val) {
console.log("数据为：", val);
}
</script>
<script src="http://127.0.0.1/index.php?cb=getData"></script>
</html>

73
历届学生/front-end-team-10/每天课程/2023-03-03/案例.html Normal file
View File

@@ -0,0 +1,73 @@
<!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>
<ul>
</ul>
<button>下一页</button>
</body>
<script>
var page = 1;
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", `http://127.0.0.1:3000/api/json/mechanismList?id=82&page=${page}`)
xhr.send()
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.response);
rendList(data)
} else {
alert("当前网络不佳，请稍后再试！")
}
}
}
}
function rendList(list) {
console.log(list.result.data);
list.result.data.forEach(v => {
$("ul").innerHTML += `
<li>
<a href="./info.html?id=${v.id}&sl=${v.total}">
<div class="title">${v.title}</div>
<img src="${v.preview}" alt="">
</a>
</li>
`;
});
}
$("button").onclick = () => {
page += 1;
getData()
}
function $(className) {
return document.querySelector(className)
}
function _(className) {
return document.querySelectorAll(className)
}
getData()
</script>
</html>

88
历届学生/front-end-team-10/每天课程/2023-03-03/笔记.txt Normal file
View File

@@ -0,0 +1,88 @@
ajax（XML Http Request）
理解：是前后端数据交互的一种沟通方式（打电话）
官方：网页无刷新的一种数据交互方式
web网站开发模式：
1：服务端渲染
前端：10% ~ 30% 主要就是用html，css写页面，三四千
后端：90% ~ 70%
缺点：
1：开发速度慢，效率不平衡
2：代码冗余（屎山）
2：前后端分离
前端：50% ~ 60% html，css写页面，需要用js实现各种复杂功能和特效交互
|
沟通？ ajax
|
后端：50% ~ 40% 写代码后端代码，数据库，维护服务器，做安全
HTTP:
前后端数据通讯的方式
包含：
请求方式
GET 要数据的过程
http://www.1.com?name=刘兵&pwd=1234
POST 给数据的过程
PUT 更新数据的过程
DELETE 删除数据的过程
GET 和 POST 有什么差别？？
https://www.oschina.net/news/77354/http-get-post-different#:~:text=%E6%9C%80%E7%9B%B4%E8%A7%82%E7%9A%84%E5%8C%BA%E5%88%AB%E5%B0%B1%E6%98%AFGET%E6%8A%8A%E5%8F%82%E6%95%B0%E5%8C%85%E5%90%AB%E5%9C%A8URL%E4%B8%AD%EF%BC%8CPOST%E9%80%9A%E8%BF%87request%20body%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0%E3%80%82%20...,GET%E8%AF%B7%E6%B1%82%E4%BC%9A%E8%A2%AB%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%BB%E5%8A%A8cache%EF%BC%8C%E8%80%8CPOST%E4%B8%8D%E4%BC%9A%EF%BC%8C%E9%99%A4%E9%9D%9E%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE%E3%80%82%20GET%E8%AF%B7%E6%B1%82%E5%8F%AA%E8%83%BD%E8%BF%9B%E8%A1%8Curl%E7%BC%96%E7%A0%81%EF%BC%8C%E8%80%8CPOST%E6%94%AF%E6%8C%81%E5%A4%9A%E7%A7%8D%E7%BC%96%E7%A0%81%E6%96%B9%E5%BC%8F%E3%80%82%20GET%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0%E4%BC%9A%E8%A2%AB%E5%AE%8C%E6%95%B4%E4%BF%9D%E7%95%99%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E9%87%8C%EF%BC%8C%E8%80%8CPOST%E4%B8%AD%E7%9A%84%E5%8F%82%E6%95%B0%E4%B8%8D%E4%BC%9A%E8%A2%AB%E4%BF%9D%E7%95%99%E3%80%822016%E5%B9%B49%E6%9C%8822%E6%97%A5
请求状态 200 404
请求头（请求体） request
响应头（响应体） response
ajax 跨域（CORS）
偷偷请求别人家的数据接口
判断标准（同源策略）：
1：协议
2：域名
3：端口
http 协议默认端口：80
https 443
前端：http://www.abc.com
|
浏览器
|
后端：http://127.0.0.1:3000/index
解决跨域
1：cors
2：jsonp
把ajax请求伪装成 js 文件请求 (请求)
回调函数的方式，拿回数据（响应）
3：服务端代理
A(前端) ----> B后端
A(前端 我的) ---> C后端 （我的）
C后端（我的） ---> B后端（别人的）