前言AJAX是一种创建快速动态网页的技术。（是一种实现客户端与服务端数据交互的技术。）它让开发者只需要从服务端获取数据（而不是图片、html文档等资源），互联网资源的传输变得前所未有的轻量级和pure,whichinspired在广??大开发者的创造力的启发下，各种功能强大的网站和互联网应用如雨后春笋般涌现，不断给人们带来惊喜。一、什么是AJAXAjax是一种异步请求数据的Web开发技术，对提高用户体验和页面性能有很大帮助。简单的说，Ajax就是通过异步请求加载后台数据，在不重新刷新页面的情况下呈现在网页上。常见的应用场景包括表单验证是否登录成功、百度搜索下拉框提示、快递单号查询等。Ajax的目的：提高用户体验，减少网络数据传输量。同时，由于AJAX请求获取的是数据而不是html文档，也节省了网络带宽，使互联网用户的网上冲浪体验更加流畅。2、AJAX的原理是什么Ajax相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步。并不是所有的用户请求都提交给服务器，一些数据校验和数据处理交给Ajax引擎自己处理，只有当确定需要从服务器读取新数据时，Ajax引擎才向服务器提交请求代表它。Ajax的原理简单来说就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后使用JavaScript操作DOM来更新页面。最关键的一步是从服务器获取请求数据。要想清楚这个过程和原理，就必须要对XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制。它最早出现在IE5中，是一种支持异步请求的技术。简单地说，JavaScript可以向服务器发出请求并及时处理响应，而不会阻塞用户。达到不刷新的效果。3.AJAX的基本代码（兼容IE7）varxhr=newXMLHttpRequest();//注册一个事件，当ajax的状态改变时，会触发xhr.onreadystatechange=function(){if(xhr.readyState===4){//不管成功还是失败，只要结尾是4letres=xhr.responseText;}}if（是一个GET请求）{xhr.open('请求方法','url?parameter=value¶meter=value');xhr.send();}if(是POST方法){xhr.open('requestmethod','url');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('parameter=value¶meter=value');}1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)letxhr=null;if(window.`XMLHttpRequest`){//兼容IE7+,Firefox,Chrome,Opera,Safarixhr=new`XMLHttpRequest`();}else{//兼容IE6、IE5xhr=newActiveXObject("Microsoft.XMLHTTP");}2.向服务器发送请求xhr。打开（方法，网址，异步）；send(string);//字符串参数只用于`POST`请求??，否则不需要参数。method：请求的类型；GET或POSTurl：文件在服务器上的位置async：true（异步）或false（同步）注意：POST请求必须设置请求头的格式内容xhr.open("`POST`","test.HTML",真);xhr.setRequestHeader("内容类型","application/x-www-form-urlencoded");xhr.send("fname=亨利&lname=福特");//`POST`请求参数放在send中，即请求体是Promise对象实现的Ajax操作的例子：constgetjsON=function(url){constpromise=newPromise(function(resolve,reject){consthandler=function(){if(this.readyState!==4){return;}if(this.status===200){resolve(this.response);}else{reject(newError(this.statusText));}};constclient=newXMLHttpRequest();client.open("GET",url);client.onreadystatechange=handler;client.responseType="json";client.setRequestHeader("接受","应用程序/json");client.send();});回报承诺；};getJSON("/posts.json").then(function(json){console.log('Contents:'+json);},函数（错误）{console.error（'错误'，错误）；});3、服务端响应处理（区分同步和异步情况）responseText获取字符串形式的响应数据responseXML获取XML形式的响应数据。同步处理xhr.open("`GET`","info.txt",false);xhr.发送();document.`GET`ElementById("mydiv").innerHTML=xhr.responseText;//直接获取数据异步处理显示在页面上（推荐）比较复杂，应该在请求状态改变事件中处理。xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.`GET`ElementById("mydiv").innerHTML=xhr.responseText;什么是readyState？readyState是XMLHttpRequest对象的一个??属性，用于标识当前XMLHttpRequest对象处于什么状态。readyState一共有5个状态值，分别为0~4，每个值代表不同的含义：0：未初始化-.open()方法尚未被调用；1：Startup——已经调用了.open()方法，但是还没有调用.send()方法；2：Send——已经调用了.send()方法，但是还没有收到响应；:Receive——接收到部分响应数据；4：Complete——整个响应数据已经收到，可以在客户端使用；什么是状态？HTTP状态码（status）由三个十进制数组成。第一个十进制数字定义了状态码的类型，最后两个数字没有分类功能。HTTP状态码分为5种：1xx(provisionalresponse)：表示临时响应，需要请求者继续执行操作的状态码。2xx（成功）：表示请求已成功处理的状态代码。3xx（重定向）：表示需要进一步操作才能完成请求。通常，这些状态代码用于重定向。4xx（错误请求）：这些状态代码表示请求可能出现问题，导致服务器无法处理它。5xx（服务器错误）：这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求的错误。常见的状态码，仅RFC2616就记录了40种HTTP状态码，如果加入WebDAV（RFC4918、5842）和额外的HTTP状态码（RFC6585）等扩展，数量将达到60多种。接下来，我们将介绍其中一些具有代表性的状态码。200表示客户端的请求在服务器端正常处理。204表示请求处理成功，但是没有返回资源。301意味着永久重定向。此状态代码表示已为请求的资源分配了一个新的URI，并且将来应该使用该资源现在引用的URI。02表示临时重定向。304表示客户端发送条件请求（指使用GET方法请求报文中包含if-matched、if-modified-since、if-none-match、if-range、if-unmodified-since任意header）服务端允许请求访问资源，但是因为请求不满足条件，直接返回304Modified（服务端资源没有变化，可以直接使用客户端未过期的缓存）400表示有请求消息中的语法错误。当出现错误时，需要修改请求内容，重新发送请求。401表示未授权（Unauthorized），当前请求需要用户认证403表示访问请求的资源被服务器拒绝404表示在服务器上找不到请求的资源。另外，也可以用在服务器拒绝请求又不想解释原因的时候。500表示服务器端在执行请求时发生错误。也可能是Web应用程序中存在错误或某些临时故障。503表示服务器暂时过载或停机维护，现在无法处理请求。4、GET和POST的区别请求数据GET在浏览器回退时无害，POST会再次提交请求。GET生成的URL地址可以Bookmarked，不能POST。GET请求会被浏览器主动缓存，但是POST不会，除非手动设置。GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会完整保留在浏览器历史记录中，而POST中的参数不会保留。GET请求的URL中传递的参数有长度限制，但是没有POST。对于参数的数据类型，GET只接受ASCII字符，而POST没有限制。GET不如POST安全，因为参数直接暴露在URL上，因此它们不能用于传递敏感信息。GET参数通过URL传递，POST放在Requestbody中。GET和POST使用场景：如果满足以下任何一种情况，推荐使用POST方法：请求的结果有持久的副作用，例如在数据库中添加新的数据行。如果使用GET方法，表单上收集的数据可能会使URL太长。要传输的数据未以7位ASCII编码。如果满足以下任何一种情况，推荐使用GET方式：请求是为了查找资源，HTML表单数据仅用于帮助查找。请求的结果没有持久的副作用。HTML表单中采集的数据和输入字段名称的总长度不超过1024个字符。XHR2添加timeout---设置超时时间，单位毫秒ontimeout---超时后会触发onload---当请求完成时（即使HTTP状态为400或500等），响应已经完全下载。onerror---当无法发出请求时，例如网络中断或无效URL。onloadstart---请求开始时触发onloadend---请求结束时触发onprogress---在下载响应期间定期触发，报告已下载了多少。responseType---响应新技术可以使用它。设置响应类型response---接收响应结果，根据responseType的值自动处理响应结果为什么要求%2D对请求参数进行编码？RFC文档规定了哪些字符可以出现在url中，哪些字符不允许被编码来解决歧义（red&black）。编码可以解决客户端和服务端字符集不同的问题。即解决乱码问题，如何编码：encodeURIComponent('Red&Black')Content-Type与请求体的关系底层传输数据，支持三种格式的数据（querystring,JSON,FormData)对于每一个请求体，都对应一个Content-Type值查询字符串---application/x-www-form-urlencoded（需要自己设置）JSON---application/json（需要自己设置)FormData---multipart/form-data;WibkitsysdfadSDsdSDsd（浏览器会自动设置）请求参数和拼接在url后面的请求体称为请求参数；设置为xhr。只有在请求体请求参数GET根本无法使用的情况下才需要设置Content-Type请求方式。√DELETE√（不常用）√（常用）POST√（常用）√（不常用）PUT√（常用）√（不常用）见接口文档要求。如何携带请求头原生代码：xhr.setRequestHeader('name','value');jQuery:headers:{'name':'value'}4.AJAX面试常见问题什么是AJAX？AJAX的作用是什么？详情请看这篇文章=>原生JavaScriptAJAX请求有多少步？这些是什么？//1.创建XMLHttpRequest对象varxhr=newXMLHttpRequest();//2.向服务器发送信息时的内容编码类型xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//3.接受服务器响应数据xhr.onreadystatechange=function(){if(xhr.readyState==4&&(xhr.status==200){//letdata=xhr.responseText;}};//4.指定请求类型、URL和是否异步处理请求xhr.open('GET',url,true);//5.发送请求xhr.send(null);SON字符串与JSON对象相互转换//StringtoobjectJSON.parse(json)eval('('+jsonstr+')')//ObjecttostringJSON.stringify(json)AJAX请求方法有几种？它们的优缺点？常见的有哪些HTTP状态码详见本文内容=>什么导致跨域（什么是同源策略）？同源策略是浏览器的一个安全功能，不同来源的客户端脚本无法读写没有明确授权的互相资源..所以xyz.com下的js脚本使用Ajax读取abc.com中的文件数据会被拒绝.同源策略限制how从同一来源加载的文档或脚本可以与来自另一个来源的资源进行交互。这是隔离潜在恶意文件的重要安全机制。例如：不受同源策略限制的情况：页面中的链接、重定向、表单提交不受同源策略限制。跨域引入资源成为可能。但是js不能读写加载的内容。如、、、
