first commit

历届学生/18课程/class18_2/项目/练习项目/周志威/ajax练习/练习1/ajax.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <ul></ul>
+    
+</body>
+<script>
+    // 使用 XMLHttpRequest 对象的 open() 方法可以建立一个 HTTP 请求
+    var ajax = new XMLHttpRequest();
+    ajax.open("GET" , "http://127.0.0.1:3000/api/json/index")
+    //建立连接后，可以使用 send() 方法发送请求
+    ajax.send()
+
+    ajax.onreadystatechange = function(){
+        if(ajax.readyState == 4){
+            if(ajax.status == 200){
+                var result = JSON.parse(ajax.responseText)
+                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>

历届学生/18课程/class18_2/项目/练习项目/周志威/ajax练习/练习2/ajax.js

@@ -0,0 +1,58 @@
+(function () {
+
+    class Ajax {
+
+        constructor() {
+            this.ajax = new XMLHttpRequest();
+        }
+
+        get(option) {
+            var params = ""
+            for (var key in option.data) {
+                params += `&${key}=${option.data[key]}`
+            }
+            params = params.replace("&", "?")
+            option.url = option.url + params
+
+            this.ajax.open("GET", option.url)
+            this.ajax.send()
+            this.readystatechange(option.success, option.error && option.error)
+        }
+
+        post(option) {
+            this.ajax.open("POST", option.url)
+            this.ajax.setRequestHeader("Content-Type", "application/json")
+            this.ajax.send(JSON.stringify(option.data))
+            this.readystatechange(option.success, option.error && option.error)
+        }
+
+        readystatechange(success, error) {
+            this.ajax.onreadystatechange = () => {
+                if (this.ajax.readyState == 4) {
+                    if (this.ajax.status == 200) {
+
+                        var result = typeof this.ajax.responseText == "string" ?
+                            JSON.parse(this.ajax.responseText) : this.ajax.responseText;
+                        switch (result.status) {
+                            case 200:
+                                success(result.data)
+                                break;
+                            case 500:
+                                error(result.msg)
+                                break;
+                            default:
+                        }
+
+
+                    } else {
+                        error("请求出错")
+                    }
+                }
+            }
+        }
+    }
+
+    window.$ajax = new Ajax()
+
+
+})()

历届学生/18课程/class18_2/项目/练习项目/周志威/ajax练习/练习2/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <ul>
+
+    </ul>
+</body>
+<script src="ajax.js"></script>
+<script>
+  $ajax.get({
+    url: 'http://127.0.0.1:3000/api/json/index',
+    data: {},
+    success: function (res) {
+      console.log(res);
+      res.newest.list.forEach(function (v) {
+        document.querySelector("ul").innerHTML +=
+          `
+           <li>
+                <a href="./info.html?id=${v.id}">
+                    <img src="${v.preview}" alt="">
+                    <p>${v.title}</p>
+                </a>
+            </li>
+          `
+      })
+    },
+    error: function (err) {
+      alert(err)
+    }
+  })
+</script>
+</html>

历届学生/18课程/class18_2/项目/练习项目/周志威/ajax练习/练习2/info.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>详情</title>
+</head>
+<body>
+
+<h2 class="title"></h2>
+<p class="source"></p>
+
+<ul>
+    <li>
+        <img src="" alt="">
+        <p></p>
+    </li>
+</ul>
+
+
+<button>下一页</button>
+
+</body>
+<script src="ajax.js"></script>
+<script>
+  var page = 1;
+
+  function getInfo() {
+    $ajax.get({
+      url: 'http://127.0.0.1:3000/api/json/info',
+      data: {
+        id: GetQueryString("id"),
+        page: page
+      },
+      success: function (res) {
+        document.querySelector(".title").innerText = res.title
+        document.querySelector(".source").innerText = res.source
+        res.list.forEach((v)=>{
+          document.querySelector("ul").innerHTML +=
+            `
+          <li>
+            <img src="${v.src}" alt="">
+            <p>${v.title}</p>
+          </li>
+          `
+        })
+      }
+    })
+  }
+
+  document.querySelector("button").onclick = function () {
+    page+=1;
+    getInfo()
+  }
+
+
+  getInfo()
+
+  function GetQueryString(name) {
+    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if(r!=null)return  unescape(r[2]); return null;
+  }
+
+</script>
+</html>