前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

ajax 对于现在的前端来说已经是一件必需品了。单页应用？前后端分离？远程搜索？异步加载？能做的功能太多了。
当然，一直以来我们都是用一些封装好的api去使用（jQuery.ajax 、axios）。今天我们就来了解原生的Ajax。

Ajax是什么？

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

Ajax的原理

浏览器发送请求 HttpRequest，服务器给出响应 HttpResponse。不同于正常打开页面的是，Ajax通常使用的数据需要二次加工。
比如一首歌的歌曲信息，使用Ajax加载到之后，我们再通过一定的方式把数据显示在页面之上。

当然，我们的html页面，也是通过这样的原理展示的，只不过是浏览器去拉，然后解析html，渲染给我们看。

Ajax的优点

1. 速度更快。同等条件下，降低了流量，减少了无用数据的加载。
2. 流量少。一个html和一个json那个更小，我就不说了吧。
3. 保持之前的界面不变化。比如说验证码，比如说异步加载等等。可以保留历史的输入。

Ajax的核心API

1. XMLHttpRequest

   1. var xhr= new XMLHttpRequest(); 创建一个XHR对象，用于发起请求
   2. xhr.open('GET', 'https://www.lilnong.top/static/json/manifest.json'); 设置为GET请求，请求https://www.lilnong.top/stati…
   3. xhr.send(); 发送请求。这个时候浏览器会开启一个线程去请求，回调函数会放在等待队列中。

   4. 回调函数

      1. onload
      2. onerror
      3. abort
      4. onreadystatechange

2. Fetch
   一个比 XHR 更新的 API。支持 Promise，简直不要太爽。

    fetch('https://www.lilnong.top/static/json/manifest.json')
        .then(response=>response.json())
        .then(data=>console.log(data));

XMLHttpRequest

之前我们已经大体的了解一下XHR，下面我们深入的介绍一下。测试地址，可以点按钮，然后看network中的请求

new 一个 XHR 对象

new XMLHttpRequest();无参

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP");。话说兼容ie，还不用jquery的人很少吧。

使用 XHR 对象发送请求

xhr = new XMLHttpRequest();
xhr.open("GET","https://www.lilnong.top/static/json/front-end.json",true);
xhr.send();

open(method,url,async)

设置一个请求

1. methods为请求类型。参数如 GET POST PUT DELETE HEAD
2. url为请求地址。
3. async。true（异步） false（同步）。

send(params)

发送这个请求，如果是post的话，参数是body的内容。get的话，需要带在open的url上。

1. 支持String
2. FormData
3. blob

设置请求头 setRequestHeader

xhr.setRequestHeader(key,value);
通常有几种情况我们需要设置。

1. 上传
   setRequestHeader("Content-type","application/x-www-form-urlencoded");这样设置等于砸场子。肯定不支持。
   那么常用的Content-type有什么呢？分别对应的数据是什么呢？留个作业吧（毕竟我之前写过）
2. token 验证
   一般名字都是自定义的。登录的token。csrf 的 token。

响应

一般来说就是拿到 response 来处理了。因为这些都是和后端协商好的。JSON、XML、或者其他数据。
可以返回ArrayBuffer、Blob、Document、DOMString，具体是哪种类型取决于XMLHttpRequest.responseType的值。

readyState

每当 readyState 改变时，就会触发 onreadystatechange 事件。标明当前XHR的状态，onreadystatechange 事件被触发 4 次（0 – 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪（status为返回的状态码）

回调

1. onload 请求成功
2. onerror 请求失败
3. onreadystatechange readyState 改变时
4. progress 下载进度
5. .upload.progress 上传进度
6. ontimeout 超时
7. onabort 被终止

其他 属性&方法

1. timeout
   unsigned long 即无符号长整型，表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。
2. withCredentials
   Boolean，用来指定跨域的请求是否应该使用证书（如cookie或授权header头）。
3. .abort()
   如果请求已经被发送,则立刻中止请求.
4. .getResponseHeader()
   返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。
   可以用来拿服务器时间

fetch

fetch –mdn，感兴趣的可以去看看，我这里只简单介绍。毕竟这个api还需要发展。

但是promise真的好爽。写起来真的好短。支持的返回类型也好多。还有就是新的API基本都是想要跨平台（想想axios）。

Window 和 WorkerGlobalScope 都实现了 WorkerOrGlobalScope。——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。

创建&发送

fetch(input[, init]);
input是你想要请求的资源。支持两种类型

1. 一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
2. 一个 Request 对象。

init就是一些参数

1. method 请求使用的方法，如 GET、POST。
2. headers 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
3. body 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
4. 等等，还有好多，可以去MDN查看

HTTP response codes

附上MDN原文地址，我只列举一些常见的。
简单来说分为五类

1. 1xx 消息响应
2. 2xx 成功响应
3. 3xx 重定向
4. 4xx 客户端错误
5. 5xx 服务器端错误

微信公众号：前端linong

初级阶段文章目录

1. 前端培训-初级阶段（17） – 数据存储（cookie、session、stroage）
2. 前端培训-初级阶段（13） – 正则表达式
3. 前端培训-初级阶段（13） – 类、模块、继承
4. 前端培训-初级阶段（13） – ECMAScript （内置对象、函数）
5. 前端培训-初级阶段（13） – ECMAScript （语法、变量、值、类型、运算符、语句）
6. 前端培训-初级阶段（13、18）
7. 前端培训-初级阶段（9 -12）
8. 前端培训-初级阶段（5 – 8）
9. 前端培训-初级阶段（1 – 4）

中级阶段文章目录

1. 前端培训-中级阶段（2） – 事件(event) 事件冒泡、捕获 – （2019-06-20期）
2. 前端培训-中级阶段（3） – DOM 文档对象模型（2019-06-27期）
3. 前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
4. 前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
5. 前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）
6. 前端培训-中级阶段（7）- jQuery的事件绑定链式操作及原理（2019-07-25期）
7. 前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

资料

1. 前端培训目录、前端培训规划、前端培训计划
2. XMLHttpRequest
3. XMLHttpRequest.upload
4. XMLHttpRequest.readyState