WEB 網路基礎概念


Posted by Nicolakacha on 2020-09-05

瀏覽器怎麼和伺服器互動?

瀏覽器 → 製造 request → 傳 request 到 Server
Server 接收到 request→ 處理資料 → 回傳 response

DNS

Domain Name Server,作用是把 url 網址域名轉換成 IP address

觀念

瀏覽器只是另一個程式,node 用 npm request 也可以發送 request。

HTTP Request & Response

request 和 response 都有 header 和 body,各自帶著不同的資訊

HTTP headers 長這樣,通常會含有的重要資訊像是 IP Address, 狀態碼, request 的請求方法,像是 GET, POST 等

HTTP body 是主要傳送資料的地方,也可以沒有,例如 GET 方法就沒有。

Http Request Method

GET & POST

GET 像是明信片,只能把傳遞的資訊寫在信封上 (http-header)
POST 像是裝進信封的信,不但信封上(http-header)可以寫東西,信封內(message-body)也可以置入想要寄送的資料或檔案
實際的封包長這樣:

  • GET
    HTTP GET Method 中是不允許在 message-body 中傳遞資料的,因為是 GET 就是要取資料的意思。從瀏覽器的網址列就可以看見我們表單要傳送的資料,若是要傳送密碼就有大家常提到安全性問題。

    GET /?id=010101 HTTP/1.1
    Host: xxx.toright.com
    User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1 ( .NET CLR 3.5.30729)
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: zh-tw,en-us;q=0.7,en;q=0.3
    Accept-Encoding: gzip,deflate
    Accept-Charset: UTF-8,*
    Keep-Alive: 115
    Connection: keep-alive
    
  • POST
    POST 是將表單資料放在 message-body 進行傳送,在不偷看封包的情況下似乎安全一些。

POST / HTTP/1.1
Host: xxx.toright.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1 ( .NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-tw,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: UTF-8,*
Keep-Alive: 115
Connection: keep-alive

Content-Type: application/x-www-form-urlencoded
</code><code>Content-Length: 9
id=010101

其他 HTTP Method

  • PUT:取代掉原本的東西
  • PATCH:指定資源的部份修改
  • DELETE:刪除資源
  • OPTION:該資源支援哪些方法

HTTP 狀態碼

  • 2XX 成功
    • 200 OK
    • 204 No Content //譬如刪除的時候回傳
  • 3XX 重新導向
    • 301 Moved Permanently //永久移到新的位置
    • 302 Found //暫時移到新的位置
  • 4XX 用戶端錯誤
    • 404 Not Found
  • 5XX 伺服器端錯誤
    • 500 Internal Server Error
    • 503 Service Unavaliable

用 node.js 架設超簡易 HTTP Server

var http = require('http');

var server = http.createServer(handleRequest);
function handleRequest(req, res) {
    if (req.url === '/') {
        res.write('welcome');
        res.end();
        return;        
    };
    if (req.url === '/hello') {
        res.write('hello');
        res.end();
        return
    };
    if (req.url === '/redirect') {
        res.writeHead(302, {
            'Location': 'https://google.com'
        });
        res.end()
        return
    };
    res.writeHead(404);
    res.end();
};
server.listen(5000); //port

TCP/IP

網路協議分層

IP 地址

固定 IP:PTT 鄉民常常可以用 IP Address 來辨別用戶的學校,就是因為公司、學校等機構通常都會使用固定 IP,確保使用者能連上其伺服器。
浮動 IP:在每次連上網的時候 IP 位置都會不一樣,避免被攻擊
虛擬 IP:又稱為內網的 IP 僅供內部識別使用,對外沒有識別性

Port 端口

不同的 Port 連接到不同的服務 12.20.77.60:80

  • HTTP 80
  • HTTPS 443
  • FTP 21
  • 測試:3000, 4000, 8080

TCP & UDP

TCP 可靠的連接(TCP 三次握手)
UDP 比較快速,例如適合用在視訊的時候

API

Application Programming Interface 應用程式介面,透過 API,可以讓雙方交換資料
WebAPI ⇒ HTTP API

SDK (Software development kit)

可以想成是一個 library,內含很多 API 方法

JSON

JSON(JavaScript Object Notation) 可以被任何語言讀取,所以可以透過 JSON 格式來進行資料的交換,是現行主流的 API 資料傳遞格式

把 request 的字串轉成 JSON

request(
    'https://reqres.in/api/users/2',
    function (error, response, body) {
        const json = JSON.parse(body)
        console.log(json.data.first_name)
    }
);

把 object 變成 JSON 格式的字串

const obj = {
    name: 'huli',
    job: 'none'
}
console.log(JSON.stringify(obj);

把 JSON 變成 object

var obj = JSON.parse('{"name":"John","age":"30"}')

SOAP

Simple Oject Access Protocol


#HTTP







Related Posts

Flattening multidimensional arrays in JavaScript

Flattening multidimensional arrays in JavaScript

Git 版本控制入門(1)- git 新手包

Git 版本控制入門(1)- git 新手包

Vue3 起手式

Vue3 起手式


Comments