node之HTTP 從服務端感受ajax和form

渣渣的生存之道發表於2018-07-10

HTTP服務端ORM

ajax傳送請求,需要傳輸資料,資料有不同的型別,所以也是靠請求頭告訴後臺處理邏輯

傳輸資料的方式有很多種

http: 1.0,1.1(keep-alive) 複用連線, 2.0 https 新特點雙向通訊,多路複用

資料互動的方式

客戶端主動傳送請求給服務端,服務端返回資料,我們叫單向通訊

表單 (會頁面跳轉,如果是get會加個?,如果是post就會跳轉業面,頁面重新渲染,重新請求伺服器,獲取頁面,這樣就會浪費很多流量,對伺服器壓力很大) 但是一般提交我們用表單支援跨域
ajax 同步體驗不好,可以無重新整理頁面 1.0,2.0 ajax基於表單請求http發過去的,只是傳送方式不一樣不支援跨域
jsop xss攻擊,逐漸介面暴露出去,大家都可以訪問,大多數網站在廢棄中, 逐漸被cors代替
cors 跨域資源共享,不需要前臺,直接更改服務端配置
nginx 反向代理
webpack proxy 反向代理

雙向通訊連線以後,不需要客戶端主動傳送請求,服務端可以主動告訴他,會實時吧最新的資訊提交給客戶端,之前我們的做法是setInterval,但是這就有個問題,假設我們10分鐘內沒有更新呢,而用websokct當服務端變了之後會主動推送給客戶端,我們經常應用例如聊天室

websocket (基於tcp)

我們通過node實現服務端,接收前端請求

表單 (會頁面跳轉,如果是get會加個?,如果是post就會跳轉業面,頁面重新渲染,重新請求伺服器,獲取頁面,這樣就會浪費很多流量,對伺服器壓力很大) 但是一般提交我們用表單

get	post
放到url裡,有限制	不限制大小

get的url形式方便分享 post通過請求體

<!-- form支援什麼格式提交get post 不識別預設get -->
    <form  action="http://localhost:3000/form" method="get">
        使用者名稱 <input type="text" name="username"><br>
        密碼 <input type="text" name="password"><br>
        <input type="submit">
    </form>
複製程式碼

跳轉之後的連結會有http://127.0.0.1:5500/?username=123&password=321form預設支援跨域

//服務端
let http = require('http');
let url = require('url');
let server = http.createServer(function(req,res){
    let {pathname,query} = url.parse(req.url,true);
    if(pathname === '/form'){
        res.end(JSON.stringify(query))
    }
})
server.listen(3000)
複製程式碼

把方法改成post

let http = require('http');
let url = require('url');
let querystring = require('querystring');

// let str = "username==123&&password==321";
// // 指定欄位之間的分隔符 和 key、value之間的分隔符-》物件
// let obj = querystring.parse(str,'&&','==');
// console.log(obj);

let server = http.createServer(function(req,res){
    let {pathname,query} = url.parse(req.url,true);
    let method = req.method.toLowerCase();//在node中取得的方法名永遠是大寫的
    if(pathname === '/form'){
        if(method === 'get'){
            res.end(JSON.stringify(query))
        }else{
            let buffers = [];
            //接收請求體
            req.on('data',function(data){
                buffers.push(data);
            })
            req.on('end',function(){
                //表單格式接受的都是a=b&c=d  
                //headers[  'content-type': 'application/x-www-form-urlencoded']
                let str = Buffer.concat(buffers).toString();
                res.end(JSON.stringify(querystring.parse(str)));
            })
        }
    }
})
server.listen(3000)
複製程式碼

表單提交的檔案比較特殊

    <!-- form支援什麼格式提交get post 不識別預設get   enctype="multipart/form-data" 多文字,內容型別:多段form表單格式 -->
    <form  action="http://localhost:3000/form" method="get">
        使用者名稱 <input type="text" name="username"><br>
        密碼 <input type="text" name="password"><br>
        <input type="submit">
    </form>
複製程式碼

多段form表單格式會用分隔符將內容分離開

我們需要將內容解析,或者需要安裝npm install formidable

