Eloquent JavaScript 笔记 十七：HTTP

最新推荐文章于 2024-03-21 09:37:30 发布
最新推荐文章于 2024-03-21 09:37:30 发布
阅读量542 收藏
点赞数
分类专栏： js xxx Eloquent JavaScript 学习笔记 文章标签： javascript 前端 脚本 xmlhttprequest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wershest/article/details/73526547
版权

1. The Protocol

在browser的地址栏输入 eloquentjavascript.net/17_http.html，browser会查找 eloquentjavascript.net 这个server，尝试与它的80端口建立TCP连接。

request：

如果连接成功，发送如下请求：

  GET /17_http.html HTTP/1.1
  Host: eloquentjavascript.net
  User-Agent: Your browser's name

第一行：

  method: GET, POST, DELETE, PUT

  path: server 上某个资源的路径。是磁盘上的文件还是临时生成的html，由server决定。

  version: HTTP 协议的版本号。

第二行及后面的都是header，以键值对方式出现。 Host 是必须的属性。

如果是POST，在header之后会有一个空行，空行之后是要上传的数据。

response：

server的应答如下：

  HTTP/1.1 200 OK
  Content-Length: 65585
  Content-Type: text/html
  Last-Modified: Wed, 09 Apr 2014 10:48:09 GMT

  <!doctype html>
  ... the rest of the document

第一行：

  version： HTTP 协议版本

  200: status code。 2xx 代表请求成功，4xx 代表 request 有问题(例如：404, 请求的资源不存在)，5xx 代表服务器发生错误。

  OK：status code对应的说明，便于人类阅读。

第二行及后面的都是header，以键值对方式出现。

空行以后是数据，通常叫做body。就是我们请求的html文件，browser会把它显示出来。

2. Browsers and HTTP

<form method="GET" action="example/message.html">
  <p>Name: <input type="text" name="name"></p>
  <p>Message:<br><textarea name="message"></textarea></p>
  <p><button type="submit">Send</button></p>
</form>
点击Send按钮，会发起request：

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

看看如何通过form生成这个path：

  1. method="GET" 对应request中的 GET

  2. action="example/message.html" 对应request中的path

  3. <input type="text" name="name"> 对应 request中问号后面的第一个参数 name=Jean 。 我们假设用户在testfield 中输入了: Jean 。

  4. <textarea name="message"> 对应request中的第二个参数 message=Yes%3F。我们假设用户在textarea中输入了: Yes? 。

  5. ?name=Jean&message=Yes%3F 这叫querystring。

在url中一些字符有特殊的含义，例如：?，&，= 等等，遇到这些字符需要escape，如上面的 %3F，实际上它是个 ?。这叫 URL encoding。

如果我们自己的js代码中需要做URL encoding 或 decoding，可以使用js提供的两个函数：

console.log(encodeURIComponent("Hello & goodbye"));
// → Hello%20%26%20goodbye
console.log(decodeURIComponent("Hello%20%26%20goodbye"));
// → Hello & goodbye

如果<form method="POST" ...>，name=Jean&message=Yes%3F 会作为request的body发送，而不是作为path中的querystring。

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

  name=Jean&message=Yes%3F

3. XMLHttpRequest

使用XMLHttpRequest可以通过js代码发送http request。不用刷新整个html页面就可以更新页面的一部分。是Microsoft发明的，最初用在IE中。后来主流浏览器都实现了这个功能。

一个应用实例：搜索引擎的备选列表


4. Sending a Request

var req = new XMLHttpRequest();
req.open("GET", "example/data.txt", false);
req.send(null);
console.log(req.responseText);
// → This is the content of data.txt
说明：

  1. open() 的第一个参数，request method

  2. open() 的第二个参数 "example/data.txt"，这是一个相对地址，server上相对于当前页面的路径。如果以 / 开头，指server的根目录。

  3. open() 的第三个参数，fasle - 同步请求，收到server的response之后，才会req.send() 才会返回。 true - 异步请求。

  4. send() 发送数据，body，对于GET，可以是null。

  5. req.responseText，response的body。

XMLHttpRequest 还提供了其他一些属性：

var req = new XMLHttpRequest();
req.open("GET", "example/data.txt", false);
req.send(null);
console.log(req.status, req.statusText);
// → 200 OK
console.log(req.getResponseHeader("content-type"));
// → text/plain
req.status, req.statusText, getResponseHeader() 等等。

