AJAX基础知识:核心原理是基于XMLHttpRequest实现前后端数据通信的
Ajax有几种常用的方法? 私有方法:
+ onabort 请求被中断触发
+ onreadystatechange 监听AJAX的状态改变(根据不同的状态处理不同的事情)
+ ontimeout 请求超时后触发
+ upload.onprogress 监听文件上传或者下载的进度
常规属性:
+ readyState 记录ajax状态
+ status/statusText 服务器返回的HTTP状态码及其描述
+ timeout 设置超时时间(ms),默认0代表不设置,如过设置了超时时间,在这个期间内,如果请求没有结束自动中断,触发ontimeout事件
+ withCRedentials 在跨域请求中,设置是否允许携带资源凭证(列如:cookie),默认false
+ response 存储服务器返回的响应主体信息(不论啥格式)
+ responseTEXT 存储为字符串的响应主题信息
+ responseXML 存储为xml的响应主体信息
共有的方法:
+ open()打开请求连接(在发送请求之前进行一些配置)
+ abort()中断当前请求
+ send([body])发送请求,并且基于请求主体把信息传递给服务器
+ getAllResponseHeaders()/getResponseheader([key])获取所有(某一个)响应头信息
+ overrideMimeType()重写MIME类型
+ setRequest([key],[value])设置请求头信息{传递的值不能有中文,如果有需要编码}
公共属性:
代表Ajax状态的五个属性
+ UNSENT:0 未发送(最开始创建出XHR实例的初始状态)
+ OPENED:1 已经执行了open这个方法
+ HEADERS_RECEIVED:2 请求已经发送,并且获取到了响应头信息
+ LOADING:3 响应头主题信息正在返回中
+ DONE:4 响应主体信息已经返回(当前ajax请求结束)
Ajax核心操作:【了解就好面试大概率会问】
(1) ajax:async javascript and xml (缩写)
+ async javascript:不仅仅是异步请求,更主要是“局部刷新”
+ xml:很早很早以前。Ajax从服务器获取的数据一边都是xml格式的,只不过目前我们都是基于体积更小、更方便的json格式进行输送
(2)请求方式:GET系列和POST系列
+ GET系列:GET\HEAD\DELETE\OPTIONS
+ POST系列:POST\PUT\PATCH
不论GET还是POST,客户端都可以发请求的时候把信息传递给服务器,服务器也可以把信息返回客户端
客户端=》服务器
+ URL问号传参
+ 设置请求头 xhr.setRequestHeader(xxx,xxx)
+ 设置请求主体 xhr.send(xxx);
服务器=》客户端
+ 设置响应头
+ 设置相应主体[响应头信息会比相应主体先返回]
约定俗称的规范;GET系列请求,一般都是基于“URL问号传参”把信息传递给服务器而POST系列请求,一般是请求主体把信息传递给服务器;两种方式都可以设置请求头信息
+ 传递给服务器信息的大小
+ GET是基于URL传参,而浏览器对应于URL的长度有限制(IE2kb、谷歌8kb、火狐7kb) 所以GET传递给服务器的信息要少
+ POST是基于请求主体传递信息,理论上是没有任何长度限制的[实际开发需要自己做限制]
+ 安全方面
+ 互联网没有隐私
+ POST比GET相对安全一些:因为URL劫持,而GET是ULR传参,一旦被劫持则信息泄露;而请求主体相对不容易被劫持
+ 缓存问题
+ GET是URL传参,如果多次请求地址+传递的参数都完全一致,浏览器可能会帮我们获取上次的信息,导致无法实时进行获取信息
+ 解决:保证每一请求传递的参数值不完全一致即可
+ 基于请求主体传递给后台的内容有“格式要求”:每一种格式都有相关的描述,我们称之为MIME类型
+ JSON格式的字符串
'{"name:"xxx","age":"18"}'
+ URLENCODED格式字符串:MIME:application\x-www-form-urlencoded
'xxx=xxx&xxx=xxx...'
+ 普通格式字符串MIME:text\plain
+ FORM格式对象:MIME:multipart\form-data{一般用于文件上传}
let fm=new FormData();
fm.append('name','xxx');
xhr.send(fm)
+传递Buffer(进制)格式的数剧
----
如果传递的是普通对象,浏览器会默认转换为'[object object]'传递给服务器。当我们基于xhr.send请求主体,发送信息给服务器时,根据我们的格式,需要手动设置请求头:xhrsetRequestHeader('Content-Type',对应的MIME类型)
(3)设置请求头操作必须在:OPEND之后和SEND之前;而且设置请求头的信息不能出现中文,如果需要传递中文,则需要编码[encodeURLComponent\encodeURL]
(4)xhr.status记录服务器返回的HTTP响应状态码,不同的状态码描述了请求成功或者失败
+ 200 ok 成功
+ 206 partial Content实现断点续传,206代表传递了部分信息
+ 301 Moved Permanently 永久转移[一般用于新老域名转换]
+ 302 Move Temporarily&307 Temporary Redirect 临时转移(重定向)[一般用于服务器的负载均衡]
+ 304 NOt Modified 协商缓存
+ 400 Bad Request 请求参数出错
+ 401 Unauthorized 请求权限错误
+ 403 Forbidden 请求出错了,但是问题不报
+ 404 Not Found 请求地址错误
+ 405 Metod Not Allowed 请求方式不被允许
+ 408 Request Timeout 请求超时
+ 500 Internal Server Error 未知服务器错误
+ 502 Bad Gateway 服务器代理网关出现问题
+ 503 Service Unavailable 服务器超负荷
+ 这些状态码是常出现的当然都喜欢200的状态码