异步

时间函数、事件、AJAX:都是异步

AJAX（Asynchronous Javascript And XML）

指允许js脚本向服务器发起HTTP请求这个功能进行的一整套系统
技术：XHTML技术、CSS技术、DOM技术、XML技术、XSTL技术、XMLHttpRequest对象及javascript技术
AJAX的核心：实现与服务器的异步通信和局部刷新页面
发请求：
1. 地址栏
2. 超链接：跳转页面
3. 表单（提交）
4. 一些标签（例：link、script、img...）：请求资源
5. css的部分样式：请求资源

实现AJAX：

//拿到核心对象
let xhr =new (window.XMLHttpRequest||window.ActiveXobjece)("Microsoft.XMLHTTP");
//打开连接
xhr.open("get","url(交互地址)");//获取数据
//发送请求
xhr.send();//发送数据
//等待数据，并执行后续操作
xhr. onreadystatechange=function(){//接收数据
if(xhr.readyState===4&&((xhr.status>=200&&xhr.status<300||xhr.status==304)){//服务器完成数据处理
        console.log(JSON.parse(xhr.responseText));//获取返回的数据     
    }
}

mockjs

随机数据：

7大规则（适用于对象）
Random函数

正则

基本格式

  let data2 = Mock.mock({
      "list|40": [{
        "id|+1": 100,
        name: "@cname",
        "gender|1": ["男", "女"],
        county: "@county(ture)",
        phone: /1[3-9]\d{9}/
      }]
    }).list;
    console.log(data2);

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        <p>
            username:
            <input name=username type="text">
        </p>
        <p>
            password:
            <input name=password type="text">
        </p>
        <p>
            <input type="button" value=login>
        </p>
    </form>
    <script src="../../../util/tools.js"></script>
    <script src="../../../util/mock.js"></script>
    <script>
        const { ajax, toObj } = Tool;
        //1.7大规则（适用于对象）
        //2.Random函数
        //3.正则

        // let data = Mock.mock({
        //     "list|30": [{
        //         "id|+1": 100,
        //         "idCard":/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
        //         firstName: "@cfirst",
        //         lastName: "@clast",
        //         "gender|1":["男","女"],
        //         phone:/1[3-9]\d{9}/,
        //         fullName:function(){
        //             return this.firstName+this.lastName;
        //         }
        //     }]
        // }).list;

        // // console.log(Mock.Random.county(true));
        // console.log(data);
        //Mock.mock( rurl, rtype, function( options ) )
        Mock.mock(/getStudents/, "get", function ({ url }) {
            //studentmanagesystem/getStudents?username=zs&password=123
            const user = toObj(url.split("?")[1]);
            if (user.username === "zs" && user.password === "123") {
                return true;
            }
            return false;
        });

        "========================================================================";


        document.querySelector("input[type='button']").onclick = function () {
            const username = document.forms[0].username.value;
            const password = document.forms[0].password.value;
            ajax({
                url: "studentmanagesystem/getStudents",
                data: { username, password },
                success(data) {
                    alert(data);
                }
            });
        }

    </script>
</body>

</html>

posted @ 2020-06-28 15:52 这样那样阅读(88) 评论(0) 收藏举报

刷新页面返回顶部

异步

异步

AJAX（Asynchronous Javascript And XML）

mockjs

公告