【2】一个经典的网站#翻译转载#Web 应用 101

#翻译转载#Web 应用 101

原文链接

A TRADITIONAL WEBSITE

如果你正在学习 Web 开发，那么你很可能会从一个经典的只有 HTML 和 CSS 的网站开始。一个没有样式（需要 CSS）和逻辑操作（需要 JavaScript）的的网站就是 HTML。

If you are learning about web development, you will most likely start with a traditional website built with HTML and CSS. A website which isn't styled (CSS) and doesn't have any logic (JavaScript) is just HTML.

likely 可能

当你在你的浏览器（在你的笔记本或者手机上，比如火狐浏览器）点开某个链接时，一个请求就会被发向负责这个链接的服务器。如果服务器匹配了的这条请求，那么它就会返回一个 HTML 文件到你的浏览器上。

为了将一个网站发送到你的浏览器里，HTTP 被用作服务器和客户端发送请求和回复的通讯协议。这也是为什么每个链接都是以“http”开头的。

客户端和服务器的通讯是即时的，这意味着客户端在发送请求后会等待服务器的响应。如果你的浏览器不能立即显示网页，那是因为从客户端发送请求和客户端收到响应需要时间。

If you navigate to a specific URL in your browser (e.g. Firefox) on your laptop or smartphone, a request is made to the web server responsible for that URL. If the web server is able to match the request to a website then it serves the HTML file for that website to your browser.

To transfer a website to a browser, HTTP is used as the communication protocol for requests and responses between the client and the web server. This is why there is "http" in front of every URL.

The communication between the client and the server is synchronous, which means that the client sends a request to the server and waits for a response from the server. Your website isn't displayed immediately because it takes time to send the request from a client to the web server and to receive a response back from the web server.

navigate 导航

specific

• *adj.*明确的，具体的；特定的；特有的，独特的；有特殊功能的，有特效的；（生物）种的；（关税，税）按数量（根据固定税率）征取而非按货价征取的；（物理）（与参照物同一性质成）比率的
• *n.*细节，详情；特效药

responsible （对某人、某事）负责的；（对事故、错误、罪行等）负有责任的，应承担责任的；（工作或职位）重要的，责任重大的；可靠的，负责任的；作为缘由的，应受归咎的；向......负责的，向......汇报的

transfer 转移

protocol 协议

synchronous 同步

response 响应

displayed 显示

immediately 立即

receive 收到

HTTP 请求有 4 种基本的 HTTP 方法，GET、POST、PUT 和 DELETE。除了 GET 方法用于读取资源外，其余三种方法都是用于修改资源的。这些资源可以是任何资源，从一个 HTML 文件到一个 JSON 对象都是可以的。这四个方法都可以被总结为万恶之源：CRUD 操作，即添删改查

添  -> HTTP POST
查  -> HTTP GET
改  -> HTTP PUT
删  -> HTTP DELETE

在我们的网站案例中，浏览器执行 HTTP GET 方法（访问链接）从服务器上读取 HTML 文件。

A HTTP request comes with four essential HTTP methods: GET, POST, PUT, and DELETE. The HTTP GET method is used to read a resource, whereas the remaining methods are used to write resources -- where a resource can be anything from HTML to JSON. All four methods can be abstracted to the infamous CRUD operations: Create, Read, Update, and Delete.

Create  -> HTTP POST
Read    -> HTTP GET
Update  -> HTTP PUT
Delete  -> HTTP DELETE

In our example of a website, which is served from a web server to a client by visiting a URL in a browser, the browser executes a HTTP GET method to read a HTML file from the web server.

comes with 与……一起供给；伴随……发生；从……开始

essential

• *adj.*必不可少的，非常重要的；基本的，精髓的；（氨基酸、脂肪酸）必需的；（疾病）自发的，原发的
• *n.*必不可少的东西，必需品；要素，本质；（某学科的）基础，基本知识

whereas 而，但是

remaining 剩下的

abstracted *adj.*心不在焉的；出神的；分离出来的；抽出的

infamous *adj.*声名狼藉的；无耻的；邪恶的；不名誉的

operation *n.*运作，实施；运转，操作；手术；（有组织的）活动，行动；军事行动；企业，公司；业务，经营 ；（数学）运算

