JavaScript 编程精解 中文第三版 十八、HTTP 和表单

GET /example/message.html?name=Jean&message=Yes%3F HTTP/1.1

问号表示路径的末尾和查询字符串的起始。后面是多个名称和值，这些名称和值分别对应form输入字段中的name属性和这些元素的内容。&字符用来分隔不同的名称对。

在这个 URL 中，经过编码的消息实际原本是"Yes?"，只不过浏览器用奇怪的代码替换了问号。我们必须替换掉请求字符串中的一些字符。使用%3F替换的问号就是其中之一。这样看，似乎有一个不成文的规定，每种格式都会有自己的转义字符。这里的编码格式叫作 URL 编码，使用一个百分号和16进制的数字来对字符进行编码。在这个例子中，3F（十进制为 63）是问号字符的编码。JavaScript 提供了encodeURIComponent和decodeURIComponent函数来按照这种格式进行编码和解码。

console.log(encodeURIComponent("Yes?"));
// → Yes%3F
console.log(decodeURIComponent("Yes%3F"));
// → Yes?

如果我们将本例 HTML 表单中的method属性更改为POST，则浏览器会使用POST方法发送该表单，并将请求字符串放到请求正文中，而不是添加到 URL 中。

POST /example/message.html HTTP/1.1
Content-length: 24
Content-type: application/x-www-form-urlencoded

name=Jean&message=Yes%3F

GET请求应该用于没有副作用的请求，而仅仅是询问信息。 可以改变服务器上的某些内容的请求，例如创建一个新帐户或发布消息，应该用其他方法表示，例如POST。 诸如浏览器之类的客户端软件，知道它不应该盲目地发出POST请求，但通常会隐式地发出GET请求 - 例如预先获取一个它认为用户很快需要的资源。

我们将在本章后面的回到表单，以及如何与 JavaScript 交互。

浏览器 JavaScript 可以通过fetch接口生成 HTTP 请求。 由于它比较新，所以它很方便地使用了Promise（这在浏览器接口中很少见）。

fetch("example/data.txt").then(response => {
  console.log(response.status);
  // → 200
  console.log(response.headers.get("Content-Type"));
  // → text/plain
});

调用fetch返回一个Promise，它解析为一个Response对象，该对象包含服务器响应的信息，例如状态码和协议头。 协议头被封装在类Map的对象中，该对象不区分键（协议头名称）的大小写，因为协议头名称不应区分大小写。 这意味着header.get("Content-Type")和headers.get("content-TYPE")将返回相同的值。

请注意，即使服务器使用错误代码进行响应，由fetch返回的Promise也会成功解析。 如果存在网络错误或找不到请求的服务器，它也可能被拒绝。

fetch的第一个参数是请求的 URL。 当该 URL 不以协议名称（例如http:）开头时，它被视为相对路径，这意味着它解释为相对于当前文档的路径。 当它以斜线（/）开始时，它将替换当前路径，即服务器名称后面的部分。 否则，当前路径直到并包括最后一个斜杠的部分，放在相对 URL 前面。

为了获取响应的实际内容，可以使用其text方法。 由于初始Promise在收到响应头文件后立即解析，并且读取响应正文可能需要一段时间，这又会返回一个Promise。

fetch("example/data.txt")
  .then(resp => resp.text())
  .then(text => console.log(text));
// → This is the content of data.txt

有一种类似的方法，名为json，它返回一个Promise，它将解析为，将正文解析为 JSON 时得到的值，或者不是有效的 JSON，则被拒绝。

默认情况下，fetch使用GET方法发出请求，并且不包含请求正文。 你可以通过传递一个带有额外选项的对象作为第二个参数，来进行不同的配置。 例如，这个请求试图删除example/data.txt。

fetch("example/data.txt", {method: "DELETE"}).then(resp => {
  console.log(resp.status);
  // → 405
});

405 状态码意味着“方法不允许”，这是 HTTP 服务器说“我不能这样做”的方式。

为了添加一个请求正文，你可以包含body选项。 为了设置标题，存在headers选项。 例如，这个请求包含Range协议，它指示服务器只返回一部分响应。

fetch("example/data.txt", {headers: {Range: "bytes=8-19"}})
  .then(resp => resp.text())
  .then(console.log);
// → the content

浏览器将自动添加一些请求头，例如Host和服务器需要的协议头，来确定正文的大小。 但是对于包含认证信息或告诉服务器想要接收的文件格式，添加自己的协议头通常很有用。

在网页脚本中发出 HTTP 请求，再次引发了安全性的担忧。 控制脚本的人的兴趣可能不同于正在运行的计算机的所有者。 更具体地说，如果我访问themafia.org，我不希望其脚本能够使用来自我的浏览器的身份向mybank.com发出请求，并且下令将我所有的钱转移到某个随机帐户。

出于这个原因，浏览器通过禁止脚本向其他域（如themafia.org和mybank.com等名称）发送 HTTP 请求来保护我们。

在构建希望因合法原因访问多个域的系统时，这可能是一个恼人的问题。 幸运的是，服务器可以在响应中包含这样的协议头，来明确地向浏览器表明，请求可以来自另一个域：

