ajax请求是宏任务还是微任务_使用大白话概括网站的基本机理（2）Javascript, DOM, jQuery，Ajax...

使用HTML和CSS，我们已经可以建立一个比较完善的网站了。HTML负责结构，CSS负责显示，但是，是不是还有什么功能缺失了呢？我们今天看到的网站，似乎功能要比单纯的显示要多得多。比如我们在上网的时候经常会看到广告，而这些广告有的还是互动式的，会弹出一个对话框让你输入东西。是的，我们浏览页面的时候不仅要“看”，还要“点”。这时候，似乎单纯地使用“标签-属性”的方式无法完成任务了，因为很多时候我们的逻辑远远比“跳转到某个页面”更为复杂，例如“在所有green类的元素里面都插入一个问号并把字体设成粗体”。我们需要更复杂的编程语言来完善功能，这个语言就是JS，也就是JavaScript。

我们在点击一个按钮的时候为它设置一个名字叫做 onclick的属性，这样点击这个按钮的时候浏览器就会执行这段代码了。但是通常，我们并不把具体代码写在onclick里面，而是把一堆代码封装成一个函数，并在onclick里面调用这个函数。

（封装就是把一堆东西用一个名字代替，比如用“去上学”这个指令代替“走路去学校然后上课老师提问你就站起来不提问你就认真听讲如果当前为下课你就玩……”这一串指令。这样，写出来的代码逻辑更清晰，更方便在出现错误的时候进行调试（也就是维护））

一个简单的函数是alert。alert的作用是弹出一个对话框，和其他语言中的echo、print等没有什么区别。如果我们设置“<p οnclick="alert(123)">点击这</p>”，那么在点击这段文字的时候屏幕上就会弹出一个对话框，内容是123。但是我们肯定不会想实现这么简单的功能。我们希望实现的是对页面上的其它元素进行更改。这时候我们就需要用到DOM了。

DOM的全称是Document Object Model。在JS里面内置了一个库，它把整个文档抽象成了一个对象，这样你只要通过操作这个对象就可以操作这个文档。里面有很多方法可以用来找到特定的元素，比如document.getElementByID就是用ID来找到一个元素。里面同样有很多方法可以用来改变特定的元素，比如改变某个元素的.innerHTML就可以改变其内容。

但是，一个问题是，这么写还是太麻烦了！这些方法名太长，而且缺少一些常用的函数，我们还要手动实现。如何偷懒呢？这时候就有人写了jQuery。jQuery把这些内容封装成了更简单的包，比如如果你想要找到某个ID对应的元素只需要写$(#ID)就可以了，大大简化了操作量。jQuery和DOM没有多少本质上的不同，但是大大加快了写代码的速度。同时，我们还应当注意，更少的代码也往往意味着更少的错误。使用包后，我们能更清晰的看出来代码结构了。

粗糙的说，jQuery建立在DOM上，DOM建立在Javascript上。

Ajax则是另外一种东西。我们写页面的时候，是不是想，可不可以先加载一半东西，然后等客户请求的时候再加载另外一半？这就是Ajax的目的：我们想要加载另外一半。但是，在加载另外一半的过程中，我们还希望用户可以接着浏览网页。

首先，我们当然要先发送请求给服务器，服务器才有可能给我们需要的信息。同时，我们当然不可能让你的“Javascript先生”时时刻刻盯着“网络小姐”，一旦她收到了网站的回复就加载这些回复过来的内容。比起这，更好的方法是让你的“网络小姐”在收到信息的时候主动通知“Javascript先生”，这样既可以节约资源又让你的代码很简练。这，就是Ajax。

有了这些东西，程序员们还是感到太麻烦。同时，更深的逻辑依然没有被抽象出来。因此，许多新的框架诞生了，例如Vue和React，暂且不提。

今天的成果​www.lengjunyi.online