一個動態網站一定離不開網絡請求。現階段web實現網絡請求方案中最主要技術就是ajax了，這篇博客面向初入web前端的小夥伴，介紹如何使用ajax發送和獲取網絡請求，由於面向初學者，該博客未使用任何js框架和庫（可能會用到bootstrap，這個UI庫就暫且不算做js庫了），我也會盡量避免使用ES6語法，使用的技術棧只有原生js和nodejs（exress），本人菜雞一隻，如果有不對的地方，還請大佬留言指教。

使用nodejs搭建一個web服務器（非必會，但必寫）

因爲篇幅原因，這裏不會具體講解nodejs的使用，但是重要的部分我會說明。不會nodejs的小夥伴可以直接複製代碼，不用理解爲什麼，或者去github上獲取代碼。

0. 首先你需要有nodejs和npm環境，（一般裝了node，npm就已經裝好了）

1. 創建一個文件夾，進入，創建server文件夾，進入

2. 輸入：

npm init

然後一直回車（這裏項目名稱可能通不過如果你的文件夾有中文或其他字符，你要手動輸入項目名稱）

3. 輸入：

npm install --save express

4. 在server目錄下創建一個public目錄，該目錄將作爲我們的靜態資源目錄

5. 在server目錄下創建一個app.js文件，該文件將作爲nodejs的入口文件（如果比較複雜，可能會採用MVC模式）

到目前爲止，我們的目錄結構如下

6. 打開app.js，寫如下代碼

/**
 * Created by zhouxinyu on 2017/9/27.
 */
var express = require('express');
var app = express();

// 相當於將public目錄靜態成了一個web靜態資源目錄
app.use(express.static('./public'));

// 監聽本機3000端口
app.listen(3000, function () {
    console.log('server running at 127.0.0.1:3000');
});

打開控制檯，進入server目錄，輸入

node app.js

我們的服務器就跑起來了

開始寫前臺網絡請求（必會，必寫）

1. 在public目錄下新建01.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<!--   這是bootstrap的進度條，該進度條的樣式主要由style="width: 60%;"和60%來控制   -->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
    </div>
</div>

</body>
</html>

這裏使用了bootstrap的進度條。

打開 http://127.0.0.1:3000/01.html 我們就能看見我們的網頁了

2. 這裏的數據是靜態的的，我們現在希望動態的從服務器獲取數據，填入進度條中，我們就使用ajax發送get請求來獲取

Ajax 的核心是XMLHTTPRequest對象，具體的api可以找教程，或者直接使用jquery或其他框架封裝好的api，我這裏主要是實戰，便於大家理解具體流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<!--   這是bootstrap的進度條，該進度條的樣式主要由style="width: 60%;"和60%來控制   -->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
    </div>
</div>

</body>
<script>
    window.onload = function () {  // 頁面加載完後執行

        var xhr = new XMLHttpRequest();  // 創建一個XMLHTTPRequest對象（這裏不做兼容性處理）

        xhr.open('get', '/getprogress', true);  // 啓動一個get請求，請求的路徑是 127.0.0.1:3000/getprogress ，並且是異步發送數據
        xhr.send(null);   // 我們是獲取數據，所以這裏我們選擇不發送數據

        /**
         * 發送完成後我們需要接受來自服務器返回的數據
         * 由於是異步發送數據，我們並不知道何時能夠得到響應，何時能獲取到數據
         * JavaScript有一個很不錯的機制，叫做readyState，他有幾個值，分別代表這次網絡請求的不同狀態，而每次狀態改變，readyState的值就會發生改變，可取值有：
         * 0： 尚未調用open
         * 1： 尚未調用send
         * 2： 尚未接收到響應
         * 3： 已經接受到部分數據
         * 4： 已經接受了全部數據
         * 每次readyState改變，都會觸發一次readystatechange事件，我們通過onreadystatechange事件處理程序來檢測這次網絡請求進行到了哪一步，便於做響應處理
         */
        xhr.onreadystatechange = function () {   // 我們只需要檢測數據是不是接受完即可，如果接受完了我們就將數據填入DOM中
            if(xhr.readyState === 4) {  // 如果readyState是4，就代表已經接受了全部數據，我們先打印一下數據
                console.log(xhr.responseText);
            } else {
                console.log('readyState的值不是4，數據沒有獲取完');
            }
        }
    }