注意，header名字是不区分大小写的。content-type 和 Content-Type 一样。

在发送请求前，我们可以用 setRequestHeader() 添加额外的 header。

5. Asynchronous Requests

鉴于网络环境的不确定性，最好使用异步请求：

var req = new XMLHttpRequest();
req.open("GET", "example/data.txt", true);
req.addEventListener("load", function() {
  console.log("Done:", req.status);
});
req.send(null);
说明：

  1. open() 的第三个参数是true。

  2. send() 函数立即返回，而此时还没有收到server的response，所以requestText为空。

  3. 添加 load 事件句柄，收到server的response时，该事件会被触发。

6. Fetching XML Data

XMLHttpRequest 之所以叫这个名字，是因为上世纪末，微软大力推广XML，期望XML成为互联网数据传输的标准。XMLHttpRequest为方便的处理XML文档，提供了辅助函数：

var req = new XMLHttpRequest();
req.open("GET", "example/fruit.xml", false);
req.send(null);
console.log(req.responseXML.querySelectorAll("fruit").length);
// → 3
req.responseXML

但时至今日，人们更倾向于使用JSON：

var req = new XMLHttpRequest();
req.open("GET", "example/fruit.json", false);
req.send(null);
console.log(JSON.parse(req.responseText));
// → {banana: "yellow", lemon: "yellow", cherry: "red"}

7. HTTP SandBoxing

XMLHttpRequest 可以向任意url发送请求吗？

基于安全原因，它只能向同一网站发送请求。这也叫 sandbox。

如果server认为可以允许向其他网站发送请求，可以在自己的response中添加如下header：

  Access-Control-Allow-Origin: *

8. Abstracting Requests

第十章讲AMD时，提到过 backgroundReadFile()，可以这么实现：

function backgroundReadFile(url, callback) {
  var req = new XMLHttpRequest();
  req.open("GET", url, true);
  req.addEventListener("load", function() {
    if (req.status < 400)
      callback(req.responseText);
  });
  req.send(null);
}
上面的代码没有做错误处理。 错误处理有两种：

  1. 可预期的，如上面的 req.status，在 if 语句后面需要加上else。

  2. 异常，对于异步请求，我们无法使用try catch捕获异常，因为，我们无法把异步代码用try包起来，send() 函数会立即返回，真正与服务器通信的代码不再我们控制范围之内。

try {
  backgroundReadFile("example/data.txt", function(text) {
    if (text != "expected")
      throw new Error("That was unexpected");
  });
} catch (e) {
  console.log("Hello from the catch block");
}
这个try只能捕获 Error("That was unexpected"); ，因为真正的通信代码都不在try块之内。

我们把backgroundReadFile() 写的更通用一些 getURL()，为了处理可预期的error，callback() 需要增加一个参数：

function getURL(url, callback) {
  var req = new XMLHttpRequest();
  req.open("GET", url, true);
  req.addEventListener("load", function() {
    if (req.status < 400)
      callback(req.responseText);
    else
      callback(null, new Error("Request failed: " +
                               req.statusText));
  });
  req.addEventListener("error", function() {
    callback(null, new Error("Network error"));
  });
  req.send(null);
}
getURL的使用方法： 

getURL("data/nonsense.txt", function(content, error) {
  if (error != null)
    console.log("Failed to fetch nonsense.txt: " + error);
  else
    console.log("nonsense.txt: " + content);
});
这么写对于异常的捕获没有任何帮助。

9. Promises

异步函数的异常如何处理？ 如果有多个异步功能需要一个接一个的执行，代码应该怎么写？ 想一想就头大。

还好，为了解决这个问题，有人写了一个库 promise （www.promisejs.org) 。 而且，这个功能已经被下一个js版本采纳。但现在，我们还是只能包含这个第三方库。

先去官网下载 promise.js，包含在自己的html中。

用Promise改写上面的例子：

function get(url) {
  return new Promise(function(succeed, fail) {
    var req = new XMLHttpRequest();
    req.open("GET", url, true);
    req.addEventListener("load", function() {
      if (req.status < 400)
        succeed(req.responseText);
      else
        fail(new Error("Request failed: " + req.statusText));
    });
    req.addEventListener("error", function() {
      fail(new Error("Network error"));
    });
    req.send(null);
  });
}
使用方法： 

