摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
ajax 对于现在的前端来说已经是一件必需品了。单页应用？前后端分离？远程搜索？异步加载？能做的功能太多了。
当然，一直以来我们都是用一些封装好的api去使用（jQuery.ajax 、axios）。今天我们就来了解原生的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的优点速度更快。同等条件下，降低了流量，减少了无用数据的加载。
流量少。一个html和一个json那个更小，我就不说了吧。
保持之前的界面不变化。比如说验证码，比如说异步加载等等。可以保留历史的输入。
Ajax的核心API
XMLHttpRequest
var xhr= new XMLHttpRequest(); 创建一个XHR对象，用于发起请求
xhr.open("GET", "https://www.lilnong.top/static/json/manifest.json"); 设置为GET请求，请求https://www.lilnong.top/stati...
xhr.send(); 发送请求。这个时候浏览器会开启一个线程去请求，回调函数会放在等待队列中。
回调函数
onload
onerror
abort
onreadystatechange
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)
设置一个请求
methods为请求类型。参数如 GET POST PUT DELETE HEAD
url为请求地址。
async。true（异步） false（同步）。
send(params)发送这个请求，如果是post的话，参数是body的内容。get的话，需要带在open的url上。
支持String
FormData
blob
设置请求头 setRequestHeaderxhr.setRequestHeader(key,value);
通常有几种情况我们需要设置。
上传
setRequestHeader("Content-type","application/x-www-form-urlencoded");这样设置等于砸场子。肯定不支持。
那么常用的Content-type有什么呢？分别对应的数据是什么呢？留个作业吧（毕竟我之前写过）
token 验证
一般名字都是自定义的。登录的token。csrf 的 token。
一般来说就是拿到 response 来处理了。因为这些都是和后端协商好的。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 请求失败
onreadystatechange readyState 改变时
progress 下载进度
.upload.progress 上传进度
ontimeout 超时
onabort 被终止
其他 属性&方法timeout
unsigned long 即无符号长整型，表示该请求的最大请求时间（毫秒），超过该时间请求会自动结束。
withCredentials
Boolean，用来指定跨域的请求是否应该使用证书（如cookie或授权header头）。
.abort()
如果请求已经被发送,则立刻中止请求.
.getResponseHeader()
返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回null。
可以用来拿服务器时间
fetch --mdn，感兴趣的可以去看看，我这里只简单介绍。毕竟这个api还需要发展。
但是promise真的好爽。写起来真的好短。支持的返回类型也好多。还有就是新的API基本都是想要跨平台（想想axios）。
Window 和 WorkerGlobalScope 都实现了 WorkerOrGlobalScope。——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的 fetch() 方法。创建&发送
fetch(input[, init]);
input是你想要请求的资源。支持两种类型
一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
一个 Request 对象。
init就是一些参数
method 请求使用的方法，如 GET、POST。
headers 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
body 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
等等，还有好多，可以去MDN查看
HTTP response codes附上MDN原文地址，我只列举一些常见的。
简单来说分为五类
1xx 消息响应
2xx 成功响应
3xx 重定向
4xx 客户端错误
5xx 服务器端错误
| 状态码 | 状态描述 | 详细描述 | 常见场景 |
|---|---|---|---|
| 200 | OK (成功) | 请求成功.成功的意义根据请求所使用的方法不同而不同.GET: 资源已被提取,并作为响应体传回客户端.HEAD: 实体头已作为响应头传回客户端.POST: 经过服务器处理客户端传来的数据,适合的资源作为响应体传回客户端.TRACE: 服务器收到请求消息作为响应体传回客户端.PUT、DELETE、OPTIONS 方法永远不会返回 200 状态码. | 加载网页，加载资源，加载成功，可以说最常见 |
| 206 | Partial Content (部分内容) | 当客户端通过使用range头字段进行文件分段下载时使用该状态码 | 一般出现在大文件，比如MP4 |
| 301 | Moved Permanently (永久移动) | 该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到. | 用于永久移动，比如说http跳转到https，比如想要更换域名。通常搜索引擎爬虫抓到301会替换保存的资源地址。 |
| 302 | Found (临时移动) | 该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到 | 用于临时重定向，比如登录失效需要去登录页，比如作品目前在审核。 |
| 304 | Not Modified(未修改) | 告诉客户端,所请求的内容距离上次访问并没有变化. 客户端可以直接从浏览器缓存里获取该资源. | 一般就是js被缓存，css被缓存。当然也有写get请求数据接口也会缓存。 |
| 400 | Bad Request(错误请求) | 因发送的请求语法错误,服务器无法正常读取. | 一般来说都是body数据异常，比如服务端要params，body里面是JSON |
| 401 | Unauthorized(未授权) | 需要身份验证后才能获取所请求的内容,类似于403错误.不同点是.401错误后,只要正确输入帐号密码,验证即可通过. | |
| 403 | Forbidden(禁止访问) | 客户端没有权利访问所请求内容,服务器拒绝本次请求. | 通常都是token失效 |
| 404 | Not Found(未找到) | 服务器找不到所请求的资源.由于经常发生此种情况,所以该状态码在上网时是非常常见的. | 接口未定义，资源不存在 |
| 500 | Internal Server Error (内部服务器错误) | 服务器遇到未知的无法解决的问题. | |
| 501 | Implemented (未实现) | 服务器不支持该请求中使用的方法,比如POST 和 PUT.只有GET 和 HEAD 是RFC2616规范中规定服务器必须实现的方法. | |
| 502 | Bad Gateway (网关错误) | 服务器作为网关且从上游服务器获取到了一个无效的HTTP响应. | |
| 503 | Service Unavailable (服务不可用) | 由于临时的服务器维护或者过载,服务器当前无法处理请求.这个状况是临时的,并且将在一段时间以后恢复.如果能够预计延迟时间,那么响应中可以包含一个Retry-After:头用以标明这个延迟时间.如果没有给出这个Retry-After:信息，那么客户端应当以处理500响应的方式处理它.同时,这种情况下,一个友好的用于解释服务器出现问题的页面应当被返回,并且,缓存相关的HTTP头信息也应该包含,因为通常这种错误提示网页不应当被客户端缓存. | |
| 504 | Gateway Timeout (网关超时) | 服务器作为网关且不能从上游服务器及时的得到响应返回给客户端. |
前端培训-初级阶段（17） - 数据存储（cookie、session、stroage）
前端培训-初级阶段（13） - 正则表达式
前端培训-初级阶段（13） - 类、模块、继承
前端培训-初级阶段（13） - ECMAScript （内置对象、函数）
前端培训-初级阶段（13） - ECMAScript （语法、变量、值、类型、运算符、语句）
前端培训-初级阶段（13、18）
前端培训-初级阶段（9 -12）
前端培训-初级阶段（5 - 8）
前端培训-初级阶段（1 - 4）
中级阶段文章目录前端培训-中级阶段（2） - 事件(event) 事件冒泡、捕获 - （2019-06-20期）
前端培训-中级阶段（3） - DOM 文档对象模型（2019-06-27期）
前端培训-中级阶段（4）- BOM 浏览器对象模型（2019-07-04期）
前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）
前端培训-中级阶段（6）- jQuery元素节点操作（2019-07-18期）
前端培训-中级阶段（7）- jQuery的事件绑定链式操作及原理（2019-07-25期）
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）
资料前端培训目录、前端培训规划、前端培训计划
XMLHttpRequest
XMLHttpRequest.upload
XMLHttpRequest.readyState
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105683.html
摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 ajax ...
摘要：前端最基础的就是。的原理浏览器发送请求，服务器给出响应。保持之前的界面不变化。的核心创建一个对象，用于发起请求设置为请求，请求发送请求。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 ajax ...
摘要：上节我们讲了同源策略，这节我们讲讲如何跨域。当这些从的脚本执行出错，因为违背了同源策略为了保证用户信息不被泄露，错误信息不会显示出来，取而代之只会返回一个。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每...
摘要：同源策略是什么同源策略是浏览器的一个安全功能，不同源的数据禁止访问。或许你可以说验证，在浏览器没有同源策略的情况下这些都可以绕过去。总结同源策略是蛮好的，防御了大部分的攻击。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思...
摘要：前端最基础的就是。前面我们已经基本掌握常规的语法语义，以及基本的使用方法。等价于当载入就绪执行一个函数回调。返回一组匹配的元素。据提供的原始标记字符串，动态创建由对象包装的元素。同时设置一系列的属性事件等。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提...
阅读 2942·2021-09-24 09:47
阅读 3020·2021-09-06 15:02
阅读 2121·2019-08-30 15:48
阅读 3327·2019-08-29 11:08
阅读 3112·2019-08-26 13:55
阅读 2278·2019-08-26 13:35
阅读 3046·2019-08-26 12:11
阅读 2478·2019-08-26 11:48
