[Node.js] 07 - Html and Http

時間 2019-11-07

標籤 node.js node html http 欄目 Node.js 简体版

原文原文鏈接

前言

1、本來的計劃

　　到此，有必要複習下http章節php

下一篇可考慮下netty與nodejs的對比。css

2、HTTP中的 URL、GET/POST 參數

路由須要，故從HTTP中提取出請求的 URL 以及 GET/POST 參數。html

這一功能應當屬於路由仍是服務器（甚至做爲一個模塊自身的功能）確實值得探討，但這裏暫定其爲咱們的HTTP服務器的功能。node

咱們須要的全部數據都會包含在 request 對象中，該對象做爲 onRequest() 回調函數的第一個參數傳遞。可是爲了解析這些數據，咱們須要額外的 Node.JS 模塊，它們分別是 url 和 querystring 模塊。web

var http = require("http");
var url  = require("url");
 
function start() {
  function onRequest(request, response) {

    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("Hello World");
    response.end();

  }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

HTTP: 協議數據庫

HTML: 協議載體 express

HTML

Ref: HTML 教程- (HTML5 標準)編程

1、仨個在線工具連接

HTML 實例

在 HTML 手冊中包含了數百個在線實例，您能夠在線編輯並查看運行結果。api

查看 HTML 實例！瀏覽器

HTML 參考手冊

在菜鳥教程中，咱們提供了完整的 HTML 參考手冊，其中包括標籤、屬性、顏色、實體等等。

HTML 標籤參考手冊

HTML/CSS/JS 在線工具

HTML/CSS/JS 在線工具能夠在線編輯 HTML、CSS、JS 代碼，並實時查看效果：

https://c.runoob.com/front-end/61

兩個疑點：

<!DOCTYPE html> 聲明爲 HTML5 文檔

<head> 元素包含了文檔的元（meta）數據　　　// ---->　如下都是head惹的禍！

2、head 和 meta

Ref: html之文檔的頭部和元數據定義(上)

元數據(meta data)——「data about data」關於數據的數據，通常是結構化數據（如存儲在數據庫裏的數據，規定了字段的長度、類型等）。
元數據是指從信息資源中抽取出來的用於說明其特徵、內容的結構化的數據(如題名,版本、出版數據、相關說明,包括檢索點等)，用於組織、描述、檢索、保存、管理信息和知識資源。

標籤- 使用

<head>  
　　<meta name="Author"      content="dreamzuora" lang="US-en" dir="LTR">  
　　<meta name="keywords"    content="HTML, CSS, XML, XHTML, JavaScript">
　　<meta name="description" content="免費 Web & 編程 教程">
　　<meta name="author"      content="Runoob">
</head>

meta中定義字符格式，確保支持中文。

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>頁面標題</title>
　　</head>
　　<body>
　　　　<h1>個人第一個標題</h1>
　　　　<p>個人第一個段落。</p>
　　</body>
</html>

每30秒鐘刷新當前頁面:

<meta http-equiv="refresh" content="30">

連接網頁和樣式表

-----------------------------------------------------------------
頁面連接標籤的默認連接地址
<head>
　　<base href="http://www.runoob.com/images/" target="_blank">
</head>

-----------------------------------------------------------------
樣式標籤link: 一個文檔和外部資源之間的關係
<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

-----------------------------------------------------------------
樣式標籤style: HTML文檔的樣式文件
<head>
　　<style type="text/css">
　　　　body {background-color:yellow}
　　　　p {color:blue}
　　</style>
</head>

嵌入樣式

直接在html標籤元素內嵌入css樣式

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
　　<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
　　<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
　　　　<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
　　　　<h3>Look! Styles and colors</h3>
　　　　<div style="letter-spacing:12px;">Manipulate Text</div>
　　　　<div style="color:#40B3DF;">Colors
　　　　　　<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
　　　　</div>
　　　　<div style="color:#000000;">and more...</div>
　　</div>
</body>
</html>

效果圖：

內部樣式表

添加到 <head> 部分的樣式信息，對 HTML 進行格式化。

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title>

　　// Jeff: 在<head> 部分經過 <style>標籤訂義內部樣式表:
　　<style type="text/css">
　　　　h1 {color:red;}
　　　　p {color:blue;}
　　</style>
</head>

<body>
　　<h1>這是一個標題</h1>
　　<p>這是一個段落。</p>
</body>

</html>

外部樣式表

使用外部樣式文件格式化文本。

使用外部樣式表，你就能夠經過更改一個文件來改變整個站點的外觀。

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
　　<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
　　<h1>我使用了外部樣式文件來格式化文本 </h1>
　　<p>我也是!</p>
</body>

</html>

傾向於style替代傳統老舊方法

如今一般使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義文本樣式，而不是使用<font>標籤。

<h1 style="font-family:verdana;">一個標題</h1>
<p  style="font-family:arial;color:red;font-size:20px;">一個段落。</p>

文本對齊屬性 text-align取代了舊標籤 <center> 。

<h1 style="text-align:center;">居中對齊的標題</h1>
<p>這是一個段落。</p>

圖像，表格，列表，區塊，顏色　參見原連接：http://www.runoob.com/html

佈局的話，有必要在此停留片刻。

效果圖

HTML 佈局 - 使用<div> 元素

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

　　<div id="container" style="width:500px">

　　　　<div id="header" style="background-color:#FFA500;">
　　　　<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>

　　　　<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
　　　　　　<b>菜單</b><br>
　　　　　　HTML<br>
　　　　　　CSS<br>
　　　　JavaScript</div>

　　　　<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
　　　　內容在這裏</div>

　　　　<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
　　　　版權 © runoob.com</div>

　　</div>
 
</body>
</html>

HTML 佈局 - 使用表格

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head>
<body>
 
　　<table width="500" border="0">
　　　　<tr>
　　　　　　<td colspan="2" style="background-color:#FFA500;">
　　　　　　　　<h1>主要的網頁標題</h1>
　　　　　　</td>
　　　　</tr>
 
　　　　<tr>
　　　　　　<td style="background-color:#FFD700;width:100px;">
　　　　　　　　<b>菜單</b><br>
　　　　　　　　HTML<br>
　　　　　　　　CSS<br>
　　　　　　　　JavaScript
　　　　　　</td>
　　　　　　<td style="background-color:#eeeeee;height:200px;width:400px;">
　　　　　　內容在這裏</td>
　　　　</tr>
 
　　　　<tr>
　　　　　　<td colspan="2" style="background-color:#FFA500;text-align:center;">
　　　　　　版權 © runoob.com</td>
　　　　</tr>
　　</table>
 
</body>
</html>

HTML 佈局 - 有用的提示

Tip: 使用 CSS 最大的好處是，若是把 CSS 代碼存放到外部樣式表中，那麼站點會更易於維護。經過編輯單一的文件，就能夠改變全部頁面的佈局。

Tip: 因爲建立高級的佈局很是耗時，使用模板是一個快速的選項。經過搜索引擎能夠找到不少免費的網站模板（您可使用這些預先構建好的網站佈局，並優化它們）。

HTML 框架

在同一個瀏覽器窗口中顯示不止一個頁面。

示例：點擊後小窗口填充頁面完整信息，並展現。

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>

　　<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
　　<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>　　　　// <---- click here, fill with iframe_a.

　　<p><b>注意：</b> 由於 a 標籤的 target 屬性是名爲 iframe_a 的 iframe 框架，因此在點擊連接時頁面會顯示在 iframe框架中。</p>

</body>
</html>

效果圖：

3、Form 表單提交

用戶交互

HTML 表單和輸入
HTML 腳本

傳統的 button

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>
　　<button　type="button" onclick="alert('你好，世界!')">點我!</button>
</body>
</html>

表單的 button

點擊"提交"按鈕，表單數據將被髮送到服務器上的「demo-form.php

<!DOCTYPE html>
<html>
<head> 
　　<meta charset="utf-8"> 
　　<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

　　<form action="demo-form.php">
　　　　First name: <input type="text" name="FirstName" value="Mickey"><br>
　　　　Last name:  <input type="text" name="LastName" value="Mouse"><br>
　　<input type="submit" value="提交">
　　</form>

　　<p>點擊"提交"按鈕，表單數據將被髮送到服務器上的「demo-form.php」。</p>

</body>
</html>

效果圖：

4、HTML 腳本

JavaScript 使 HTML 頁面具備更強的動態和交互性。

<noscript>

只有在瀏覽器不支持腳本或者禁用腳本時，纔會顯示 <noscript> 元素中的內容：

<script>
document.write("Hello World!")
</script>

<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>

<script>

點擊按鈕，觸發時間，改變label屬性。

<p id="demo">
JavaScript 能夠觸發事件，就像按鈕點擊。</p>

<script>
　　function myFunction()
　　{
　　    document.getElementById("demo").innerHTML="Hello JavaScript!";
　　    x=document.getElementById("demo") // 找到元素
　　    x.style.color="#ff00ff"; // 改變樣式
　　}
</script>

<button type="button" onclick="myFunction()">點我</button>

5、Dom 操做

查看API

document.getElementById(...)

document.getElementsByTagName(...)

document.querySelectorAll(...)

document.querySelector(...)

示範：

pageTitle.parentNode

pageTitle.previousElementSibling

pageTitle.nextElementSibling

pageTitle.nextElementSibling.innerText

/* 子節點 */
var artistList = document.querySelector(...)
artistList.childNodes
artistList.childElementCount
artistList.firstElementChild

artistList.childNodes

建立並插入

var newMember     = document.createElement('li')
var newMemberText = document.createTextNode('張三');
newMember.appendChild(newMemberText)

效果：多出一個‘張三’。

自定義插入位置

// 自定義插入位置
document.querySelector('.artist-list').removeChild(newMember);
artistList.insertBefore(newMember, artistList.firstChild)


var bandMember = document.createElement('h3');
bandMember.innerText = '樂隊成員'
artistList.parentNode.insertBefore(bandMember, artistList.previousSibling);

效果圖：

事件

程序代碼和 html代碼應該分離開：也就是把onclick單獨寫在script.js中。

window.onload(...)：保證當文檔內容徹底加載完成會觸發該事件。

點擊按鈕，觸發函數：

window.onload = function () {
　　var btn = document.querySelector('.btn');

　　function showMessage(event) {
　　　　console.log(event);
　　}
　　btn.addEventListener('click', showMessage, false);

事件的傳播

事件的傳播是向上的（冒泡的方式），直到找到onclick事件。

　　凡是事件，都會觸發，觸發的順序（事件的捕獲方式）與第三個參數有關。

　　- false: 由下向上

　　- true: 由上到下

event.stopPropagation();

潛規則：存在一些默認的行爲，好比點擊連接就會自動打開連接所指網頁。

Goto: HTML 速查列表

你已經完成了 HTML 的學習，下一步該學習什麼呢？

HTTP：http://www.runoob.com/http/http-tutorial.html

HTTP

1、HTTP 工做原理

基礎概念

[1] 基本過程

1). Web服務器根據接收到的請求後，

2). 向客戶端發送響應信息。

