阿里前端面试：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的工作原理，如图：