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

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

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

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

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

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

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

表格如何運(yùn)作

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

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

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

HTML中另一個(gè)非常強(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方法。這意味著僅包含一個(gè)動(dòng)作和一個(gè)提交按鈕的表單在語義上與鏈接相同。但是，還可以使用表格來修改URL的查詢字符串。如果單擊上述表格，它將向GET服務(wù)器發(fā)送以下請(qǐng)求：GET /example-uri?param1=Text+Field

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

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

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

如果您使用表單中的單選按鈕，則瀏覽器將確保最多選擇一個(gè)選項(xiàng)。

<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ā)送元素列表時(shí)，可以給多個(gè)輸入使用相同的名稱。

<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ù)器將其解釋為一個(gè)值列表。

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

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

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

HTTP請(qǐng)求由方法（例如GET）和資源的URI（例如/cat.png）組成。HTTP服務(wù)器接受此請(qǐng)求并決定如何處理。然后，它向用戶返回HTTP響應(yīng)，其中包含狀態(tài)碼和內(nèi)容。Web瀏覽器既知道如何發(fā)送HTTP請(qǐng)求（通過鏈接或表單），又知道如何處理從服務(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請(qǐng)求只能用于檢索資源，而不能修改資源。甲POST請(qǐng)求，但是，可以被用來修改現(xiàn)有資源。

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

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

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

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

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

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

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

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