first commit

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/6-26ajax/1.html

@@ -0,0 +1,68 @@
+<!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>Document</title>
+</head>
+
+<body>
+    var data = ajax.responseText<br>
+
+    把字符串类型的对象数组转换真正的对象
+    console.log(typeof data);//typeof 判断是什么类型
+    console.log(JSON.parse(data))<br>
+
+    把对象转化为字符串
+    var a = { id: 1, name: '张三' }
+    console.log(JSON.stringify(a));<br>
+
+    php打印
+    echo $xx;
+    exit();
+
+    <ul>
+
+    </ul>
+</body>
+<script>
+    // 1.创建一个新的ajax对象
+    var ajax = new XMLHttpRequest//XML Http Request
+
+
+    // 2.传入后端地址（配置需要访问的后端地址，请求方式）
+    //ajax.open("GET", "http://127.0.0.1/index.php?id=1")
+    ajax.open("POST", "http://127.0.0.1/index.php")
+    var params = {
+        id: 10
+    }
+
+    ajax.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
+    //3.发送请求
+    //ajax.send()
+    ajax.send(JSON.stringify(params))
+
+
+    // 4.监听请求状态
+    // on(监听) ready(读取) state(状态) change(变化)
+    ajax.onreadystatechange = function () {
+        if (ajax.readyState == 4) {
+            if (ajax.status == 200) {
+                var data = JSON.parse(ajax.responseText)
+                console.log();
+                // 把resule里面的title插入到ul里面
+                data.resule.forEach(v => {
+                    document.querySelector("ul").innerHTML += `<li>${v.title}</li>`
+                });
+            } else {
+                alert("网络出错")
+            }
+
+
+        }
+    }
+</script>
+
+</html>

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/6-26ajax/27ajax/ajax.js

@@ -0,0 +1,83 @@
+class Ajax {
+
+    constructor() {
+        this.ajax = new XMLHttpRequest
+
+    }
+
+
+
+
+
+    //链式调用
+    num = 0
+    test() {
+        this.num += 1
+        return this //普通方法这里是this.num
+    }
+    test2() {
+        this.num += 100
+        return this.num
+    }
+
+
+
+
+
+
+
+
+
+
+    get(params) {
+        var str = ""
+        for (const key in params.data) {
+            console.log("key: ", key);
+            str += `&${key}=${params.data[key]}`
+        }
+        str = str.replace("&", "?")
+        console.log(`${params.url}${str}`);
+        this.ajax.open("GET", `${params.url}${str}`)
+        this.ajax.send();
+        this.readystatechange(params.success, params.error)
+
+    }
+
+
+    //Promise方法
+    get(params) {
+        return new Promise((success, error) => {
+            var str = ""
+            for (const key in params.data) {
+                console.log("key: ", key);
+                str += `&${key}=${params.data[key]}`
+            }
+            str = str.replace("&", "?")
+            console.log(`${params.url}${str}`);
+            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()

历届学生/font-end-nine/项目练习/学生项目/郑若怡/案例练习/上课练习/6-26ajax/27ajax/ajax封装.html

@@ -0,0 +1,76 @@
+<!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>
+    //普通方法
+    // ajax.test()
+    // //console.log(ajax.test2());
+    // var result = ajax.test2()
+    // console.log(result);
+
+    // 链式调用
+    var result = ajax.test().test2()
+    console.log(result);
+
+    //异步转同步  callback回调函数解决
+    console.log(1);
+    ajax.get({
+        url: 'http://127.0.0.1/index.php',
+        data: {
+            id: 1,
+            page: 2
+        },
+        header: {
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+        //Promise方法要写这四行  
+    }).then(res => {
+        console.log("2 :", res);
+    }).catch(err => {
+        console.log(err);
+    })
+    console.log(3);//同步的话打印顺序是123 异步顺序是132
+
+
+
+    //Promise方法不需要这两行
+
+    // success: (res) => {
+    //     console.log(res);
+    // },
+    // error: (err) => {
+
+    // }
+    //})
+
+    // promise
+    var a = async () => {
+        console.log("1");
+        var res = await ajax.get({
+            url: 'http://127.0.0.1/index.php',
+            data: {
+                id: 1,
+                page: 2
+            },
+            header: {
+                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+            },
+        })
+        console.log("2 :", res);
+        console.log(3);
+    }
+
+</script>
+
+</html>