关于ajax:Ajax获取node服务器数据

1. 筹备

因为是要将服务器获取的数据放在网页中 所以说对页面的渲染是必要的 这里我筹备的是 art-template 模板

2. 服务器的筹备

服务器要筹备好渲染到页面的数据

3. 页面的操作

这里我做的的是一个搜寻框提醒性能 解说都在代码正文中
服务器代码如下

// 输入框文字提醒
app.get("/searchAutoPrompt", (req, res) => {
  // 搜寻关键字
  const key = req.query.key;
  // 提醒文字列表
  const list = ["百度", "百度官网", "百度游戏", "百度网盘"];
  // 搜寻后果 filter 是一个遍历的函数  includes（key）是但凡字符串含有 key 都返回
  let result = list.filter((item) => item.includes(key));
  // 将查问后果返回给客户端
  res.send(result);
});

页面代码：
上面的代码我用了一个封装好的 Ajax 函数
代码如下

function ajax (options) {
    // 默认值
    var defaults = {
        type: 'get',
        url: '',
        async: true,
        data: {},
        header: {'Content-Type': 'application/x-www-form-urlencoded'},
        success: function () {},
        error: function () {}
    }
    // 应用用户传递的参数替换默认值参数
    Object.assign(defaults, options);
    // 创立 ajax 对象
    var xhr = new XMLHttpRequest();
    // 参数拼接变量
    var params = '';
    // 循环参数
    for (var attr in defaults.data) {
        // 参数拼接
        params += attr + '=' + defaults.data[attr] + '&';
        // 去掉参数中最初一个 &
        params = params.substr(0, params.length-1)
    }
    // 如果申请形式为 get
    if (defaults.type == 'get') {
        // 将参数拼接在 url 地址的前面
        defaults.url += '?' + params;
    }

    // 配置 ajax 申请
    xhr.open(defaults.type, defaults.url, defaults.async);
    // 如果申请形式为 post
    if (defaults.type == 'post') {
        // 设置申请头
        xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
        // 如果想服务器端传递的参数类型为 json
        if (defaults.header['Content-Type'] == 'application/json') {
            // 将 json 对象转换为 json 字符串
            xhr.send(JSON.stringify(defaults.data))
        }else {
            // 发送申请
            xhr.send(params);
        }
    } else {xhr.send();
    }
    // 申请加载实现
    xhr.onload = function () {
        // 获取服务器端返回数据的类型
        var contentType = xhr.getResponseHeader('content-type');
        // 获取服务器端返回的响应数据
        var responseText = xhr.responseText;
        // 如果服务器端返回的数据是 json 数据类型
        if (contentType.includes('application/json')) {
            // 将 json 字符串转换为 json 对象
            responseText = JSON.parse(responseText);
        }
        // 如果申请胜利
        if (xhr.status == 200) {
            // 调用胜利回调函数, 并且将服务器端返回的后果传递给胜利回调函数
            defaults.success(responseText, xhr);
        } else {
            // 调用失败回调函数并且将 xhr 对象传递给回调函数
            defaults.error(responseText, xhr);
        } 
    }
    // 当网络中断时
    xhr.onerror = function () {
        // 调用失败回调函数并且将 xhr 对象传递给回调函数
        defaults.error(xhr);
    }
}


<script src="/js/ajax.js"></script>
<script src="/js/template-web.js"></script>
<script type="text/html" id="tpl">
    {{each result}}
        <li class="list-group-item">{{$value}}</li>
    {{/each}}
</script>
<script>
    // 获取搜寻框
    var searchInp = document.getElementById('search');
    // 获取提醒文字的寄存容器
    var listBox = document.getElementById('list-box');
    // 这里用定时器是为了优化 定时向服务器发送申请  优化了对服务器的压力
    // 存储定时器的变量
    var timer = null;
    // 当用户在文本框中输出的时候触发
    searchInp.oninput = function () {
        // 革除上一次开启的定时器
        clearTimeout(timer);
        // 获取用户输出的内容
        var key = this.value;
        // 如果用户没有在搜寻框中输出内容
        if (key.trim().length == 0) {
            // 将提醒下拉框暗藏掉
            listBox.style.display = 'none';
            // 阻止程序向下执行
            return;
        }

        // 开启定时器 让申请提早发送
        timer = setTimeout(function () {
            // 向服务器端发送申请
            // 向服务器端索取和用户输出关键字相干的内容
            ajax({
                type: 'get',
                url: 'http://localhost:3000/searchAutoPrompt',
                data: {key: key},
                success: function (result) {
                    // 应用模板引擎拼接字符串
                    var html = template('tpl', {result: result});
                    // 将拼接好的字符串显示在页面中
                    listBox.innerHTML = html;
                    // 显示 ul 容器
                    listBox.style.display = 'block';
                }
            })
        }, 800)
        
    }
</script>