阿里前端面试：ajax的底层实现？

Question

刚才阿里电话面试，聊了一下协议，问：https里面能发送http请求吗？对https没接触过，这个问题理所当然没有底气回答了；紧接着就问ajax协议（模糊记得他说的是ajax协议，有“协议”俩字，不是十分肯定了，但ajax不是一种技术吗？？），问ajax底层怎么实现的？？？一下就懵掉了！当他问底层怎么实现的时候，我在想：XMLHttpRequest这个东西怎么实现的，用到什么协议，我确实没了解过，书本上好像也没说过。面试完之后我查了一下，我发现大多数博客就是写的用原生js怎么发送ajax请求的：难道他问的就是怎么用原生js发送ajax请求吗？我的天哪，这个问题我都能倒背如流啊(；′⌒`)so，请路过的大神解惑，谢谢：1.https里面能发送http请求吗？2.ajax底层怎么实现的？3.ajax和http协议的关系？补充点其他的问题供吃瓜群众参考：1.讲到跨域的时候，我说了postMessage，然后问：postMessage的实现原理是什么？GG...2.还是跨域相关的，我讲到了jsonp，原理肯定要说一下的，然后问：callback函数的名字能不能重复？如果能重复，怎么区别？比如，a、b两个请求，callback名字一样，怎样去区分返回的数据是a的还是b的3.textarea和input有什么区别4.用一个div模拟textarea的实现5.一个页面dom节点太多，会出现什么问题（应该是卡顿），怎么优化其他的不太记得了，整个面试过程感觉被虐得体无完肤。html我一直以为除了语义化没啥可问的了，可我们聊了有二十分钟的html吧，很多问题，也是见识了。。。

Answer 1

要底层实现？给你底层C++的伪代码。

[Exposed=(Window,DedicatedWorker,SharedWorker)]

interface XMLHttpRequestEventTarget : EventTarget {

  // event handlers

  attribute EventHandler onloadstart;

  attribute EventHandler onprogress;

  attribute EventHandler onabort;

  attribute EventHandler onerror;

  attribute EventHandler onload;

  attribute EventHandler ontimeout;

  attribute EventHandler onloadend;

};

[Exposed=(Window,DedicatedWorker,SharedWorker)]

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

enum XMLHttpRequestResponseType {

  "",

  "arraybuffer",

  "blob",

  "document",

  "json",

  "text"

};

[Constructor,

 Exposed=(Window,DedicatedWorker,SharedWorker)]

interface XMLHttpRequest : XMLHttpRequestEventTarget {

  // event handler

  attribute EventHandler onreadystatechange;

  // states

  const unsigned short UNSENT = 0;

  const unsigned short OPENED = 1;

  const unsigned short HEADERS_RECEIVED = 2;

  const unsigned short LOADING = 3;

  const unsigned short DONE = 4;

  readonly attribute unsigned short readyState;

  // request

  void open(ByteString method, USVString url);

  void open(ByteString method, USVString url, boolean async, optional USVString? username = null, optional USVString? password = null);

  void setRequestHeader(ByteString name, ByteString value);

           attribute unsigned long timeout;

           attribute boolean withCredentials;

  [SameObject] readonly attribute XMLHttpRequestUpload upload;

  void send(optional (Document or BodyInit)? body = null);

  void abort();

  // response

  readonly attribute USVString responseURL;

  readonly attribute unsigned short status;

  readonly attribute ByteString statusText;

  ByteString? getResponseHeader(ByteString name);

  ByteString getAllResponseHeaders();

  void overrideMimeType(DOMString mime);

           attribute XMLHttpRequestResponseType responseType;

  readonly attribute any response;

  readonly attribute USVString responseText;

  [Exposed=Window] readonly attribute Document? responseXML;

};

Answer 2

A：你在看Ajax底层实现，没必要吧？ 
B：有必要，招人面试时装B用。

PS：恭喜你从coding farmer升级为coding chef

其实对于Ajax理解几个关键词就够了，异步/回调/线程，至于怎么做的，真的没必要太深入。

你这么理解：

Ajax是告诉浏览器给我要发送一个HTTP请求，你给我新开个线程去执行下，完事后告诉我一声，我在其他function中执行后续操作（回调）。在线程返回结果前，我可以继续做其他事情。（异步）

Ajax的工作原理，如图：