served 服务

executes 执行

客户端和服务端有什么区别？

What's the difference between Client and a Server?

客户端是一个使用服务器的实体，它读取或修改服务器上的资源。典型的客户端就是你的浏览器。当你在浏览器内访问特定的网址时，你的浏览器就会像服务器请求资源（比如 HTML）来显示网站。当然客户端也可以是别的，比如cURL。

服务器是服务客户端的实体。在一个传统意义上网站中，服务器对来自客户端的请求做出响应，返回资源（比如：HTML，CSS，JavaScript）或将请求里的操作实现到服务器上。当下，热门的服务器有 Nginx 和 Apache，他们是专门用作服务器的。

A Client is an entity that consumes a Server. It either reads resources from a server or writes resources to a server. For a traditional website, the client is your browser. If you navigate to a specific URL in your browser, your browser communicates with a server to request resources (e.g. HTML) to display a website. However, a client doesn't need to be a browser (e.g. cURL).

A Server is an entity that serves a Client. In the traditional sense of a website, a server reacts to a client's requests and either replies with resources (e.g. HTML, CSS, JavaScript) from HTTP GET requests or acknowledges manipulations from HTTP POST, PUT, DELETE requests. Popular web servers, which are a specific kind of server, are NGINX or Apache.

entity n.实体，独立存在体

consumes 消费

either…… or 要么……要么……

sense

• *n.*感觉官能（即视、听、嗅、味、触五觉）；（对某物的）感觉；道理，合理性；见识，良好的判断；理智，理性；理解力，判断力；意义，含义；（数，物理）指向，方向
• *v.*感觉到，觉察到；（机器）检测出
• adj.（遗传）有意义的

replies

• *n.*回答；回复；答复（reply 的复数形式）
• *v.*回答；答复（reply 的三单形式）

acknowledge *v.*承认；认可； 跟……打招呼，理会；告知收到；（公开）感谢

manipulation *n.*操纵；推拿；（熟练的）控制，使用；（对账目等的）伪造，篡改；（对储存在计算机上的信息的）操作，处理

客户端和服务端是相互依存的，即时它们不在同一个地方。比如你的手机（客户端）在南京，而服务器在上海。服务器可以被看做一台电脑，并且通常离你很远（在大大的机房），它可以提供 Web 应用服务或者是网站。你也可以在你的电脑上部署一个服务器。

It can be said that there is no client without a server and there is no server without a client. They work together, even though they don't need to be in the same place. For example, the browser on your machine is at your local location (e.g. Berlin in Germany) and the web server which serves a website to you is operating at a remote location (e.g. Frankfurt in Germany). A server -- which is just another computer -- is usually located somewhere else than your local machine. For the sake of developing a web application or website, you may have a server running on your local machine too (see localhost).

operating 操作

sake 为了

当然，客户端也可以不是你手机里的浏览器，它可以是在远程的东西。这些东西我会在后面提到它。

As a client doesn't necessarily need to be a browser on your local machine, it could be somewhere remote as well. But more about this later.

Web 服务器和应用服务器有什么区别？

What's the difference between a Web Server and an Application Server?

Web 服务器提供的资源（比如 HTML，CSS，JS）符合 HTTP 传输，所以可以通过 HTTP 传输。当请求从客户端发送到服务器时，服务器会返回对应的资源（这些资源通常是存放在服务器上的文件）。当一个 HTML 发送到客户端时（比如你的浏览器），客户端就会解释并显示这个文件。

与 Web 服务器不同的是，应用服务器不仅提供上述资源，还提供其他的东西，比如JSON | 菜鸟教程（数据的一种友好数据格式）。并且应用服务器不仅能使用 HTTP 协议，还能使用其他协议（比如用于实时通讯的 WebSockets）。最重要的是，应用服务器在其服务器端有后端语言实现（比如 nodejs,php,java,C#,go,python 等）。

Web 服务器和应用服务器都可以被归类为服务器。所以当人们讨论服务器时可能意味着上面两者之一，当然他们也可能是在说一个真实的物理服务器，某个躺在某个机房角落默默运行服务的计算机。

