HTTP請求與響應處理

1. 請求參數

客戶端向服務器端發送請求時，有時須要攜帶一些客戶信息, 客戶信息須要經過請求參數的形式傳遞到服務器端，好比登陸操做。

2. GET請求參數

參數被放置在瀏覽器地址欄中，例如: http://localhost:3000/?name=zhangsan&lage=20

 const http = require('http');
 // 導入url系統模塊 用於處理url地址
 const url = require('url');
 const app = http.createServer();
 app.on('request', (req, res) => {
     // url.parse 將url路徑的各個部分解析出來並返回對象
     // true 表明將參數解析爲對象格式
     let {query} = url.parse(req.url, true);
     console.log(query);
 });
 app.listen(3000);
​

// 引用系統模塊http
const http = require('http');
// 導入url系統模塊 用於處理url地址
const url = require('url');
//app就是建立的web服務器對象
const app = http.createServer();
// 爲網站服務器對象添加請求事件，當客戶端有請求的時候就執行事件處理函數
// request事件名稱，(req, res)=>{}事件處理函數
app.on('request', (req, res) => {
    // 獲取請求地址 req.url
    // 設置響應報文
    // text/plain默認狀態，純文本 charset=utf-8編碼格式
    res.writeHead(200, {
        'content-type': 'text/html;charset=utf-8'
   });
    console.log(req.url);
    // url.parse第一個參數：要解析的參數地址。第二個參數true：將查詢參數解析成對象形式
    // console.log(url.parse(req.url, true));
    /* let params = url.parse(req.url, true).query;
   // 獲取參數值
   console.log(params.name);
   console.log(params.age); */
​
    // 解構函數獲取參數對象
    let {
        query,
        pathname
   } = url.parse(req.url, true);
    // 獲取參數值
    console.log(query.name);
    console.log(query.age);
​
    if (pathname == '/index' || pathname == '/') {
        res.end('<h2>歡迎來到首頁</h2>');
   } else if (pathname == '/list') {
        res.end('welcome to listpage');
   } else {
        res.end('no page');
   }
});
// 監聽端口
app.listen(3000);
console.log('網站服務器啓動成功');

 

3. POST請求參數

• 參數被放置在請求體中進行傳輸

• 獲取POST參數須要使用data事件和end事件

• 使用querystring系統模塊將參數轉換爲對象格式

// 引用系統模塊http
const http = require('http');
// // 導入系統模塊querystring 用於將HTTP參數轉換爲對象格式
const querystring = require('querystring');
//app就是建立的web服務器對象
const app = http.createServer();
// 爲網站服務器對象添加請求事件，當客戶端有請求的時候就執行事件處理函數
// request事件名稱，(req, res)=>{}事件處理函數
app.on('request', (req, res) => {
    // post參數是經過事件的方式接收的，不是一次觸發的
    // data當請求參數傳遞的時候觸發
    // end 當參數傳遞完成的時候觸發
    // 因爲post參數不是一次性接收完的，因此須要聲明一個變量，觸發data事件時把當前傳遞過來的參數和變量進行拼接，觸發end事件時把拼接完成的參數進行輸出
​
    let postParams = '';
    // 監聽參數傳輸事件
    req.on('data', params => {
        postParams += params;
   });
    // 監聽參數傳輸完畢事件
    req.on('end', () => {
        // querystring.parse()方法，能把字符串轉換成對象模式
        console.log(querystring.parse(postParams));
        // console.log(postParams);
   });
    // 對於客戶端發出的每一次請求，服務端都要作出響應 不然客戶端將處於等待狀態
    res.end('ok');
});
// 監聽端口
app.listen(3000);
console.log('網站服務器啓動成功');

4. 路由

http://localhost:3000/index http://localhost:3000/login 路由是指客戶端請求地址與服務器端程序代碼的對應關係。簡單的說，就是請求什麼響應什麼。

 

 

// 1. 引入系統模塊http
const http = require('http');
// 引入系統url模塊
const url = require('url');
// 2. 建立網站服務器
const app = http.createServer();
// 3. 爲網站服務器對象添加請求事件
app.on('request', (req, res) => {
    // 4. 實現路由功能
    // (1).獲取客戶端請求方式
    const method = req.method.toLowerCase(); //toLowerCase()轉換爲小寫
    // (2)獲取請求地址
    const pathname = url.parse(req.url).pathname;
    // 處理響應報文
    res.writeHead(200, {
        'content-type': 'text/html;charset=utf8'
   });
    if (method == 'get') {
        if (pathname == '/index' || pathname == '/') {
            res.end('歡迎來到首頁');
       } else if (pathname == '/list') {
            res.end('歡迎來到列表頁');
       } else {
            res.end('您訪問的頁面不存在');
       }
   }
});
// 監聽端口
app.listen(3000)
console.log('網站服務器已經成功啓動');

5. 靜態資源

服務器端不須要處理，能夠直接響應給客戶端的資源就是靜態資源，例如CSS、JavaScript、 image文件。 如：http://ww.itcast.cn/images/logo.png

6. 動態資源

相同的請求地址不一樣的響應資源，這種資源就是動態資源。 http://www.itcast.cn/article?id=1 http://www.itcast.cn/article?id=2

 

// 1.引入系統 模塊http
const http = require('http');
// 引入url模塊
const url = require('url');
// 引入path模塊
const path = require('path');
// 引入系統文件模塊fs
const fs = require('fs');
const mime = require('mime');
// 2.建立網站服務器對象
const app = http.createServer();
// 3.爲網站服務器對象添加請求事件
app.on('request', (req, res) => {
​
    // 獲取用戶請求路徑
    let pathname = url.parse(req.url).pathname;
    pathname = pathname == '/' ? '/index.html' : pathname;
    //   __dirname 獲取絕對路徑
    // __dirname + 'public' + pathname;
    // path.join能拼接路徑分隔符
    // 將用戶的請求路徑轉換成實際的服務器硬盤路徑
    let realPath = path.join(__dirname, 'public', pathname);
    // mime.getType(),讓系統自動獲取路徑下的文本格式
    let type = mime.getType(realPath);
    // 讀取文件
    fs.readFile(realPath, 'utf-8', (error, result) => {
​
        // 若是文件讀取失敗
        if (error != null) {
            res.writeHead(404, {
                'content-type': 'type;charset=UTF-8'
           });
            res.end('文件讀取失敗');
            return;
       }
        // 讀取成功直接響應頁面
​
        res.writeHead(200, {
            'content-type': type
       });
        res.end(result);
   });
});
// 4.監聽事件
app.listen(3000);
console.log('網站服務器成功啓動');

7. 客戶端請求途徑

1. GET方式

• 瀏覽器地址欄

• link標籤的href屬性

• script標籤的src屬性

• img標籤的src屬性

• Form表單提交

2. POST方式

• Form表單提交