first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team/每天课程/2022-03-28/index.html
+++ b/历届学生/front-end-team/每天课程/2022-03-28/index.html
@@ -0,0 +1,88 @@
+<!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>
+    // ajax 是什么东西？
+    //  请求
+    //   请求头 寄件人信息
+    //   请求体  包裹（快递的物品）  数据格式： json 解析 （字符串转化为数组或对象的） （数组和对象的组合）   xml
+    //   响应头  收集人信息
+    //   
+    //    异步的前后端数据交互的一种方式
+    //   单向的通讯技术   前端   ---->   后端
+
+    // 1 拿出电话   创建一个ajax对象
+    var http = new XMLHttpRequest();
+
+    // 2 设置号码  设置ajax请求的后端网址
+    // 请求方式：
+    //   GET  找后端要数据
+    //     http://www.bmy.com/index?page=index&action=video
+
+    //   POST 给后端数据的过程
+    //     请求体里面
+
+    //   更多区别：https://www.cnblogs.com/logsharing/p/8448446.html
+
+
+    //   PUT  给数据 + 更新的操作
+    //   DELETE 给数据 + 删除的操作
+    http.open("GET", "http://127.0.0.1:3000/api/index/threeMeals")
+
+    // 3 拨号  发送ajax请求
+    http.send();
+
+
+    // json
+    http.onreadystatechange = function () {
+        if (http.readyState == 4) {
+            if (http.status == 200) {
+                var data = JSON.parse(http.response)
+                console.log(data);
+                data.result.forEach(function (item, index) {
+                    document.querySelector("ul").innerHTML += `<li>${item.title}</li>`
+                    console.log(item.title);
+                });
+            } else {
+                alert("网络请求错误")
+            }
+        }
+    }
+
+
+
+    // ajax 跨域
+    //  前端的地址： file:///C:/Users/bmy/Desktop/front-end-team/%E6%AF%8F%E5%A4%A9%E8%AF%BE%E7%A8%8B/2022-03-28/index.html
+    //  后端的地址： http://127.0.0.1:3000/api/index/threeMeals
+
+    //   同源策略 （CORS ）
+    //   从三方面进行安全检查：
+    //     协议   http (80)    https (443)
+    //     域名  
+    //     端口
+    //  什么是跨域？
+
+    //  跨域如何解决？有几种方式？
+    //   1：后端设置请求头 Access-Control-Allow-Origin ，告诉浏览器，放行这个前端
+    //   2：jsonp 将ajax请求伪装成 js 文件请求 + callback 回调函数 拿回数据
+    //   3: 服务端代理
+
+    //  A(我的前端)   ---  C（别人的后端）
+    //  A(我的前端)   ---  B (我的后端)
+    //   B -- C
+</script >
+
+</html >