随着阅读，你还会遇到下面 2 个名词：部署和托管。在这里我简单介绍这两个词：部署就是让一个服务器运行起来，托管就是将让资源可以通过服务器被获取。所以，当你在你的电脑上开发网站时，你会需要定义一个链接来使用，这时这个网站就是在本机上工作的。

A Web Server serves resources (e.g. HTML, CSS, and JavaScript) which are formats that can be transferred via HTTP. When a client requests resources from a web server, the web server fulfils the request by sending the resources back to the client. Normally, these resources are just files on the server. If HTML is sent to a client, then the client (in this case, the browser) interprets the HTML to render it.

In contrast, an Application Server serves resources beyond HTML, CSS, and JavaScript. For example, JSON can be sent if a client requests data in a data friendly format. In addition, an application server isn't bound to a protocol. Whereas a web server is mainly used with the HTTP protocol, an application server can use other protocols (e.g. WebSockets for real-time communication). The most important fact is that an application server can have implementation details on its server-side in a specific programming language (e.g. JavaScript with Node.js, PHP, Java, Ruby, C#, Go, Rust, and Python).

Both web servers and application servers can be classified as servers. So you will often hear people talk about servers when they mean one of these two. However, people often say server to mean a physical computer, which runs somewhere remote on which a web server or application server is running.

There are two more terms which you may meet: deploying and hosting. I will be brief about these terms: deploying describes the act of taking a website live on a server, hosting describes the continuous act of serving the website from this server. So, when developing a website on your own computer, you have to open it with a localhost URL, which just means that you are the local host of this website.

format

• *n.*总体安排，计划，设计；（书或杂志的）开本，版式；（录像、激光唱片、磁带等的）格式
• *v.*为……编排格式；格式化

transferred

• *n.*呼叫转移；已转运
• *adj.*转移的（transfer 过去式）；转让的；调动的

via *adj.*可望成功的，切实可行的；能存活的，能生长发育的

fulfil *v.*实现；达到，完成；履行，执行；使满足，使有成就感；<旧>结束（一段时间），完成（一件工作）

interpret *v.*解释，说明；口译；把……理解为；演绎

render

• *v.*使成为，使处于某种状态；给予，提供；（以某种方式）表达，表现；粉刷，往（墙上）抹灰；将（脂肪）熬成油，使熔化；正式宣布（判决或决定）；（供审查，考虑）提交，呈报；<文>放弃，献出；演奏，演唱；翻译；绘制（指用色彩和明暗使轮廓图像具立体感）；秘密引渡（外国罪犯、恐怖嫌疑犯）；从（动物身体）提取（蛋白质、脂肪及其他可用部分）
• *n.*底灰，底泥；<史>交纳

contrast

• *n.*差异，对比；对照物，明显不同的事物；（摄影或绘画中的）颜色反差，明暗对比；（电视屏幕的）图像明暗对比度，反差
• *v.*对比，对照；显出明显的差异，形成对比

in addition 另外，此外

bound

• *adj.*必然的，肯定的；受约束的，有义务的；被……所限制的，被……所束缚的；要到……去的，驶往……的；装订好的，有封面的；（与……）紧密相连的，关系密切；准备就绪的；（语法要素）黏附的
• *v.*跳跃，蹦跳着走；形成……的边界，划界；限制，约束；突然增长，急剧上升；（尤指圆形的物体）弹回，弹开
• *n.*界限，限制；蹦跳，跳跃
• *v.*捆绑；使团结；凝结（bind 的过去式和过去分词形式）

real-time *adj.*实时的；接到指示立即执行的

implementation *n.*实施，执行

classified

• *adj.*分类的，归类的；机密的，保密的
• *n.*分类广告
• *v.*把……分类，把……分级；把（信息）归入保密级别（classify 的过去式和过去分词形式）

terms

• *n.*地位，关系；[法]条款；术语；措辞；价钱（term 的复数形式）
• *v.*把……称为（term 的三单形式）

deploying

• *v.*部署（deploy 的现在分词）；配置；展开
• *n.*分发

hosting

• n.（计）托管
• *v.*主办；主持（节目）；做东，款待；存储网站（host 的现在分词）

brief

