first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/18课程/class18_2/课程/2020-12-28/ajax.html
+++ b/历届学生/18课程/class18_2/课程/2020-12-28/ajax.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ajax</title>
+</head>
+<body>
+
+
+<ul>
+    
+</ul>
+
+
+</body>
+<!--<script>-->
+<!--  function getData(res) {-->
+<!--    console.log(res)-->
+<!--  }-->
+<!--</script>-->
+<!--<script src="http://127.0.0.1:3000/api/json/info?call=getData"></script>-->
+
+<script>
+  // 拿出电话
+  var ajax = new XMLHttpRequest();
+  // 输入号码
+  ajax.open("GET", "http://127.0.0.1:3000/api/json/index")
+
+  // 拨打电话
+  ajax.send()
+
+  // 对拨号的状态进行监听
+  ajax.onreadystatechange = function () {
+    if (ajax.readyState == 4) {
+      if (ajax.status == 200) {
+        var result = JSON.parse(ajax.responseText)
+        // var a = { name: 1 };
+        // console.log(JSON.parse(JSON.stringify(a)))
+        console.log(result.data)
+        result.data.newest.list.forEach(function (v){
+          document.querySelector("ul").innerHTML +=
+            `<li>
+              <img src="${v.preview}" alt="">
+           </li>`
+        })
+      } else {
+        console.log("请求错误")
+      }
+
+    }
+  }
+
+</script>
+</html>
--- a/历届学生/18课程/class18_2/课程/2020-12-28/笔记.txt
+++ b/历届学生/18课程/class18_2/课程/2020-12-28/笔记.txt
@@ -0,0 +1,51 @@
+ajax: 是一种无刷新（局部刷新）的前后端数据交互的方式
+
+前端分离：
+
+前端
+|
+|
+ajax
+|
+|
+后端
+
+原生js里面就支持
+
+
+同源策略
+
+1：域名相同
+2：协议相同(http 80，https: 443)
+3：端口相同
+
+请求跨域：Access-Control-Allow-Origin
+
+这三个只要有一个不相同，那么你的请求就发不出去
+
+前端：http://localhost:63343/2020-12-28/ajax.html
+后端：http://127.0.0.1:3000/api/json/index
+
+三种解决：浏览器跨域
+
+1：后端设置cors请求头(Access-Control-Allow-Origin)来解决
+   由后端解决！！！
+	 header("Access-Control-Allow-Origin", "*");
+
+2：js资源文件请求绕过浏览器限制 （jsonp）不是ajax请求
+   回调
+
+   <script>
+     function getData(res) {
+       console.log(res)
+     }
+   </script>
+   <script src="http://127.0.0.1:3000/api/json/test?call=getData"></script>
+
+3：后端代理实现绕过浏览器
+
+A --- C
+
+A -- B
+B -- C
+