HTTP默認端口號爲80，可是你也能夠改成8080或者其餘端口。

[2] HTTP三點注意事項：

- HTTP是無鏈接：無鏈接的含義是限制每次鏈接只處理一個請求。服務器處理完客戶的請求，並收到客戶的應答後，即斷開鏈接。採用這種方式能夠節省傳輸時間。
- HTTP是媒體獨立的：這意味着，只要客戶端和服務器知道如何處理的數據內容，任何類型的數據均可以經過HTTP發送。客戶端以及服務器指定使用適合的MIME-type內容類型。
- HTTP是無狀態：HTTP協議是無狀態協議。無狀態是指協議對於事務處理沒有記憶能力。缺乏狀態意味着若是後續處理須要前面的信息，則它必須重傳，這樣可能致使每次鏈接傳送的數據量增大。另外一方面，在服務器不須要先前信息時它的應答就較快。

[3] HTTP協議通訊流程：

2、GET 對比 POST

HTTP 方法

GET - 從指定的資源請求數據。

POST - 向指定的資源提交要被處理的數據

其餘一些 HTTP 請求方法：

方法	描述
HEAD	與 GET 相同，但只返回 HTTP 報頭，不返回文檔主體。
PUT	上傳指定的 URI 表示。
DELETE	刪除指定資源。
OPTIONS	返回服務器支持的 HTTP 方法。
CONNECT	把請求鏈接轉換到透明的 TCP/IP 通道。