• *adj.*短暂的；简短的；（衣服）很短的
• *v.*给……指示，向……介绍情况；<英>向（辩护律师）提供案情摘要
• *n.*指示，任务简介；摘要，概要；短内裤（briefs）；辩护状；辩护律师；<英>委托辩护

describe *v.*描述，形容；做……运动，形成……形状

continuous *adj.*连续不断的，持续的；（语法）进行式的；（函数）连续的

host

• *n.*主人；主持人；主办者，东道主；寄主，宿主；接受移植组织（或器官）的受体；主机；（某种特别生物的）生存地；许多人（或物）；<古>军队；（圣餐仪式中的）圣饼，圣体
• *v.*主办，做……的东道主；做节目主持人；作为主人组织（聚会），做东；（通常收费在与互联网连接的计算机上）存储网站

当我们改变 url 地址时发生了什么？

What happens when I change the path of an URL?

当我们在浏览器中从某个域名的某个链接（比如：https://www.runoob.com/html）挑战到另一个链接（比如：https://www.runoob.com/css）时发生了什么？对于一般的网站，每一个不同的链接对应着浏览器发送不同的请求。

对于每个 url，服务器会响应不同的服务。当我们在浏览器中访问一个网站的/about路径（也可以叫/about页面或者路由），比如https://www.runoob.com/about时，服务器会返回这个链接的对应的服务（如果它做了这个功能的话）。这个叫做服务端路由，它的特点是服务器决定每个 url 返回的内容。后面我会提到客户端路由。

What happens when I visit a website at a URL and navigate around this domain (e.g. mywebsite.com) from a path (e.g. /about) to another path (/home)? For a traditional website, a new request is made by a client to a web server for every distinct URL.

For every URL, a distinct HTTP GET method is sent to the dedicated web server to fulfil the request. When a user accesses a website on its /about path (also called page or route) in a browser, for example http://www.mywebsite.com/about, the web server sends all the information about this URL back to the browser. This process is called server-side routing, because the server decides which resource is sent to the client on each URL. You will learn about client-side routing later.

domain 域

distinct *adj.*不同的，有区别的；清楚的，明显的；确切的

dedicated

• *adj.*专心致志的，献身的；专用的，专门用途的
• *vt.*致力于，献身于；（在书、音乐或作品的前部）题献词；为（大楼，纪念碑）揭幕（dedicate 的过去式和过去分词）

accesses 接近

process

• *n.*步骤，程序；（自然或偶然的）变化过程；（为达到某目标的）过程，进程；制作方法，加工方法；<法律>传票；（生，剖）端突，突起
• adj.（印刷）三原色的，三色版的； 经过特殊加工的；照相板的
• v.（用化学物品或机器）处理，加工；审核，受理（正式文件或请求）；（计算机）处理（数据）；冲洗（照片）；加工（食品）；<正式>列队行进；把（头发）弄成直发

decide *v.*影响（或决定）……的结果；断定，判定；使下决心；决定，选定；裁决，判决

当我的网站不仅只有 HTML 文件时，会发生什么？

What happens when my website is more than HTML?

一个现代化的网站由 HTML（网站框架），CSS（样式表），和 javascript 代码（负责逻辑）组成。如果没有 CSS 样式表你的网站就无法拥有与众不同的外貌，如果没有 javascript 代码你的网站就失去了动态的交互。一般来说 CSS 和 JS 会在 html 文件中以链接的形式存在。比如：

<link href="/media/examples/link-element-example.css" rel="stylesheet">
<h1>Home at /home route</p>
<p class="danger">Red text as defined in the external CSS file.</p>

这里的链接很明显指向另一个地址，当 html 中有指向指向其他资源的标签时（比如 CSS 和 JS 资源），浏览器会为每个资源发送一次请求。

着也被成为瀑布式请求，后一个请求需要等待前置的请求完成。例如，一个中 html 文件链接了 CSS 文件和 JS 文件，CSS 文件链接了一个图片文件（这个图片可能用作背景），浏览器在收到 html 文件并读到 link 标签前并不知道需要 CSS 文件。

这样的操作看上去非常慢。不过还好，至少在同一文件出现的不同链接（比如在初始 html 文件中的 js 文件链接和 css 文件链接）会被同时访问，访问的方式就像之前的案例里那样那样，当然之后的文章里也会出现。

