在本文中，innoQ的顧問Joy Clark聲稱，如果我們對HTML表單和HTTP有基本的了解，就不需要JavaScript，并解釋了HTML表單的工作原理。

網(wǎng)絡(luò)無處不在。創(chuàng)建網(wǎng)站和開發(fā)應(yīng)用程序的最佳方法是什么？如果您用Google進(jìn)行“網(wǎng)絡(luò)開發(fā)”，則點擊數(shù)達(dá)數(shù)百萬。意見是如此之多，多樣，矛盾和壓倒性。

當(dāng)我開始并開發(fā)自己的第一個Web應(yīng)用程序時，我對Web結(jié)構(gòu)的第一印象非常好。我贊賞行為與內(nèi)容（HTML）和樣式（CSS）的內(nèi)置和強(qiáng)制性分離。

但是，我對如何創(chuàng)建Web應(yīng)用程序的理解是，需要在應(yīng)用程序的客戶端中使用JavaScript呈現(xiàn)整個應(yīng)用程序。然后，客戶端將向服務(wù)器發(fā)送定期更新，并根據(jù)響應(yīng)更新頁面。這被稱為單頁應(yīng)用程序，并且有多個框架（如React和Angular）標(biāo)準(zhǔn)化了應(yīng)該如何開發(fā)它們。

我發(fā)現(xiàn)前端開發(fā)令人沮喪。如果我在前端更改了一件小東西，我將不得不記住在后端進(jìn)行更改。如果我在后端更改了某些內(nèi)容，情況也是如此。它變得越來越復(fù)雜，越來越難以記住我以前所做的事情。最終，我感到非常沮喪，以至于我退出了。從那時起，我只打算進(jìn)行后端開發(fā)。

我清楚地記得我第一次在Web應(yīng)用程序中呈現(xiàn)HTML表單。我已經(jīng)為表單中的按鈕定義了一個單擊處理程序，但是當(dāng)我單擊它時，整個應(yīng)用程序消失了，并且對這種看似令人恐懼的行為感到沮喪，因此我選擇了Stack Overflow作為答案。

很快，我將其添加event.preventDefault();為我編寫的每個單擊處理程序的第一行，以使我的應(yīng)用程序不會出現(xiàn)任何意外行為。

表格如何運(yùn)作

在參加內(nèi)部ROCA研討會之前，我不了解HTML表單的默認(rèn)行為是什么。對于某些人來說，這似乎是完全顯而易見的，但并非對我而言，根據(jù)我的經(jīng)驗，我并不是唯一的人。

事實證明，HTML不僅是描述頁面結(jié)構(gòu)的標(biāo)記語言。它還具有語義。最常見的語義元素是鏈接：

<a href="/example-uri">Link Text</a>

HTML中另一個非常強(qiáng)大的語義元素是一種形式：

<form method="get" action="/example-uri">     <input type="text" name="param1" value="Text Field">     <button type="submit">Click me!</button> </form>

表單的默認(rèn)方法是GET方法。這意味著僅包含一個動作和一個提交按鈕的表單在語義上與鏈接相同。但是，還可以使用表格來修改URL的查詢字符串。如果單擊上述表格，它將向GET服務(wù)器發(fā)送以下請求：GET /example-uri?param1=Text+Field

不同的輸入字段提供不同的語義。復(fù)選框字段：

<input type="checkbox" name="food" value="Cheese">

只有選中復(fù)選框才會生成查詢字符串?food=Cheese。

如果您使用表單中的單選按鈕，則瀏覽器將確保最多選擇一個選項。

<input type="radio" name="color" value="Red"> <input type="radio" name="color" value="Blue"> <input type="radio" name="color" value="Yellow">

選擇元素執(zhí)行類似的功能，但是在下拉菜單中顯示值。

<select name="color"> <option value="Red"> <option value="Blue"> <option value="Yellow"> </select>

要向服務(wù)器發(fā)送元素列表時，可以給多個輸入使用相同的名稱。

<input type="checkbox" name="order" value="Hamburger" checked> <input type="checkbox" name="order" value="Cheese" checked> <input type="checkbox" name="order" value="Ketchup">

