前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。Ajax已经是当前前端的必需品。单页应用？前后端分离？远程搜索？异步加载？能做的功能太多了。当然，我们一直使用一些封装好的API（jQuery.ajax、axios）。今天我们将学习原生Ajax。什么是阿贾克斯？AsynchronousJavaScript+XML（AsynchronousJavaScriptandXML），本身并不是一种技术，而是JesseJamesGarrett在2005年提出的一个新术语，用来描述一种使用现有技术集合的“新”方法，包括：HTML或XHTML，CascadingStyleSheets、JavaScript、文档对象模型、XML、XSLT和最重要的XMLHttpRequest对象。当结合使用AJAX模型和这些技术时，Web应用程序可以快速向用户界面呈现增量更新，而无需重新加载（刷新）整个页面。这允许程序更快地响应用户操作。虽然X在Ajax中代表XML，但由于JSON具有许多优点，例如更轻便并且是Javascript的一部分，因此目前比XML更常用。JSON和XML都用于在Ajax模型中打包信息。Ajax的原理是浏览器发送请求HttpRequest，服务器响应HttpResponse。与正常打开页面不同，Ajax通常使用的数据需要进行二次处理。比如，一首歌的歌曲信息通过Ajax加载后，我们将数据按照一定的方式展示在页面上。当然我们的html页面也是通过这个原理来显示的，只不过是浏览器拉出来，然后解析html，渲染出来给我们看。Ajax的优点是速度更快。在同等条件下，降低了流量，减少了无用数据的加载。更少的流量。一个html和一个json比较小，就不说了。保持之前的界面不变。比如验证码，比如异步加载等等。可以保留历史输入。Ajax的核心APIXMLHttpRequestvarxhr=newXMLHttpRequest();创建用于发起请求的XHR对象xhr.open('GET','https://www.lilnong.top/static/json/manifest.json');设置对于GET请求，请求https://www.lilnong.top/stati...xhr.send();发送请求。这时候浏览器会开启一个线程去请求，回调函数会被放到等待队列中。回调函数onloadonerrorabortonreadystatechangeFetch比XHR更新的API。支持Promise简直不要太酷。fetch('https://www.lilnong.top/static/json/manifest.json').then(response=>response.json()).then(data=>console.log(data));之前XMLHttpRequest我们对XHR有了一个大概的了解，下面来深入介绍一下。要测试地址，可以点击按钮，然后查看网络中的请求。新建一个XHR对象newXMLHttpRequest();没有参数旧版本的InternetExplorer（IE5和IE6）使用ActiveX对象：newActiveXObject("Microsoft.XMLHTTP");。说到与ie的兼容，不用jquery的人少之又少。使用XHR对象发送请求xhr=newXMLHttpRequest();xhr.open("GET","https://www.lilnong.top/static/json/front-end.json",true);xhr.send();open(method,url,async)将请求方法设置为请求类型。GETPOSTPUTDELETEHEADurl等参数为请求地址。异步。真（异步）假（同步）。send(params)发送这个请求，如果是post，参数就是body的内容。对于get，需要在openurl上带上。支持StringFormDatablob设置请求头setRequestHeaderxhr.setRequestHeader(key,value);通常有几种情况我们需要设置。上传setRequestHeader("Content-type","application/x-www-form-urlencoded");这个设定相当于砸场子。当然不支持。那么常用的Content-type有哪些呢？对应的数据是什么？留个作业（毕竟之前写过）token验证的总称是custom。登录令牌。csrf的令牌。一般来说，响应就是获取响应的过程。因为这些都是和后端协商好的。JSON、XML或其他数据。可以返回ArrayBuffer、Blob、Document、DOMString，具体是哪种类型取决于XMLHttpRequest.responseType的值。只要readyState发生变化，就会触发onreadystatechange事件。为了表示XHR的当前状态，onreadystatechange事件被触发4次（0-4），分别为：0-1、1-2、2-3、3-4，对应readyState的每次变化。0：请求未初始化1：服务器连接已建立2：请求已收到3：请求正在处理4：请求已完成，响应准备好（status为返回的状态码）回调onload请求成功onerror请求失败onreadystatechangereadyState改变进度下载progress.upload.progress上传进度ontimeout超时onabort终止其他属性&方法timeoutunsignedlong为无符号长整型，表示请求的最大请求时间（毫秒），请求将超过这个时间自动结束。withCredentialsBoolean，用于指定跨域请求是否应该使用证书（比如cookies或者authorizationheaders）。如果请求已经发送，.abort()会立即中止请求。.getResponseHeader()返回包含指定响应标头的字符串，如果未收到响应或响应中不存在标头，则返回null。它可以用来获取服务器时间fetchfetch--mdn。如果你有兴趣，可以去看看。我这里只简单介绍一下。毕竟这个api还是要开发的。但是承诺真的很酷。写起来真的很短。还有许多支持的返回类型。此外，新的API基本上希望是跨平台的（想想axios）。Window和WorkerGlobalScope都实现了WorkerOrGlobalScope。——也就是说，基本上在任何场景下只要你想获取资源，都可以使用位于WorkerOrGlobalScope中的fetch()方法。创建并发送fetch(input[,init]);input是您要请求的资源。支持两种类型。一个USVString字符串，包含要获取的资源的URL。一些浏览器会接受blob:和data:作为方案。请求对象。init是一些参数方法请求使用的方法，比如GET和POST。headers请求的标头，采用Headers对象或包含ByteString值的对象文字的形式。body请求的主体信息：它可以是一个Blob、BufferSource、FormData、URLSearchParams或USVString对象。请注意，使用GET或HEAD方法的请求不能包含正文信息。等等，还有很多，大家可以去MDN查看HTTP响应码，附上MDN原地址，我只列举一些常见的。简而言之分为五类：1xx消息响应2xx成功响应3xx重定向4xx客户端错误5xx服务器错误状态码状态描述常见场景详细描述200OK（成功）请求成功。成功的含义取决于请求使用的方法不同。GET：资源已被提取并作为响应主体发送回客户端。HEAD：实体头已经作为响应头发送回客户端。POST：服务器处理完来自客户端的数据后，将合适的资源作为响应体返回给客户端。TRACE：服务器端接收到请求报文，作为响应体返回给客户端。PUT、DELETE和OPTIONS方法永远不会返回200状态代码。加载网页，加载资源，加载成功，可以说是最常见的206PartialContent（部分内容内容）当客户端使用范围头字段分段下载文件时，这种状态码一般出现在大文件中，比如MP4301MovedPermanently（永久移动）。此状态码表示请求的URI资源路径已更改，将更改新的URL。在响应的Location:标头字段中找到。用于永久移动，比如从http跳转到https，比如更换域名。通常搜索引擎爬虫在抓到301时会替换保存的资源地址。302Found（临时移动）这个状态码表示请求的URI资源路径暂时改变了，可能还会继续改变。因此，客户端必须在以后的访问中继续使用该URI。新的URL会在响应的Location:header字段中找到它，用于临时重定向，例如，如果登录无效需要转到登录页面，例如当前工作正在审核中。304NotModified（未修改）告诉客户端请求的内容自上次访问后没有改变。客户端可以直接从浏览器缓存中获取资源。一般缓存js，缓存css。当然还有writeget请求数据接口也会缓存。400BadRequest（坏请求）由于发送的请求语法错误，服务器无法正常读取。一般来说，身体数据不正常。比如服务端需要params，body是JSON401Unauthorized（未授权）。获取请求需要认证内容类似于403错误。不同的是，401错误后，只要正确输入账号密码，即可通过验证。403Forbidden（禁止访问）客户端无权访问请求的内容，服务器拒绝该请求。通常令牌失效404NotFound（未找到）服务器找不到请求的资源。由于这种情况经常发生，所以这个状态码在上网时很常见。接口未定义，资源不存在。500InternalServerError（内部服务器错误）服务器遇到未知且无法解决的问题。501Implemented（未实现）服务器不支持请求中使用的方法，例如POST和PUT。只有GET和HEAD是服务器必须在RFC2616规范中实现的方法。502BadGateway(gatewayError)服务器作为网关，从上游服务器得到无效的HTTP响应。503服务不可用（ServiceUnavailable）由于临时服务器维护或过载，服务器当前无法处理请求。这种情况是暂时的，将在一段时间内恢复。如果可以预期延迟时间，则响应可以包含Retry-After:标头以指示延迟时间。如果没有给出Retry-After:信息，客户端应将其作为500响应处理。同时，在这种情况下，应该返回一个解释服务器问题的友好页面，并且还应该包含缓存相关的HTTP头信息，因为通常这种错误表明该网页不应该被缓存客户。504GatewayTimeout（网关超时）服务器作为网关，无法及时得到上游服务器的响应返回给客户端。微信公众号：前端linong初级阶段文章目录前端训练-初级阶段(17)-数据存储(cookie,session,stroage)前端训练-初级阶段(13)-正则表达式前端训练-初级阶段(13)-类、模块、继承前端训练-初级阶段(13)-ECMAScript(内置对象、函数)前端训练-初级阶段(13)-ECMAScript(语法、变量、值，类型，operator,statement)前端训练-初级阶段(13,18)前端训练-初级阶段(9-12)前端训练-初级阶段(5-8)前端训练-初级阶段(1-)4)中间阶段文章目录前端训练-中间阶段(2)-事件(event)事件冒泡、捕获-(2019-06-20期)前端训练-中间阶段(3)-DOM文档对象模型(2019-06-27期）前端实训-中级（四）-BOM浏览器对象模型（2019-07-04期）前端实训-中级（五）-jQuery的概念和基本使用（2019-07-11期)前端实训-中级(6)-jQuery元素节点操作(2019-07-18期)前端实训-中级(7)-jQuery事件绑定链操作及原理(2019-07-25期)前端训练-中级阶段(8)-jQueryElement属性样式操作(2019-08-01期)前端训练目录,前端训练计划,前端训练计划XMLHttpRequestXMLHttpRequest.uploadXMLHttpRequest.readyState
