first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/font-end-nine/每天上课/2022-06-26/ajax.js
+++ b/历届学生/font-end-nine/每天上课/2022-06-26/ajax.js
@@ -0,0 +1,51 @@
+class Ajax {
+    constructor() {
+        this.ajax = new XMLHttpRequest();
+    }
+
+    /**
+     * 
+     * @param {*} params 
+     * {
+     *   url: '',
+     *   data: {
+     *     id: 1,
+     *     page: 2
+     *   },
+     *   header: {
+     *     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+     *   }
+     * }
+     */
+    get(params) {
+        return new Promise((success, error) => {
+            var str = ""
+            for (const key in params.data) {
+                str += `&${key}=${params.data[key]}`
+            }
+
+            str = str.replace("&", "?")
+            this.ajax.open("GET", `${params.url}${str}`)
+            this.ajax.send()
+            this.readystatechange(success, error)
+        })
+    }
+
+    post() { }
+
+    readystatechange(success, error) {
+        this.ajax.onreadystatechange = () => {
+            if (this.ajax.readyState == 4) {
+                if (this.ajax.status == 200) {
+                    var data = JSON.parse(this.ajax.responseText)
+                    // console.log(data);
+                    success(data)
+                } else {
+                    error(this.ajax)
+                }
+            }
+        }
+    }
+}
+
+var ajax = new Ajax();
--- a/历届学生/font-end-nine/每天上课/2022-06-26/ajax封装.html
+++ b/历届学生/font-end-nine/每天上课/2022-06-26/ajax封装.html
@@ -0,0 +1,72 @@
+<!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>
+
+
+
+</body>
+
+<script src="./ajax.js"></script>
+<script>
+    // var result = ajax.test().test2()
+    // console.log(result);
+    // 异步 转 同步  callback 回调
+    ajax.get({
+        url: 'http://127.0.0.1/my.php',
+        data: {
+            id: 1,
+            page: 2
+        },
+        header: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+    }).then(res => {
+        console.log("2: ", res);
+    }).catch(err => {
+        console.log(err);
+    })
+
+
+    // 链式调用
+    // promise
+
+    // ajax 请求代码会被拆分成 3层： config 配置层，serve 请求中间层，ajax 封装层
+
+    var a =  async () => {
+        console.log("1");
+        
+        var res = await  ajax.index({ id: 1, page: 2 });
+
+        var res = await ajax.get({
+            url: 'http://127.0.0.1/my.php',
+            data: {
+                id: 1,
+                page: 2
+            },
+            header: {
+                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+            },
+        });
+
+        console.log("2: ", res);
+        console.log("3");
+
+    }
+
+
+    console.log("1111");
+    a()
+    console.log("3333");
+
+
+</script>
+
+</html>
--- a/历届学生/font-end-nine/每天上课/2022-06-26/index.html
+++ b/历届学生/font-end-nine/每天上课/2022-06-26/index.html
@@ -0,0 +1,64 @@
+<!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>js ajax学习</title>
+</head>
+
+<body>
+
+    <ul>
+
+    </ul>
+</body>
+
+<script>
+    // 1 创建一个新的ajax对象  拿出手机  xhr
+    //  fetch 全新的ajax请求方式
+
+    var ajax = new XMLHttpRequest()
+
+    // var form = new FormData();
+    // form.append("username", 1)
+    // var params = {
+    //     id : 1
+    // }
+    var a = 'id=1'
+
+
+    // 2 配置需要访问的后端地址，请求方式， 设置 号码 
+    ajax.open("POST", "http://127.0.0.1/my.php")
+    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
+    // 3 发送请求  拨号
+    ajax.send(a)
+
+    // 监听请求状态  
+    ajax.onreadystatechange = function () {
+
+        if (ajax.readyState == 4) {
+            if (ajax.status == 200) {
+                var data = JSON.parse(ajax.responseText)
+                console.log(data);
+                data.result.forEach(v => {
+                    document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
+                });
+                // stringify
+                // parse
+            } else {
+                alert("网络请求失败")
+            }
+        }
+    }
+
+
+    // function getData(res) {
+    //     console.log(res);
+    // }
+
+</script>
+
+<!-- <script src="http://127.0.0.1/index.php?cb=getData"></script> -->
+</html>
--- a/历届学生/font-end-nine/每天上课/2022-06-26/笔记.txt
+++ b/历届学生/font-end-nine/每天上课/2022-06-26/笔记.txt
@@ -0,0 +1,84 @@
+
+前后端数据交互的工具：
+
+   ajax
+
+   无刷新 的数据交互方式
+
+
+
+  http
+
+   请求头
+
+     存放着，发送此次请求的客户端的一些基本信息
+
+     例如：什么设备 user-agent，发送了多长的数据，在什么时间发送的，是否需要压缩数据来传输
+     content-length
+     https://www.cnblogs.com/smallzhen/p/14094928.html
+
+
+   响应头
+     存放着，响应此次请求的服务端的一些基本信息
+     https://blog.csdn.net/qq_30953791/article/details/114002893
+
+   请求体  
+
+
+   请求状态码
+    https://blog.csdn.net/m0_56227492/article/details/123101337
+
+
+   请求方式：
+   
+      GET   要
+      参数：
+        http://127.0.0.1/index.php?id=1&page=2&key=value
+
+        缺点：不是和提交一些敏感数据
+
+      POST  给
+       http://127.0.0.1/index.php
+       请求体里面
+         multipart/form-data; 上传文件
+         application/x-www-form-urlencoded;
+         application/json;
+        
+
+      PUT   更新
+
+      DELETE 删除
+
+      OPTIONS  预检查 留坑
+
+
+ajax 浏览器 同源策略
+
+绕过同源策略：跨域
+
+
+前端网址：
+http://127.0.0.1:8080/index.html
+
+后端接口地址
+http://192.168.31.1:9090/index.php
+
+协议  http 80  http 443
+域名
+端口
+
+三种解决方案：
+
+  1: 后端设置请求头，允许跨域  cors
+  2: jsonp 把ajax请求伪装成 js文件请求，绕过 同源策略 达到 发送请求 的目的，通过 回调函数 拿回数据
+  3: 服务端代理 
+   A 前端  --->  B 别人的后端 
+
+   A 前端  --->  C 自己的后端  ---> B 别人的后端 
+
+
+服务端渲染
+
+前后端分离   
+
+