webing123 / improve-every-day Goto Github PK

【转载】Ajax全接触之原生js实现ajax请求 | 小呆导航

什么是ajax？

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，它能帮助我们与服务器进行数据交换，在无需重新加载页面的情况下实现异步更新页面内容。

Ajax没有出现之前，整个web世界都是同步的，每次与服务器进行交互的时候，页面需要重新加载才能更新数据。想象一下，当你在一个没有使用ajax的网站填写一个十余项的表单时，所有内容填写完毕并提交，这时服务器返回响应结果，页面重新加载提示你某一项填错了，然后又重新开始一项项填写......顿时心中有千万只草泥马在奔腾~

Ajax技术出现后，再也不用害怕填写表单了！每当我们填完某一项内容后，浏览器会将你的数据通过异步传递给服务器，后台校验数据后返回响应结果，浏览器接收返回的数据更新到页面中，这个过程是非常快且不需要重新加载页面的，所有内容填写完毕就可以愉快地点击提交了，再也不会出现提交之后再告诉我哪里填错了！

一个完整的Ajax请求由四部分组成：创建XHR对象 > 发送HTTP请求 > 接收服务器返回的数据 > 更新页面

什么是HTTP请求？

HTTP是一种无状态协议，它指的是不建立持久的链接，也就是说服务端不会保留连接的一些相关信息，一个客户端向服务器发出请求，然后web服务器返回响应，接着连接就被关闭，这个处理过程是没有记忆的，如果后续需要处理之前传递的信息，那就需要从新发送请。

一个完整的HTTP请求过程，通常有下面7个步骤：

1. 建立TCP连接
2. web浏览器向web服务器发送请求命令
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答头信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：

1. HTTP请求的方法或动作，比如是GET还是POST请求
2. 正在请求的URL
3. 请求头，包含一些客户端环境信息，身份验证信息等
4. 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

GET请求：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST请求：一般用于修改服务器上的资源，对所发送信息的数量无限制

一个HTTP响应一般由三个部分组成：

1. 一个数字和文字组成的状态码，用来显示请求是成功还是失败
2. 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3. 响应体，也就是响应正文

HTTP状态

HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：
1XX：信息类，表示收到web浏览器的请求，正在进一步的处理中
2XX：成功，表示用户请求被正确接收，理解和处理，例如：200 OK
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误，例如404 NOT Found，意味着请求中所引用的文档不存在。
5XX：服务器错误，表示服务器不能完成对请求的处理：如500

作者：甘先森
https://juejin.im/post/5e7b47f65188255e205e8037

笔者现在读大三，所读学校为江西财经大学，前端小白一枚，正在面试中，不多说，直接上题目吧。

一面

1. 自我介绍
2. css布局
3. 自适应三栏布局
4. 事件机制
5. EventLoop
6. addEventListener第三个参数是啥，还可以为其它值吗
7. 实现下拉刷新，上拉加载更多(思路)
8. flutter中dart语言与js有啥区别
9. 异步解决方案
10. async 与 promise区别
11. 从浏览器输入url，发生了什么(详细讲下)
12. 服务端怎么响应请求
13. 介绍下项目，以及其中的难点
14. vue如何实现数据双向绑定
15. 寻找第k大元素，时间复杂度是多少？
16. 你对自己未来发展的看法

一面的话相对比较基础，项目也问的挺多的，总的来说难度还是不大，然后面试官就让我等阿里
校招开始再联系。校招开始，收到邮件，不久二面来了。

二面

1. 自我介绍
2. 项目难点
3. 为什么要有react hooks
4. hooks 原理
5. redux与flux的区别
6. redux原理
7. 你认为flutter与react native区别于在哪
8. flutter与小程序的区别
9. flutter 怎么跟 android ios等通信
10. 跨域问题
11. http与https的区别，简述https原理
12. https证书被串改怎么办
13. vue数据劫持
14. mvvm与mvc的区别
15. 快排原理以及时间复杂度，为什么
16. 怎么用栈模拟队列，队列模拟栈，有思路吗

相对于一面，二面就很难了，flutter这块我真的不是很会玩，https证书被劫持我真不知道，
菜哭了，hooks原理也没回答好，菜的眼泪直流，以为凉凉，结果三面来了。

三面

1. hooks有什么有优点
2. hooks原理
3. 简述mvvm
4. 简述vue的原理
5. 移动端事件
6. http2.0与http1.0区别
7. 简述TCP连接的过程
8. 如何开始GPU加速
9. 移动端，怎么实现滑动一个dom结构，有何优化
10. web性能优化
11. PWA原理，讲下核心点
12. webpack手写loader会吗
13. h5跟小程序有什么区别
14. 有了解前端智能化吗
15. 平时怎么学习

hooks又被问到了，webpack的loader是真没写过，h5跟小程序有什么区别？我真的不知道它们
有啥不同，为什么总是喜欢问区别？前端智能化只听过 TensorFlow.js,怎么用我真不知道，
太难了，菜是原罪，笔者就差躲在被子里哭了。第二天四面开始了，程序员周末也不休息的嘛，
太难了，面试还得继续。。。