最终，当浏览器获取了在这个 url 上包含的所有的资源（例如：HTML, CSS, JavaScript, PNGs, JPGs, SVGs）后，浏览器使用这些资源并解释 html 文件，将网站上的内容显示出来给你。现在，你就能作为一位用户和这个网站交互了。

A modern website consists of HTML (structure), CSS (style), and JavaScript (logic). Without CSS a website wouldn't be shiny and without JavaScript a website wouldn't have dynamic interactions. Usually when CSS and JavaScript files are used, they are linked in a HTML file:

If a browser asks a web server for the HTML of an URL, the web server sends back the HTML file which may include HTML tags that link to other resources like CSS or JavaScript files. For every link, another request is made to the web server to retrieve the files.

These are also called waterfall requests, because one request has to wait for another request to finish. In our example, the browser doesn't know that it needs to request the CSS file before the HTML file arrives with the HTML link tag. And in the next example the HTML file links to a JavaScript and CSS file, whereas the CSS file links to a JPG file (which may be used as CSS background for example).

However, at least if there are multiple references in one file, for example the initial HTML file that links to a CSS and a JavaScript file, these resources will be requested and resolved in parallel, as seen in the previous example, but also illustrated in the next one.

Eventually the browser will have all resources (e.g. HTML, CSS, JavaScript, PNGs, JPGs, SVGs) for a specific URL and interprets the HTML with all its included assets to display the desired result for you. It's ready for you to interact with it as a user.

modern

• *adj.*近代的，现代的；当代风格的，现代派的；现代化的，新式的；摩登的，时髦的
• *n.*现代人；现代派艺术家；主张现代风格的人，宣扬现代价值观的人

consist *v.*由……组成，由……构成；在于，存在于

structure

• *n.*结构，构造；结构体，（尤指）大型建筑物；周密安排，精心组织；机构，组织，体系
• *v.*计划，组织，安排

shiny *adj.*光滑发亮的，有光泽的

dynamic

• *adj.*充满活力的，精力充沛的；动态的，发展变化的；力的，动力的
• *n.*动力，活力；相互作用，动态；动力学

interaction *n.*互动，交流；相互影响，相互作用

retrieve

• *v.*找回，收回；检索（储存于计算机的信息）；（狗等）衔回（物品、猎物）；挽救，挽回；回忆，追忆；收绕钓鱼线
• n.（尤指中枪猎物的）找回；收绕钓鱼线；<古> 恢复的可能性；检索

waterfall request 瀑布式请求

multiple

• *adj.*多个的，多种的；多人共有的；影响身体许多部位的
• *n.*倍数；<英>连锁商店；（电信）复联，复接

references

• *n.*提及，谈到；参考，查阅；（引自书或诗歌的）引言，引文；引文的作者，参考书目；（帮助或意见的）征求，征询； (为方便查询所用的）标记，编号；推荐信，介绍信；介绍人，推荐人
• *adj.*参考的，用于查阅的；文献索引的，参照的
• *v.*列出……的参考书目；提及，提到；引用，参照（某书或某作者）

resolved

• *adj.*下定决心的，坚决的
• *v.*解决；决定；（立法机构等）表决；分解；使（病症）消退；使（不协和音）转向协和音；（当远处物体看得更清楚时）变成；（光学仪器等）分辨（resolve 的过去式和过去分词）

parallel

• *adj.*平行的；相似的，同时发生的；（计算机）并行的；并联的
• n.（人或事物的）相似的手法，共同点；相似的人（或物）；（地球的）纬线，纬圈；（印刷）平行符号
• *v.*与……相似；与……同时发生；与……并行；与……相当，比得上
• *adv.*与……平行

previous

• *adj.*以前的，先前的；（时间或顺序上）稍前的；<非正式>过早的，过急的
• n.<英，非正式>前科，犯罪记录

illustrated

• *v.*加插图于……；（用示例、图画等）说明；表明……的真实（或存在）；为……例证（illustrate 的过去式及过去分词）
• *adj.*有插图的

eventually *adv.*最终，结果

assets *n.*有利条件，有价值的人或物；资产，财产

desired *adj.*期望得到的，希望实现的