let http = require('http');
let url = require('url');
let querystring = require('querystring');
let formidable = require('formidable')
let path = require('path')
// let str = "username==123&&password==321";
// // 指定欄位之間的分隔符 和 key、value之間的分隔符-》物件
// let obj = querystring.parse(str,'&&','==');
// console.log(obj);

let server = http.createServer(function(req,res){
    let {pathname,query} = url.parse(req.url,true);
    let method = req.method.toLowerCase();//在node中取得的方法名永遠是大寫的
    if(pathname === '/form'){
        if(method === 'get'){
            res.end(JSON.stringify(query))
        }else{
            var form = new formidable.IncomingForm();
            //fields a=b&c=d文字  files檔案
            form.keepExtensions = true;//保留字尾
            form.encoding = 'utf-8';
            form.uploadDir = path.join(__dirname,'./myDir');
            form.parse(req, function(err, fields, files) {
            });
            form.on('end', function() {
                res.end('上傳成功');
            });
        }
    }
})
server.listen(3000)
複製程式碼

ajax 同步體驗不好,可以無重新整理頁面 1.0,2.0 ajax基於表單請求http發過去的,只是傳送方式不一樣

 <!-- 不支援跨域,協議,主機名,埠號 表單的好處可以加自己的校驗-->
    <form  onsubmit="login(event)" id="form">
        使用者名稱:
        <input type="text" name="username" required>
        <br> 密碼:
        <input type="text" name="password">
        <br>
        <input type="submit" value="提交">
    </form>
複製程式碼

function login(e) {
        let $ = document.querySelector.bind(document);
        function serialized(ele) {
          let arr = [];
          let elements = ele.elements;
          for (let i = 0; i < elements.length; i++) {
            let { type, name, value } = elements[i];
            switch (type) {
              case 'text':
              case 'password':
                arr.push(`${name}=${value}`);
                break
              default:
            }
          }
          return arr.join('&');
        }
        function login(e) {
            //阻止預設行為
            e.preventDefault();
            //表單序列化 username=123&password=456
            let qs = serialized($('#form'));
            //ajax4步
            let xhr = new XMLHttpRequest();
            xhr.open('GET', `/2.html?${qs}`, true); // true代表是否非同步    
            xhr.responseType = 'json';// 服務返回的應該是一個物件
            xhr.timeout = 3000; // 3000過去了還沒有資料返回就是超時
            xhr.ontimeout = function () {
                console.log('超時')
            }
            xhr.onerror = function (err) {//斷網
                console.log(err);
            }
            xhr.setRequestHeader('Content-Type', 'application/www-x-form-urlencoded');
            // xhr.setRequestHeader('Content-Type','application/json')
            //readyState 0 表示還沒有open 1代表open了 2 代表傳送求求 3.接收到了部分請求
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState);
                console.log(xhr.status)
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        console.log(xhr.response);
                    }
                }
            }
            xhr.send(qs); 
        }
複製程式碼

需要啟動服務否則跨域

//服務程式碼
let http = require('http');
let url = require('url');
let fs = require('fs');
let path = require('path');
let querystring = require('querystring');
let server = http.createServer(function (req,res) {
    let {pathname,query} = url.parse(req.url,true);
    if(pathname === '/2.html'){
        let method = req.method.toLowerCase();
        if(method === 'get'){ //get方法
            res.end(JSON.stringify(query));
        }else{//post方法
            let buffers = [];
            req.on('data', function (data) {
                buffers.push(data);
            });
            req.on('end', function () {
                let str = Buffer.concat(buffers).toString();
                console.log(str);
                res.end(JSON.stringify(querystring.parse(str)));
            })
        }
        return 
    }
    if(pathname === '/'){
        return fs.createReadStream(path.join(__dirname,'./1.html')).pipe(res);
    }
    let p = path.join(__dirname, pathname);
    fs.stat(p,function (err,stat) {
        if(!err){
        fs.createReadStream(p).pipe(res);
        }else{
        res.statusCode = 404;
        res.end(`NotFound`);
        }
    })
});
server.listen(3000);
複製程式碼

post請求和get形似

我們隊上述ajax做個簡單的封裝

