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>