然后，這將被轉(zhuǎn)換為查詢字符串?order=Hamburger&order=Cheese，服務(wù)器將其解釋為一個值列表。

因此，表單是一種向服務(wù)器指定請求的方式。提交表單后，請求將發(fā)送到服務(wù)器，服務(wù)器將處理該請求。

在服務(wù)器上處理請求

難題的第二部分是處理服務(wù)器上的請求。表單只是用于構(gòu)造HTTP請求并將其發(fā)送到服務(wù)Web應(yīng)用程序的Web服務(wù)器的工具。因此，要了解表單的工作原理，了解HTTP的基礎(chǔ)很重要。

HTTP請求由方法（例如GET）和資源的URI（例如/cat.png）組成。HTTP服務(wù)器接受此請求并決定如何處理。然后，它向用戶返回HTTP響應(yīng)，其中包含狀態(tài)碼和內(nèi)容。Web瀏覽器既知道如何發(fā)送HTTP請求（通過鏈接或表單），又知道如何處理從服務(wù)器返回的響應(yīng)。最常見的操作是僅在瀏覽器窗口中呈現(xiàn)響應(yīng)的內(nèi)容。也可以使用URL重定向在應(yīng)用程序中導(dǎo)航。

默認(rèn)情況下，HTML表單僅支持GET和POSTHTTP方法。根據(jù)HTTP 1.1規(guī)范，GET請求只能用于檢索資源，而不能修改資源。甲POST請求，但是，可以被用來修改現(xiàn)有資源。

其他HTTP方法，如PUT、DELETE和PATCH，在創(chuàng)建RESTful服務(wù)時非常有用。許多web框架也通過在POST請求中進(jìn)行隧道處理來提供這些HTTP方法:

<form method="post" ...>     <input type="hidden" name="_method" value="put">     ... </form>

即使有了所有這些信息，可能也很難概念化如何構(gòu)造這樣的web應(yīng)用程序。

作為一個例子，考慮一個管理電子書的web應(yīng)用程序。通過執(zhí)行GET /books，您將獲得一個HTML頁面，列出到目前為止添加的所有圖書。您還可以在頁面中呈現(xiàn)一個HTML表單，允許您使用POST /books?title= title &author=Author&nrStars=4添加一本書。添加圖書之后，應(yīng)用程序可能會將您重定向回/books頁面，在那里您將看到呈現(xiàn)的新書。該頁面可能包含指向特定圖書的鏈接，GET /books/:bookid，它將顯示該圖書的更多信息，您可以在頁面中呈現(xiàn)表單，以允許您更新該書(PUT /books/:bookid)或從庫中刪除該書(DELETE /books/:bookid)。

以這種方式編寫web頁面已經(jīng)過時了。然而，它也經(jīng)過了試驗，并且在每個瀏覽器中都能工作，即使JavaScript不可用([1]，[2])。我也可以相對肯定地說，在可預(yù)見的未來，它將繼續(xù)發(fā)揮作用。

我仍然喜歡web中固有的行為、內(nèi)容和樣式的分離。然而，web的行為并沒有像我曾經(jīng)認(rèn)為的那樣，使用JavaScript來定義。web應(yīng)用程序的行為由為該應(yīng)用程序提供服務(wù)的web服務(wù)器定義。如果我想改變應(yīng)用程序的行為，我現(xiàn)在只需要在一個地方做。

那么我用JavaScript做什么呢?逐步增強(qiáng)，以改善網(wǎng)站呈現(xiàn)后的外觀。有些用例需要在web瀏覽器中創(chuàng)建富客戶機(jī)。如果是這種情況，那么在我們的應(yīng)用程序中使用React之類的東西來滿足資源的需要可能是有意義的。然而，在絕大多數(shù)情況下，如果我們對HTML表單和HTTP有基本的了解，我們根本不需要它。

創(chuàng)建一個沒有JavaScript的網(wǎng)站既富有挑戰(zhàn)性又有趣。它要求你伸展你的創(chuàng)造力。最重要的是，以這種方式創(chuàng)建網(wǎng)頁將增加應(yīng)用程序可以運(yùn)行的平臺，并使其更易于使用。