first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/zheng-yuqing/每天上课/2022-05-09/index.html
+++ b/历届学生/zheng-yuqing/每天上课/2022-05-09/index.html
@@ -0,0 +1,63 @@
+<!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>
+</head>
+
+<body>
+
+    <ul>
+
+    </ul>
+
+</body>
+<script>
+
+
+    // 1 拿出电话  创建一个新的 ajax对象
+    var ajax = new XMLHttpRequest();
+
+    // 2 输入手机号码  设置后端的接口（网址）地址
+    ajax.open("GET", "http://127.0.0.1/my.php")
+
+    // 3 点击拨号按钮  开始发送请求
+    ajax.send();
+
+    // 4 状态监听
+    ajax.onreadystatechange = () => {
+        if (ajax.readyState == 4) {
+
+            if (ajax.status == 200) {
+                var data = JSON.parse(ajax.response);
+
+                console.log(data);
+
+                // data.result.list.forEach(v => {
+                //     document.querySelector("ul").innerHTML += `
+                // <li>
+                //     <p>${v.title}</p>
+                //     <img src="${v.img_src}" alt="">
+                // </li>
+                // `
+                // });
+            } else {
+                alert("请求失败，稍后再试")
+            }
+        }
+    }
+
+</script>
+
+<!-- <script>
+    function getData(res) {
+        console.log(res);
+    }
+
+</script>
+<script src="http://127.0.0.1/index.php?callback=getData"></script> -->
+
+</html>
--- a/历届学生/zheng-yuqing/每天上课/2022-05-09/笔记.txt
+++ b/历届学生/zheng-yuqing/每天上课/2022-05-09/笔记.txt
@@ -0,0 +1,105 @@
+
+
+  ajax 
+
+   是什么？：是一种无刷新的前后端数据交换通讯的技术
+
+    XMLHttpRequest  第一代发送ajax的方法
+    fetch  下一代全新的发送ajax的方法
+
+   发送的是：HTTP 请求
+   四种请求方式：
+
+      GET   表示的是找服务器 要 资源的意图
+        name '刘兵'
+        age 18
+
+        是把参数放在网址后面，传给后端
+        http://a.com/index.php?name=刘兵&age=18
+
+      POST  表示的是 给 服务器 数据的意图  
+        是把参数放在请求体里面给后端
+        json（{ name: '刘兵', age: 18 }）  表单（name=刘兵&age=18）
+        
+      PUT   表示的是 更新 服务器 数据的意图
+      DELETE  表示的是 删除 服务器 数据的意图
+
+
+      OPTIONS  预检查请求
+
+   ajax数据格式：
+
+      xml
+      json  对象，数组，对象和数组的组合
+
+        JSON.stringify 将数组或对象转换为字符串格式
+        JSON.parse 将字符串格式的数组或对象转换为真正的数组或对象
+
+
+    ajax（http） 请求
+      请求头
+      响应头
+      请求体    
+
+    老旧：
+
+      服务端渲染
+
+      后端把网页的html直接做好后，交给浏览器来实现
+
+      （80%）后端：修改页面（20%），数据库，写功能和后端代码   10k
+
+      （20%）前端：写页面      3k
+
+
+      劣势：
+
+        项目里面混合了前后端多种语言，导致修改页面和增加功能的时候成本很高
+
+
+    现在：
+
+      前后端分离
+
+      （50%）后端：数据库，接口，后端代码   10k
+        |
+        |--- ajax（电话）
+        |
+      （50%）前端：写页面，写功能，做路由   10k
+
+
+
+  ajax 在使用的时候一般会遇到跨域错误
+
+
+    浏览器会对前后端的网址进行安全（同源策略CORS）检查  
+
+     1：协议
+     2：域名
+     3：端口
+
+
+     http   https  ws wss file
+
+    前端：http://b.com:9090/index 
+
+    后端：http://a.com:8080/api/json/index
+
+  什么叫 跨域 (绕过浏览器的同源策略)？
+  解决跨域：
+
+    1：后端设置cors允许跨域请求
+
+       主要实现：后端设置响应头字段  Access-Control-Allow-Origin  为 前端的访问地址
+
+【不用了】 2：jsonp  把ajax请求的地址放到script src中，变成js资源文件请求，通过callback回调拿回数据
+
+
+    3: 服务端代理
+
+      A  --->  B
+
+
+      A ----> C --->  B
+    
+