get("example/data.txt").then(function(text) {
  console.log("data.txt: " + text);
}, function(error) {
  console.log("Failed to fetch data.txt: " + error);
});
说明：

  “new Promise(function(succeed, fail) { ”  这里面的succeed和fail都是function，就是then() 函数传入的两个function。

看一个串联多个异步行为的例子：

    function showMessage(msg) {
        var elt = document.createElement("div");
        elt.textContent = msg;
        return document.body.appendChild(elt);
    }

    function getJSON(url) {
        return get(url).then(JSON.parse);
    }

    var loading = showMessage("Loading ...");
    getJSON("example/bert.json").then(function (bert) {
        return getJSON(bert.spouse);
    }).then(function (spouse) {
        return getJSON(spouse.mother);
    }).then(function (mother) {
        showMessage("The name is " + mother.name);
    }).catch(function (error) {
        showMessage(String(error));
    }).then(function () {
        document.body.removeChild(loading);
    });

功能流程： 

  1. 显示loading信息。

  2. 读取 bert.json，

  3. 完成后，读取他配偶的数据，

  4. 完成后，读取配偶妈妈的数据，

  5. 完成后，显示妈妈的名字。

  6. 如果出错，显示error。

  7. 最后，无论成功还是失败，移除loading信息。

如果一个Promise(叫它PromiseA)的then() 返回一个Promise(叫它PromiseB)，那么，PromiseA执行完之后，就会执行PromiseB。上个例子中串联了多个异步调用。 

其中任何一个异步调用出错，都会跳转到catch。 最后一个then类似于异常处理中的finally，不论发生任何情况，都会被执行。

Promise 的原理和接口远不止这些，需要找一个专门的文档看一看。

10. Appreciating HTTP

bla bla bla，没啥好看的。

11. Security and HTTPS

通过HTTP访问网络时，中间不知道要经过多少台路由器、网关、服务器，而HTTP协议本身传输的内容都是明文（文本、字符串），如果有敏感/重要数据的话，这是很危险的，中途可能被人劫持、篡改。例如，银行账号、密码。

为了提高安全性，需要用HTTPS。通过HTTPS协议传输的数据都是加密的，使用非对称加密算法。由大家信任的机构分发证书，发送数据时，使用证书中的密钥加密。由于算法足够复杂，破解很困难，从而避免了数据劫持。

12. Exercise: Content Negotiation

客户端给server发送请求时，可以添加一种header： 

   accept: type

type就是文档类型，例如：text/html, appplication/json 等。

server根据type，发送不同的response。

function requestAuthor(type) {
  var req = new XMLHttpRequest();
  req.open("GET", "http://eloquentjavascript.net/author", false);
  req.setRequestHeader("accept", type);
  req.send(null);
  return req.responseText;
}

var types = ["text/plain",
             "text/html",
             "application/json",
             "application/rainbows+unicorns"];

types.forEach(function(type) {
  try {
    console.log(type + ":\n", requestAuthor(type), "\n");
  } catch (e) {
    console.log("Raised error: " + e);
  }
});

13. Waiting for Multiple Promises

对promise还不熟，以后再看。


wershest
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Eloquent JavaScript
10-19
This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but contain a lot more hidden complexity, and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.
Eloquent JavaScript 笔记 十五：A Platform Game
wershest的专栏
06-24 1274
好多年没有见到这种游戏场景了，还记得 “超级玛丽” 吗？ 当年的红白机都带有这类游戏。 这一章用几百行代码实现一个游戏，很有可玩性。 DOM居然能用来显示这样的游戏场景，神奇啊。
Eloquent JavaScript 笔记 十一：A Programming Language
wershest的专栏
06-18 381
本章使用js实现Egg语言的解释器。解释器是一个复杂的概念，也许需要单独的一本书来讲解。作者通过一个短小精炼的语言Egg，用一章的篇幅就实现了解释器的基本功能，一共不超过200行代码，可谓神奇，同时也充分体现了js的神奇之处。 通过本章的学习，不仅可以复习前几章的概念，同时，对js语言本身的实现机制也会有更深层次的理解。
Eloquent-[removed]来自 Eloquent JavaScript 的笔记
06-23
以上只是《Eloquent JavaScript》笔记的部分要点，实际内容还包括函数式编程、测试、调试、Web应用开发等多个方面。通过深入学习这些知识点，可以全面提高JavaScript编程技能，并为开发复杂的Web应用程序打下坚实...
javascript-learnings:存储来自 eloquent javascript、coderbyte、code school、codecademy 等的 javascript 练习的地方
06-12
在这个"javascript-learnings-master"压缩包中，你可能会找到这些平台的练习代码、解答、甚至可能有学习者的注释和笔记，这些都是宝贵的资源，可以帮助你在实践中深化对JavaScript的理解，提升编程能力。通过这些...
eloquent-javascript
05-25
在压缩包“eloquent-javascript-master”中，我们可以期待找到与JavaScript相关的各种章节、练习、代码示例以及可能的解决方案。 JavaScript，由Brendan Eich在1995年为Netscape Navigator浏览器开发，是一种广泛...
Eloquent-JavaScript-Notes
03-20
"Eloquent-JavaScript-Notes"很可能是这本书的注释版或者学习笔记，包含了作者或读者在阅读过程中对书中的概念、示例和技巧的解释和拓展。 JavaScript是一种轻量级的解释型编程语言，主要用于网页和网络应用开发。...
JavascriptLearning:保存javascript的练习题。使用的参考书是Marijn Haverbeke的Eloquent JavaScript（第三版）
05-23
使用的参考书是Marijn Haverbeke的Eloquent JavaScript（第三版）。 可以在 测试代码，部分代码参考了原作者的标程。 从第八章开始因为项目原因要加速学习，就不记笔记了，等全部学完整理笔记的时候再补上。 暂时学...
Eloquent JavaScript 3rd Edition (EPUB)
12-26
Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming (EPUB)
Eloquent JavaScript 3rd Edition (True PDF)
12-26
Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming (True PDF)
Eloquent_JavaScript.pdf
09-19
语言：英语 Introduction This is a book about getting computers to do what you want them to do. Computers are about as common as screwdrivers today, but they contain a lot more hidden complexity and thus are harder to operate and understand. To many, they remain alien, slightly threatening things.
Eloquent JavaScript(3rd) 无水印原版pdf
05-07
Eloquent JavaScript(3rd) 英文无水印原版pdf 第3版 pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书
Eloquent JavaScript 笔记 十九：Node.js
wershest的专栏
06-30 613
几年前就听说过node.js，但没有仔细了解过，一直以为它是专门用来编写web server的。读了这一章才知道，node.js 多么神奇，有了它，js就可以做任何事了。
推荐开源项目：Eloquent JavaScript——一份现代JavaScript编程指南
最新发布
gitblog_00075的博客
03-21 371
推荐开源项目：Eloquent JavaScript——一份现代JavaScript编程指南 项目地址:https://gitcode.com/braziljs/eloquente-javascript Eloquent JavaScript 是一个由BrazilJS社区维护的开源项目，它提供了一本深入且全面的JavaScript编程指南。这本书以Markdown格式编写，方便阅读和贡献，并且完全...
ELOQUENT JAVASCRIPT
weixin_30314631的博客
01-21 165
(渣翻译,娱乐向,消遣读物,感谢有道词典,百度翻译等). 原文:传送门 　　　　　　　　　　　　　　　　　　　　　　 ELOQUENT JAVASCRIPT　Written by Marijn Haverbeke 　　介绍： 　　　　　　这是一本让计算机变成类似于’你的女仆‘一样存在的书，让它做你想让它做的事情 →＿→。 　　　　　　现在，计算机变的越来越和螺丝刀一样平常了，但...
Eloquent JavaScript 笔记 十三：DOM
wershest的专栏
06-20 794
DOM 是网页的核心，也是js与HTML之间连接的纽带。 js的最主要用途就是操作DOM，或者说，没有DOM，js也许就不会存在。这一章系统的讲解了各种各样的DOM概念和操作。
Eloquent JavaScript：现代编程入门
"Eloquent JavaScript, A Modern Introduction to Programming" 《Eloquent JavaScript》是一本现代JavaScript编程的入门书籍，由Marijn Haverbeke撰写。这本书涵盖了JavaScript的基础知识以及更高级的主题，旨在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值