本文只是个人学习过程的记录，知识点整理。如有不准确、不正确或补充的地方，请指出。AJAX首先创建一个HTTP请求constHttp=XMLHttpRequest();确定请求发送到的urlcosnturl='https://segmentfault.com';然后集成并发送请求Http.open('GET',url,true);//用于初始化一个request,method,url,asyncHttp.send();//用于发送请求，请求调用后实际上会发送一个POST请求，需要处理请求参数，需要更新的数据作为send()参数。Http.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头Http.onerror=function(){};//处理异常Http.abort();//终止一个请求。调用后，readyState变为0response。响应文本由responseType决定。responseType是响应的数据类型。默认为text，可手动设置为"","json","text","document","blob","arraybuffer"事件回调onreadystatechange事件监听器对请求结果进行操作，属性改变时触发Http.onreadystatechange=(e)=>{console.log(Http.response);}判断请求是否成功有两个属性，readyState和StatusHttp.onreadystatechange=(e)=>{if(this.readyState===4&&this.status===200){console.log(Http.responseText);}}readyState有五个值：0：UNSEND=>已创建，但open()尚未被调用1：OPENED=>open()已被调用2：HEADERS_RECEIVED=>send()已被调用，标题和状态可用3:LOADING=>loading,withpartialdata4:DONE=>completeonloadstart在ajax请求前触发onprogress(1<=readyState<=2)使用总资源大小total和加载大小loaded计算加载进度onload资源加载完成触发，在里面处理返回值onerror资源加载失败触发，处理错误ontimeout请求超时调用，超时时间用timeout属性设置优点：所有浏览器都支持原生浏览器API，无需引入外部代码（插入组件，组件）成熟稳定的向后兼容缺点：接口复杂，代码量大，容易陷入回调地狱JQuery使用前需要引入jquery库$.ajax最简单的方法之一，多个参数可选，get、post等都可以实现。$.ajax({url:'https://segmentfault.com',type:'GET',//或POST//data:data,//如果类型是POST//dataType:JSON或HTML,XML,TXT,jsonpsuccess:function(result){console.log(result)},error:function(err){console.log(err)}})$.get用于执行GET请求，有两个参数endpoint和callback函数$.get(url,function(data,status){console.log(`${data}`);})$.post用于执行POST请求，有三个参数endpoints，发送的数据和回调函数$.post(url,data,function(data,status){console.log(`${data}andstatusis${status}`);})$.getJSON只用于获取json格式数据$.getJSON(url,function(result){console.log(`${result}`);})优点：良好的支持和文档社区支持和文档非常好可以配置大量项目使用低学习曲线Ajax请求可以中止，因为返回的是XMLHTTPRequest对象的缺点：不使用承诺不支持承诺非浏览器本机API与本机Fetch不兼容Fetch是一个功能强大的新WebAPI，可以发起异步请求。返回一个Promise对象，可以更智能的处理异步请求。关于Promise的详细介绍，请参见ES6中的Promise章节。fetch(url,{method:"POST",//orGETheaders:{Accept:"application/json","Content-Type":"application/json",授权：`Bearer${token}`,},body:JSON.stringify(params),//POST时传更新数据，GET不需要}).then(data=>{returndata}).catch(error=>{returnerror})优点：浏??览器原生APIFetch是xmlhttprequest的增强版。使用承诺来防止回调地狱。不需要依赖项。易学易用。主流浏览器支持不足。处理json数据需要分两步。第一步是发送请求，第二步需要调用json()方法。在axios中，默认可以返回json。当收到表示错误的HTTP状态代码时，从fetch()返回的Promise不会被标记为已拒绝，即使响应HTTP状态代码是404或500。相反，它会将Promise状态标记为已解决（但设置okresolve的返回值的属性为false）并且仅在出现网络故障或请求被阻止时才拒绝。缺少abort、cancel等功能，fetch()不会接受跨域cookie；您也不能使用fetch()来建立跨域会话。来自其他站点的Set-Cookie标头字段将被忽略。fetch不发送cookie。除非您使用凭据初始化选项。（自2017年8月25日起，默认凭证策略改为同源。Firefox也在61.0b13版本修改了Axios创建HTTP请求的开源库，同样返回一个Promise。首先，axios必须引入使用。终端/命令行输入npminstallaxios--saveimportimportaxiosfrom'axios'或者基于axios，可以使用GET和POST请求和发送数据GET:axios.get(url,params)//params条件请求参数，可以留空.then(data=>{console.log(data)})catch(err=>{console.log(err)})POST:axios({method:'post',url:url,Content-Type:'application/json',//multipart/form-data,application/x-www-form-urlencodeddata:{updateData}}).then(data=>{console.log(data)}).catch(err=>{console.log(err)})优点：使用promises来防止回调地狱浏览器和node.js都适用支持上传进度可以设置响应超时只需要传配置对象给它来配置你的请求axios已经实现了可取消的promise建议自动将数据转换为JSON缺点：非原生API其他QwestSuperAgentHttp-clientSWR——虽然能用，还不完美，还有使用过程中会出现问题。参考资料：https://chinese.freecodecamp....https://cynthia0329.github.io...https://www.mzh.ren/comparing...