</script>
</html>

到這裏，最簡單的發送ajax的前臺代碼已經完成了，這裏我沒有做兼容性處理，也沒有判斷狀態碼。感興趣的小夥伴可以自行學習

服務端接收請求以及響應客戶端請求（非必會，但必寫）

/**
 * Created by zhouxinyu on 2017/9/27.
 */
var express = require('express');
var app = express();

// 相當於將public目錄靜態成了一個web靜態資源目錄
app.use(express.static('./public'));

// 服務端接收到來自127.0.0.1:3000/getprogress的請求後，直接返回進度
app.get('/getprogress', function (req, res) {
    /**
     * 這一個json就是進度的數據，code爲 0 ，相當於這次請求的權限什麼的都正確，不理解可忽略
     * data裏面是需要返回的具體數據
     */
    res.json({        
        code: 0,
        data: {
            progress: 80
        }
    })
});

// 監聽本機3000端口
app.listen(3000, function () {
    console.log('server running at 127.0.0.1:3000');
});

重啓服務器，刷新頁面，如果沒錯的話，應該就會打印出服務器端的數據了

完成前臺的數據插入（必會，必寫）

我們先將進度條初始化爲0：

<!--   這是bootstrap的進度條，該進度條的樣式主要由style="width: 60%;"和60%來控制   -->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0;">
        0%
    </div>
</div>

接下來使用js插入數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

<!--   這是bootstrap的進度條，該進度條的樣式主要由style="width: 60%;"和60%來控制   -->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0;">
        0%
    </div>
</div>

</body>
<script>
    window.onload = function () {  // 頁面加載完後執行

        var xhr = new XMLHttpRequest();  // 創建一個XMLHTTPRequest對象（這裏不做兼容性處理）

        xhr.open('get', '/getprogress', true);  // 啓動一個get請求，請求的路徑是 127.0.0.1:3000/getprogress ，並且是異步發送數據
        xhr.send(null);   // 我們是獲取數據，所以這裏我們選擇不發送數據

        /**
         * 發送完成後我們需要接受來自服務器返回的數據
         * 由於是異步發送數據，我們並不知道何時能夠得到響應，何時能獲取到數據
         * JavaScript有一個很不錯的機制，叫做readyState，他有幾個值，分別代表這次網絡請求的不同狀態，而每次狀態改變，readyState的值就會發生改變，可取值有：
         * 0： 尚未調用open
         * 1： 尚未調用send
         * 2： 尚未接收到響應
         * 3： 已經接受到部分數據
         * 4： 已經接受了全部數據
         * 每次readyState改變，都會觸發一次readystatechange事件，我們通過onreadystatechange事件處理程序來檢測這次網絡請求進行到了哪一步，便於做響應處理
         */
        xhr.onreadystatechange = function () {   // 我們只需要檢測數據是不是接受完即可，如果接受完了我們就將數據填入DOM中
            if(xhr.readyState === 4) {  // 如果readyState是4，就代表已經接受了全部數據，我們先打印一下數據
                /*console.log(xhr.responseText);*/
                /**
                 * 這裏我們需要有兩步，一步是將width改成獲取到的進度
                 * 還有一步就是將div裏的60%替換掉
                 */
                var data = JSON.parse(xhr.responseText);   // 由於返回的是字符串，我們需要將字符串轉成對象
                document.querySelector('.progress-bar').style.width = data.data.progress + '%';
                document.querySelector('.progress-bar').innerText = data.data.progress + '%';
            } else {
                console.log('readyState的值不是4，數據沒有獲取完');
            }
        }
    }
</script>
</html>

到了這一步，我們的整個網絡請求就已經完成了，現在刷新頁面，可以看到內容被添加進去了，更改服務器傳回的百分比，前臺頁面也會隨之更改

但需要注意，更改node代碼後，必須重啓服務器才能生效。

web開發-網絡請求實戰

使用nodejs搭建一個web服務器（非必會，但必寫）

開始寫前臺網絡請求（必會，必寫）

服務端接收請求以及響應客戶端請求（非必會，但必寫）

完成前臺的數據插入（必會，必寫）

用node.js爬一下優酷

C語言中副作用和序列點（關於自增自減）

服務器完全配置（Part 4）

nodejs讀取文件時相對路徑的正確寫法(使用fs模塊)

服務器完全配置（Part 3）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結