function login(e) {
    //阻止預設行為
    e.preventDefault();
    //表單序列化 username=123&password=456
    let qs = serialized($('#form'));
    //ajax4步
    let xhr = new XMLHttpRequest();
    ajax({
        url: '/2.html',
        method: 'post',
        dataType: 'json',
        contentType:'application/www-x-form-urlencoded',//只有post需要傳
        data: qs
    }).then(data=>{
        console.log(data);
    }).catch(e=>{
        console.log(e);
    });
}
function ajax(options) {
    return new Promise((resolve,reject)=>{
        let {
            url = new Error('url must a string'),
            method = "get",
            dataType = "text",
            data = null,
            success,
            contentType,
            error
        } = options;
        let xhr = new XMLHttpRequest();
        if (method == 'get') {
            xhr.open(method, `${url}?${data}`, true);//如果是get請求,要將資料拼接到url
        } else {
            xhr.open(method, url, true);
            xhr.setRequestHeader('ContentType', contentType);//設定請求頭
        }
        xhr.responseType = dataType;//響應型別
        xhr.onerror = function (err) {
            error && error(err);
            reject(err)
        }
        xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                console.log(xhr.response)
                success && success(xhr.response);
                resolve(xhr.response)
            }
        }
        }
        data = method === 'get' ? null : data;
        xhr.send(data);
    })
}
複製程式碼

node.js啟動http服務
2024-04-04
Node.jsHTTP
從服務端生成Excel電子表格（Node.js+SpreadJS）
2022-01-26
服務端ExcelNode.js
node服務端渲染(完整demo)
2019-01-09
服務端
「服務端」node服務的監控預警系統架構
2019-03-03
服務端架構
Mac 下搭建Nginx HTTP/2的服務端
2018-12-25
MacNginxHTTP服務端
服務之間的呼叫 HTTP代替RPC？
2020-02-21
HTTPRPC
[服務端與網路]http協議與http狀態碼
2019-02-21
服務端HTTP協議
HTTP和AJAX重點知識
2019-04-10
HTTP
實現客戶端與服務端的HTTP通訊
2018-07-11
客戶端服務端HTTP
node+express+MongoDB實現小商城服務端
2019-01-19
ExpressMongoDB服務端
【node】模組解析之 http
2019-02-16
HTTP
TCP程式設計之服務端和客戶端的開發
2018-08-14
TCP程式設計服務端客戶端
使用nodejs和express搭建http web服務
2021-01-15
NodeJSExpressHTTPWeb
服務端渲染和客戶端渲染
2024-04-04
服務端客戶端
django通過form和ajax提交表單資料和圖片
2020-10-25
DjangoORM
前端學習 node 快速入門系列 —— 服務端渲染
2021-03-15
前端服務端
從 node服務部署，到https配置與nginx轉發
2019-01-19
HTTPNginx
Vercel 部署 Node 服務
2022-05-07
真正“搞”懂HTTP協議11之代理服務
2023-02-09
HTTP協議
python建立tcp服務端和客戶端
2018-08-26
PythonTCP服務端客戶端
HTTP檔案服務
2023-09-12
HTTP
服務端 I/O 效能：Node、PHP、Java、Go 的對比
2021-09-09
服務端PHPJavaGo
React 服務端渲染從入門到精通
2019-03-27
React服務端
MQTT協議從服務端到客戶端詳解
2018-03-09
MQQT協議服務端客戶端
慢速 HTTP 拒絕服務：分析利用和緩解
2024-03-30
HTTP
Angular2 http服務
2018-07-20
AngularHTTP
AngularJS 4(四)【HTTP 服務】
2018-08-24
AngularJSHTTP
http 服務原始碼分析
2019-05-13
HTTP原始碼
http服務原始碼分析
2019-05-13
HTTP原始碼
python 啟動http服務
2024-11-11
PythonHTTP
使用swoole提供http服務
2021-01-10
HTTP
http請求頭中application/x-www-form-urlencoded和multipart/form-data區別
2024-04-17
HTTPAPPORM
架構之:微服務和單體服務之爭
2021-07-05
架構微服務
Linux下離線部署Node環境和前端服務
2018-10-10
Linux前端
從客戶端向服務端發起請求（3種）
2019-01-20
客戶端服務端
從零建立一個 Dart 服務端專案
2019-05-16
Dart服務端
從服務端生成Excel電子表格（GcExcel + SpreadJS）
2022-02-09
服務端ExcelGCJS
服務端基本概念和指標
2021-12-16
服務端指標