Access-Control-Allow-Origin: *

当构建一个需要让浏览器（客户端）的 JavaScript 程序和服务器端的程序进行通信的系统时，有一些不同的方式可以实现这个功能。

一个常用的方法是远程过程调用，通信遵从正常的方法调用方式，不过调用的方法实际运行在另一台机器中。调用包括向服务器发送包含方法名和参数的请求。响应的结果则包括函数的返回值。

当考虑远程过程调用时，HTTP 只是通信的载体，并且你很可能会写一个抽象层来隐藏细节。

另一个方法是使用一些资源和 HTTP 方法来建立自己的通信。不同于远程调用方法addUser，你需要发送一个PUT请求到users/larry，不同于将用户属性进行编码后作为参数传递，你定义了一个 JSON 文档格式（或使用一种已有的格式）来展示一个用户。PUT请求的正文则只是这样的一个用来建立新资源的文档。由GET方法获取的资源则是自愿的 URL（例如，/users/larry），该 URL 返回代表这个资源的文档。

第二种方法使用了 HTTP 的一些特性，所以使得整体更简洁。例如对于资源缓存的支持（在客户端存一份副本用于快速访问）。HTTP 中使用的概念设计良好，可以提供一组有用的原则来设计服务器接口。

通过互联网传播的数据，往往走过漫长而危险的道路。 为了到达目的地，它必须跳过任何东西，从咖啡店的 Wi-Fi 到由各个公司和国家管理的网络。 在它的路线上的任何位置，它都可能被探测或者甚至被修改。

如果对某件事保密是重要的，例如你的电子邮件帐户的密码，或者它到达目的地而未经修改是重要的，例如帐户号码，你使用它在银行网站上转账，纯 HTTP 就不够好了。

安全的 HTTP 协议，其 URL 以https://开头，是一种难以阅读和篡改的，HTTP 流量的封装方式。 在交换数据之前，客户端证实该服务器是它所声称的东西，通过要求它证明，它具有由浏览器承认的证书机构所颁发的证书。 接下来，通过连接传输的所有数据，都将以某种方式加密，它应该防止窃听和篡改。

因此，当 HTTPS 正常工作时，它可以阻止某人冒充你想要与之通话的网站，以及某人窥探你的通信。 这并不完美，由于伪造或被盗的证书和损坏的软件，存在各种 HTTPS 失败的事故，但它比纯 HTTP 更安全。

表单最初是为 JavaScript 之前的网页设计的，允许网站通过 HTTP 请求发送用户提交的信息。 这种设计假定与服务器的交互，总是通过导航到新页面实现。

但是它们的元素是 DOM 的一部分，就像页面的其他部分一样，并且表示表单字段的 DOM 元素，支持许多其他元素上不存在的属性和事件。 这些使其可以使用 JavaScript 程序检查和控制这些输入字段，以及可以执行一些操作，例如向表单添加新功能，或在 JavaScript 应用程序中使用表单和字段作为积木。

一个网页表单在其标签中包含若干个输入字段。HTML 允许多个的不同风格的输入字段，从简单的开关选择框到下拉菜单和进行输入的字段。本书不会全面的讨论每一个输入字段类型，不过我们会先大概讲述一下。

很多字段类型都使用标签。标签的type属性用来选择字段的种类，下面是一些常用的类型。

text：一个单行的文本输入框。

password：和text相同但隐藏了输入内容。

checkbox：一个复选框。

radio：一个多选择字段中的一个单选框。

file：允许用户从本机选择文件上传。

表单字段并不一定要出现在标签中。你可以把表单字段放置在一个页面的任何地方。但这样不带表单的字段不能被提交（一个完整的表单才可以），当需要和 JavaScript 进行响应时，我们通常也不希望按常规的方式提交表单。

 (text)
 (password)
 (checkbox)

   
    (radio)
 (file)

这些元素的 JavaScript 接口和元素类型不同。

多行文本输入框有其自己的标签</b>，这样做是因为通过一个属性来声明一个多行初始值会十分奇怪。<b><textarea></b>要求有一个相匹配的<b>结束标签并使用标签之间的文本作为初始值，而不是使用value属性存储文本。

<span class="hljs-attribute">one</span>
two
three

标签用来创造一个可以让用户从一些提前设定好的选项中进行选择的字段。 Pancakes Pudding Ice cream

当一个表单字段中的内容更改时会触发change事件。

 (help)
OK

I"m all right
I"m out

  Name: 

  Password: 

  Log in

  Value: 
  Save

 length: 0

   Make this page purple

Color:

   Orange


   Green


   Blue

  0001
  0010
  0100
  1000
 = 0

function readFileText(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.addEventListener(
      "load", () => resolve(reader.result));
    reader.addEventListener(
      "error", () => reject(reader.error));
    });
    reader.readAsText(file);
  });
}

localStorage.setItem("username", "marijn");
console.log(localStorage.getItem("username"));
// → marijn
localStorage.removeItem("username");

fetch("/18_http.html").then(r => r.text()).then(text => {
  console.log(`The page starts with ${text.slice(0, 15)}`);
});

// Your code here.

Next generation