随着前端技术的发展，Web的角色从最初的“显示信息”发展出更多更丰富的功能。我们在浏览网页的时候，希望能与页面进行更多的交互，如果在交互过程中每次交互都重新渲染页面，用户体验会很差。Ajax就是在这样的情况下应运而生的。Ajax（异步JavaScript和XML）是一种在Web应用程序中实现这种交互的技术。它允许用户与服务器异步交互，在不刷新整个页面的情况下更新部分页面内容，大大提高了用户体验。本文将深入理解Ajax的工作原理，XMLHttpRequest对象的属性、方法和事件，并通过JSONPlaceHolder服务数据的案例进一步阐述Ajax和XMLHttpRequest对象的用法。Ajax的工作原理Ajax的核心思想是异步的。使用Ajax相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步。Ajax通过XMLHttpRequest对象向服务器发送异步请求。在向服务器发送请求响应并返回数据的过程中，用户可以继续与网页进行交互，而不会陷入请求等待。服务器返回数据后，根据数据的DOM操作，使用JS函数更新部分页面。所以Ajax的主要作用就是异步请求数据。我们可以将发送Ajax请求比作发送快递员，Ajax充当快递员。我们只需要将需要寄的东西交给他，他就会为我们送来。到达目的地后，快递员最终会给我们结果。XMLHttpRequest对象的属性、方法和事件XMLHttpRequest对象是Ajax的核心机制，是使用Ajax进行异步交互的核心组件。所有的请求发送和响应接收都依赖于XMLHttpRequest对象提供的属性、方法和事件。下面将详细描述XMLHttpRequest对象的属性、方法和事件。XMLHttpRequest通用对象方法方法说明newXMLHttpRequest()创建一个新的XMLHttpRequest对象abort()取消当前请求getAllResponseHeaders()返回头信息getResponseHeader()返回具体头信息open(method,url,async,user,psw)调节请求方法:请求类型GET或POSTurl:文件位置async:true（异步）或false（同步）user:可选的用户名psw:可选的密码send()将请求发送到GET请求的服务器send(string)将请求发送到POST请求的服务器setRequestHeader(header,value)为请求添加HTTP头header：指定header名称value：指定header值open方法中的method字段表示http协议中的请求方法，涉及到关于http协议的内容，由于本文关注的是Ajax，如果需要了解更多http协议的内容，可以去HTTP|MDN参考对XMLHttpRequest公共对象属性属性描述readyState保存XMLHttpRequest的状态0：请求未初始化1：服务器连接建立2：请求已接收3：请求正在处理4：请求已完成并responseisreadyresponseText（现在一般不用）以字符串形式返回响应数据responseXML（现在一般不使用）403:"Forbidden"404:"NotFound"完整列表请访问HttpMessageReferenceManualstatusText返回状态文本（如“OK”或“NotFound”注：现在数据交换格式一般为JSON，和新的Ajax提供了相应的接口。可以使用responseType属性设置返回值类型为json，然后接收数据使用response获取json数据。下面的例子会给出XMLHttpRequest公共对象事件的具体应用实例事件触发条件onreadystatechange每当xhr.readyState改变时触发；但它不会在xhr.readyState从非零值变为0时触发。在onloadstart调用xhr.send()方法后立即触发。如果没有调用xhr.send()，则不会触发该事件。onprogressxhr.upload.onprogress在上传阶段触发（即xhr.send()之后，xhr.readystate=2之前），每50ms触发一次；xhr.onprogress在下载阶段触发（即xhr.readystate=3时），每50ms触发一次。onload在请求成功完成时触发。这时候xhr.readystate=4onloadend在请求结束时触发（包括请求成功和请求失败）。从头开始算，当到达xhr.timeout设置的时间，请求还没有结束，也就是onloadend时，触发这个事件。onerror在请求过程中，如果发生Networkerror，会触发该事件（如果发生Networkerror，上传还没有结束，会先触发xhr.upload.onerror，再触发xhr.onerror；如果是Network发生错误，上传已经结束，只会触发xhr.onerror）。请注意，只有在网络层级别发生异常时才会触发此事件。对于应用层层面的异常，如果response返回的xhr.statusCode为4xx，则不属于Networkerror，因此不会触发onerror事件，但会触发onload事件。JSONPlaceHolder服务数据案例本部分将讲解如何使用Ajax获取JSONPlaceHolder数据。在此之前，先梳理一下发送Ajax请求的一般步骤（IE等浏览器已经大多弃用，所以以下方法不考虑兼容性问题）1.创建Ajax核心对象XMLHttpRequestvarxhr=newXMLHttpRequest()2.事件处理函数xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){succ(this.response);//响应成功函数}else{fail(newError("HTTPstatusRxception"));//响应失败函数}};//响应状态改变时触发该函数，其他Event替换3.发送Ajax请求xhr.open("GET","https://jsonplaceholder.typicode.com/posts”）；xhr.responseType="json";//设置返回类型为JOSNxhr.send();以上就是一般发送Ajax请求的一般步骤。下面将演示如何使用Ajax和XMLHttpRequest对象从JSONPlaceholderAPI获取数据：=新的XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4&&this.status==200){console.log(this.response);}};xhr.open("GET","https://jsonplaceholder.typicode.com/posts/1");xhr.responseType="json";request.send();除了此外，还可以使用http的其他方法完成更多的应用：使用POST方法提交表单//获取表单数据varformData=newFormData(document.querySelector('form'));//创建XMLHttpRequest对象varxhr=newXMLHttpRequest();//注册请求状态改变事件处理器xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===201){console.log(xhr.responseText);}};//初始化请求xhr.open('POST','https://jsonplaceholder.typicode.com/posts');//发送请求xhr.send(formData);使用PUT方法更新资源varupdateData={id:1,title:'UpdatedTitle',body:'UpdatedBodyText'};//创建XMLHttpRequest对象varxhr=newXMLHttpRequest();//注册请求状态更改事件处理函数xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){console.log(xhr.responseText);}};//初始化请求xhr.open('PUT','https://jsonplaceholder.typicode.com/posts/1');//设置请求头xhr.setRequestHeader('Content-Type','application/json');//发送请求xhr.send(JSON.stringify(updateData));使用DELETE方法删除资源JavaScript复制代码//创建XMLHttpRequest对象varxhr=newXMLHttpRequest();//注册请求状态改变事件处理器xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){console.log(xhr.responseText);}};//初始化请求xhr.open('DELETE','https://jsonplaceholder.typicode.com/posts/1');//发送请求xhr.send();总结其实网络请求是通过XMLHttpRequest进行的，这种方式已经有点老了，但是我们还是要了解Ajax请求的核心流程。后续的基于Ajax的原生框架虽然封装了内部细节，使用起来更加方便，但是其核心步骤还是一样的。PS：参考文章中提到，Ajax的配置和调用方式很混乱。近几年才问世的Fetch提供了一个更好的选择。它不仅提供了一种简单且合乎逻辑的方式来跨网络异步获取资源，而且可以很容易地被其他技术使用。参考文章：https://juejin.cn/post/6844904114896240647https://segmentfault.com/a/1190000019891237https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getti...https://jsonplaceholder.typicode.com/
