阿里前端面试：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

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

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

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

你这么理解：

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

Ajax的工作原理，如图：

Answer 2

要底层实现？给你底层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 3

_(:з」∠)_我觉得你可能是面试太少了。。我说说面试吧。
遇到那种回答不上来的问题，我觉得还是别直接说不会，除非你是真的听都没听过，不然你完全可以回答一些相关方面的东西，我还记得去年面搜狐实现，他们问我jquery对象和DOM对象有啥区别。。我当时不知道面试官想问的到底是什么。。。结果面试官告诉我区别就是jquery的方法不能给DOM用。。。我心里面真的是万匹草泥马跑过，这特么谁不知道。。。
后来面试就变聪明了，还是去年实习面试，有次问我web有哪些攻击手段的时候，我是真的不知道，但是我看过一篇文章关于sql注入，甚至我当时还没有想到这个词，我就说的是有的人可以在你表单提交里面插入代码注入什么什么的_(:з」∠)_这样比直接说不会要好多了。
所以面试官问一个我不懂的东西，我要是知道另外一个和这个类似功能的，我就会说啊我没听过这个，但是我知道那个XXX和这个功能类似……
或者我只是偶然看过这个概念，但是不懂，那我会说我不懂这个，但是我之前看过这个，它好像是这样……
这样其实就很容易就让面试官的思路跟着你走，在你的主场作战还是容易一点吧

Answer 4

补充一点。面试就是一个找补不足的机会，谁都不可能掌握东西，掌握的面面俱到
1.https肯定可以发送http请求，因为https就是http加上ssl加密协议。
2.这我觉得他就是一次简单的请求，就是问你js怎么去通过http协议把东西带给服务器，然后服务器响应之后再把响应报文返回，然后ajax去接受返回信息。
3.ajax请求的流程，就是完整的一次http的请求。

这几个问题，假如你了解协议，我觉得他考出花，也就那些东西。关于http协议的知识，看几本大部头的书吧。图灵出的就行，你会觉得，他考的无非就是这些东西

Answer 5

当个搬运工,有可能部分文章需要XXXX才能访问
问题5，对于dom节点优化问题，这个参考这篇文章http://developer.51cto.com/ar...

对于ajax问题，参考http://www.programering.com/a...，

对于postmessage底层协议，参考链接1： https://www2.eecs.berkeley.ed...（直接Ctrl+F找到postmessage那段）

链接2：http://blog.csdn.net/xt_xiaot...
这里在附上一点：
归结到操作系统肯定得利用到通信机制，操作系统的通信机制有主要有四点：
1.基于共享存储器系统
--共享数据结构通信
--共享存储区域通信
2.管道通信系统
组成：一个写程序，一个读程序，一个共享文件，写程序写数据到共享文件，读程序从共享文件读数据
3.消息系统
实现方式有两种
--send(recevier,message），recevie(sender,message)原语实现
--信箱的方式实现

4.客户-服务器系统
-用于远程调用

对于问题4，楼上已经说了http://www.cnblogs.com/luozhi...
附上一段代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>div可编辑</title>

        <style rel="stylesheet">
            *{
            margin:0 auto;
            }

            html,body{
                width:100%;
                height:100%;
            }

            div{
                position:relative;
                width:100px;
                height:100px;
                top:50%;
                left:50%;
                margin-top:-50px;
                margin-left:-50px;
                border:2px solid;
            }

        </style>
        
    </head>
    <body>
        <div contenteditable="true"></div>
    </body>
</html>

Answer 6

一般面试官抛出的问题都是比较发散的，你需要根据自己的分析，在原有问题的基础上分析出可能的情况，再次跟面试管确认，逐步使问题明晰。与其直接给出一个答案，这种分析问题的过程也是相当重要的

Answer 7

只说一个问题：

https 里面能发送 http 吗？

这里如果你说的是 https 的域名的网页里面能发送 http 协议的 ajax 吗？

不能，跨域了。

自己开个 node 服务调试就好了。

然后我觉得是你没理解面试官的问题吧，后来的表述完全偏离了面试官问题的初衷？

Answer 8

https服务器使用http链接控制台会报错，反过来就不会

Answer 9

我只回答第四个问题，也是查出来的。
<div id="textarea" contenteditable="true"/>
这样就可以了。
详情见：http://www.cnblogs.com/luozhi...

Answer 10

发表一下自己的想法，欢迎大佬拍砖

插一句，Ajax的协议？
不就是Http 请求吗，只不过是异步的，在后台执行的==
Http本质是Tcp。。
不知道是楼主表述不清还是面试官虎人==

Answer 11

因为之前response是一个XMl文档来着，所以叫了个asynchronous javascript and xml，现在都传json了，Ajax这个单词本来就过时了。。。我不用xhr用fetch呢？说白了就是浏览器提供给js的发送http请求的API，有啥底层实现我是不明白问这种问题是期待面试者怎样的回答？

https里面能发送http请求吗？

这要是原问题的话，我又要吐槽了。问题问的不清不楚，啥叫“https里面”？http是应用层协议直接跑在TCP上，https是http不直接跑在TCP上，中间加一层TSL/SSL，http over TSL/SSL 简称https。从前端角度讲，https的请求就是http请求啊，报头、响应头还是那一套。

ajax和http协议的关系？

关系就是，ajax是浏览器提供给前端发请求的API的名称，发出的请求是用http协议传输的。。。

你要是问websocket协议和http协议有啥关系我还是比较服的。。。

Answer 12

做项目遇到过, https可以发出的http的请求, 但是会被浏览器阻止,可以看看这篇博客

Answer 13

我从另一个角度来说说这个话题，以下单纯个人观点。

阿里前端有很多个团队，而且每个团队在技术上面都有着不同的选择。但我认为都有一个特点：比较激进。

从按你的面试题目的顺序来看，其实彼此是有相关联的。

首先：先问 https，这是肯定的，因为阿里系所有的网站都是 HTTPS，但无法在HTTPS下发送HTTP，否则HTTPS还有什么意义嘛。

其次：基于阿里的激进派这一点，如果说再以 XMLHttpRequest 来解释什么是ajax技术的话，太过老气了。

必须要用 fetch 这才符合阿里嘛，怎么可以谈 XMLHttpRequest 呢！

最后：ajax与https协议，为什么必须是HTTPS，因为必须把前面的问题连起来，而HTTPS与HTTP间的通信有一点点小区别；而且必须与跨域联系在一起。

所以，这一点从通信协议间至少应该是这样：

预检请求 > 正式通信 > 异步响应信息。

纯属YY！

Answer 14

https简单说就是http + ssl(secure socket layer)
但是在一个https的网站里，浏览器(like chrome)默认是不允许发送http的请求的，会有pop up的dialog让用户确认是否同时使用secure and nonsecure items
至于ajax的问题，我觉得围绕两个关键词：异步 和 回调函数

Answer 15

https 只是在http跟tcp中间加了一道ssl 所以是可以发送http请求的?
ajax底层实现是说得用tcp实现一个http协议？
我是个渣渣，坐等大神来回答

Answer 16

可能是你被唬住了。。。底层难道还是汇编，想到什么就说什么就好了

Answer 17

坐等大神~~~