（一）Mac端配置自己的服务器

先上服务器：
https://pan.baidu.com/s/15-vPTsuLMmY87C7bh3YVHw
app-macos中内置了一些接口，比如 /time 。这些接口也必须通过IP或域名去请求。接口地址127.0.0.1:3000/xxx
创建一个纯英文目录，目录中放app-macos，再新建一个public文件夹（名字不可改，文件夹相当于服务器）。
直接打开文件会提示错误，所以用终端配置⬇️。

配置方法

1.打开终端，进入到app-macos文件所在文件夹（比如桌面）。

~ lisiyi$ cd /Users/lisiyi/Desktop/

此时直接运行会提示没有权限：

Desktop lisiyi$ ./app-macos
-bash: ./app-macos: Permission denied

2.给此文件夹全部权限。

Desktop lisiyi$ chmod -R 777 ./

3.把app-macos拖进终端运行。出现端口号就成功：

Desktop lisiyi$ /Users/lisiyi/Desktop/app-macos
开始监听：3000

4.在浏览器打开地址http://127.0.0.1:3000/01.html，能运行说明成功。
涉及到 AJAX 操作的页面不能使用文件协议访问（不能使用VSCode选择用浏览器打开，必须使用127.0.0.1:3000/xxx的方式访问）

（二）AJAX

open(请求方式，请求地址)；
请求方式：GET；POST

代码举栗：

<script>
    // 实例化XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 请求设置信息
    xhr.open('GET','http://127.0.0.1:3000/time');
    // 发送请求
    xhr.send();
    // 请求响应过程结束，获取服务器响应的信息
    xhr.onload = function(){ //onload表示整个AJAX过程结束
        //使用responseText来接收服务器响应的数据
        document.getElementById('time').innerText = xhr.responseText;
    }
</script>

（三）GET方式的AJAX请求

1.get获取

一般用户从服务器获取数据。
open方法中的get不区分大小写。

代码举栗：

    <script>
        // 实例化XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // xhr.open('GET', 'http://127.0.0.1:3000/time');
        // 简化URL，斜线不能删除
        xhr.open('GET','/time');
        // 发送请求
        xhr.send()
        // 请求响应过程结束后接收服务器返回的数据
        xhr.onload() = function() {
            // 通过 xhr 的 responseText 获取到响应的响应体
            console.log(xhr.responseText);
        };
    </script>

2.GET请求携带参数

什么时候需要带请求参数

请求参数又叫做查询字符串
一般用于告诉服务器此次请求的详细目的，比如查询什么、删除哪条记录等

URL携带查询字符串

格式：http://www.baidu.com/s?q=word&sug=5017
查询字符串(querystring)：
- URL中问号后面携带的就是 get 请求传参的数据，叫做查询字符串
- 格式：q=word&sug=5017
- 查询字符串只适合传输少量数据

代码举栗：

    <script>
        var xhr = new XMLHttpRequest();
        //请求参数
        xhr.open('GET','/query-get?id=123&name=张三&age=20');
        xhr.send()
        xhr.onload() = function() {
            console.log(xhr.responseText); //打印一个字符串，不是对象
        };
    </script>

（三）AJAX发送POST请求

把数据提交给服务器
post把传递的数据封装在 HTTP 请求数据中，以键/值的形式出现，可以传输大量数据，对数据量没有限制，也不会显示在 URL 中。

POST方式要设置head头。
post 请求，必须调用setRequestHeader方法设置 Content-Type
- 请求头中的 Content-Type，告诉服务器发送过去的数据的格式
POST方式向服务器传递数据要放在send中。
- send方法的参数就是post方式发送给服务器的数据。（和get不同）

query-post向服务器发送什么数据，服务器就返回什么数据。

代码举栗：

<body>
    <input type="button" id="btn" value="请求">
    <script>
        document.getElementById('btn').onclick = function () {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/query-post');
            //设置head头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //传递参数
            xhr.send('id=123&name=lisi&age=20');
            xhr.onload() = function () {
                console.log(xhr.responseText);
            };
        }
    </script>
</body>

验证用户名案例：

服务器接口：/checkUser 可以检测用户名是否可用
默认 zhangsan lisi wangwu被注册

<body>
    <input type="text" id="txt_name">
    <span id="msg"></span>
    <script>
        // 当输入框失去焦点的时候发送AJAX请求到 /checkUser
        document.getElementById('txt_name').onblur = function () {
            // 获取输入的内容
            var n = this.value;
            var xhr = new XMLHttpRequest();
            // 调用open方法设置请求方式和接口地址
            xhr.open('POST', '/checkUser');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 调用send方法发送请求
            xhr.send('username=' + n);
            // 请求响应过程结束，获取服务器返回的内容。根据返回的内容设置提示
            xhr.onload = function () {
                var result = xhr.responseText;
                // console.log(result);
                if (result == 'true') {
                    document.getElementById('msg').innerHTML = '已被注册';
                }
                else if (result == 'false') {
                    document.getElementById('msg').innerHTML = '可以注册';
                }
            }
        }
    </script>
</body>