四面

1. 自我介绍
2. 详细介绍一下你的项目
3. 难点在哪，你解决了什么问题，有什么收获
4. 你觉得你哪一种技术能力最厉害，详细讲一下
5. 你都看过哪些书籍
6. 算法了解多少，详细说一下
7. 讲一下你对node的了解
8. node底层了解吗
9. v8了解多少
10. flutter跟小程序有什么区别
11. 你知道到哪些设计模式，详细说一下
12. 你有在网上开源一些项目吗

面试官让我从头到尾的讲下项目，解决了啥难点，开源了哪些项目？，笔者菜的一批，还真没
有拿的出手的，区别，又是区别，到底有啥区别啊，心态崩了。v8这个可真不知道啊。。。
node底层？我就直到c++写的，打扰了。这次面试可能是考查知识面吧，面试官说我回答的好浅，
说白了就是菜，哭了。。。现在转行还来得及吗？菜哭了，可生活还得继续，代码还得学。

五面

1. 你了解哪些数据结构
2. 数据结构详细讲一下你最擅长的一种
3. v8有了解过吗
4. 栈跟堆有什么区别
5. 浏览器的机制你了解多少
6. flutter为什么性能高
7. flutter线程模式了解吗
8. unicode utf8 utf16有什么区别
9. post 请求表单发生乱码的情况，有哪些情况
10. webscoket 协议原理
11. 讲一门语言的编译原理
12. 小程序与web网页的区别
13. node的c++底层你研究过吗
14. 你觉得一个好的web网页，注重点在哪里
15. 你觉得未来的前端会是怎么样子

面完后，心态崩了。。。菜的晚上都睡不着。v8真不会，ndoe c++这是个啥啊。浏览器都来了，
顶不住，啥也不知道，一把辛酸泪。未来的前端是咋样的？大家觉得是啥样的复制代码

面试完就一个字，难啊。面试其实也收获很多，很多自己不了解的东西全暴露出来了， 这就勉励自己不断的去写，不面试可能这些东西基本上不会去看。笔者还是挺享受面试的， 毕竟被大佬虐，跟大佬交流还是舒服的。菜是原罪，梦想还是要有的，慢慢学吧笔者已经收到来自于头条的人生第一份offer,开森

祝大家都能收到大厂offer~

《Web 3D来了！体验不一样的春节活动》——技术篇 https://mp.weixin.qq.com/s/AuM5naNxxYk1ko-SxJafSw

项目展示

Web 3D相比传统2D展示氛围及带入感更强。我们使用的是threeJS库，完成threejs 3D微场景搭建的同时丰富页面中的交互，增强场景春节氛围感。

项目体验地址(PC端)：
https://test.mwegame.qq.com/ui/act/wegame/act-pc/wegame-20191224-newyear/server/

关键技术

4、全屏幕适配

设计稿为标准的1920px*1080px尺寸，但在小屏幕或笔记本下会出现内容显示不全的问题，给用户带来了不友好的体验。

以宽度1920px，高度1080px为参考基准，我们进行了全设备的兼容，步骤如下：

4.1、分析屏幕尺寸，以参考基础为标准，一共有五种情况：

A情况：“宽等于1920px，高等于1080px”，
B情况：“宽大于1920px，高大于1080px”
C情况：“宽小于1920px，高小于1080px”
D情况：“宽大于1920px，高小于1080px”
E情况：“宽小于1920px，高大于1080px”
核心点：获取当前浏览器尺寸。

4.2、根据不同屏幕尺寸情况进行整体缩放。

我们获取到此时浏览器实际宽高后，需要分辨出此时浏览器尺寸是“扁的”还是“高的”。

设置一个基准比例：
BaseRate = 1920/1080 = 1.777;
设置一个实时比例：
Rate = PageWidth/PageHeight;
所以，“扁的”情况为Rate > BaseRate，“高的”情况为 Rate < BaseRate。
核心点：获取出当前浏览器是“扁的”还是“高的”情况，并计算缩放比例系数。

4.3、通过比例系数进行缩放和内容重新定位。

当宽高都大于1920px1080px时：不进行放大缩放，但要对内容进行垂直和水平居中定位。
当宽高都小于1920px1080px时：

若为“扁的”情况：则需要对高度进行缩放，并且垂直居中。
若为“高的”情况：则需要对宽度进行缩放，并且水平居中。
同理，在各种情况下，我们需要对其缩放系数进行计算后进行缩放，同时还需要对内容进行垂直或水平方向的重新定位。
同时我们还需要使用window.onresize函数进行实时监听，保证用户在手动缩放浏览器大小的时候也能进行适配。
核心点：缩放后内容的重新定位，window.onresize函数的实时监听。

这样我们在各种屏幕大小下，都能满足非常好的用户阅读体验，保证用户在浏览页面的过程中全部信息的获取。