GET 對比 POST

Ref: HTTP 方法：GET 對比 POST

GET 方法】

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.asp?name1=value1&name2=value2

有關 GET 請求的其餘一些註釋：

- - GET 請求可被緩存
  - GET 請求保留在瀏覽器歷史記錄中
  - GET 請求可被收藏爲書籤
  - GET 請求不該在處理敏感數據時使用
  - GET 請求有長度限制
  - GET 請求只應當用於取回數據

# 客戶端請求：使用 GET 來傳遞數據的實例。

GET /hello.txt HTTP/1.1
User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3
Host: www.example.com
Accept-Language: en, mi

POST 方法】

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

有關 POST 請求的其餘一些註釋：

- - POST 請求不會被緩存
  - POST 請求不會保留在瀏覽器歷史記錄中
  - POST 不能被收藏爲書籤
  - POST 請求對數據長度沒有要求

# 客戶端請求：使用 POST 來傳遞數據的實例。

常見的HTTP請求報文頭屬性，參見：https://blog.csdn.net/u010256388/article/details/68491509

服務器響應消息

服務端響應:

HTTP/1.1 200 OK　　// 相應狀態碼
Date: Mon, 27 Jul 2009 12:28:53 GMT
Server: Apache
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Accept-Ranges: bytes
Content-Length: 51
Vary: Accept-Encoding
Content-Type: text/plain

輸出結果：

Hello World! My payload includes a trailing CRLF.

響應狀態碼

Ref: http://www.runoob.com/http/http-status-codes.html

和請求報文相比，響應報文多了一個「響應狀態碼」，它以「清晰明確」的語言告訴客戶端本次請求的處理結果。
HTTP的響應狀態碼由5段組成：

- 1xx 消息，通常是告訴客戶端，請求已經收到了，正在處理，別急...
- 2xx 處理成功，通常表示：請求收悉、我明白你要的、請求已受理、已經處理完成等信息.
- 3xx 重定向到其它地方。它讓客戶端再發起一個請求以完成整個處理。
- 4xx 處理髮生錯誤，責任在客戶端，如客戶端的請求一個不存在的資源，客戶端未被受權，禁止訪問等。
- 5xx 處理髮生錯誤，責任在服務端，如服務端拋出異常，路由出錯，HTTP版本不支持等。

HTTP 響應頭信息(第二部分之消息報頭), goto: http://www.runoob.com/http/http-header-fields.html