出现背景:
了解每一个技术之前就要知道它的出现的动机是什么?它解决了什么问题?这是也就是我在学习每一项技术必须要弄懂的原因。
传统的网页(不使用AJAX),如果需更新内容,必须重新加载整个页面,这也就意味着用户每次提交请求时,都必须刷新页面,用户体验极差,又很浪费带宽,并且每次应用沟通时,都需要请求服务器,等待其响应结果,应用的回应时间依赖于服务器的响应时间。。。。。
AJAX是什么?
async javascript and xml ——异步javascript和xml
这里的小伙伴可能会问了,那么异步javascript是不是指的是异步编程呢?答案显然是错的。
ajax发送请求的时候是既可以走同步和走异步请求的。这里的异步js指的是基于js实现的局部刷新。那么xml是指 我们最后最早是用xml返回的数据,但是后来我们发现处理xml起来比较麻烦,所以后来就改用json格式返回数据了。。。那不是AJAX该叫AJAJ了,那可能是我们懒得给他改名字了,所以一直保留到现在。
AJAX的基本操作:
AJAX请求的四步
//1.创建AJAX实例对象(在低版本浏览器中基于 new ActiveObject() 处理
let xhr = new XMLHttpReuqest();
//2\. 打开url(发送请求前的一些处理)
xhr.open('get','data.json',true);
// 3\. 监听ajax的状态信息
xhr.onreadyStateChange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.response)
}
}
// 4.发送请求(请求主体的信息会基于SEND的时候发送给服务器)
xhr.end(null);
注:要保证本地的web服务是http协议,不能是file协议。
xhr(对象)XMLHttpRequest
是什么
一个为向服务器发送请求和解析服务器响应提供了流畅的接口。
属性
onreadystatechange
一个JavaScript函数对象,当readyState属性改变时会调用它。详情了解
readyState
- 0:未初始化。尚未调用open()
- 1:已经调用open(),尚未调用send()
- 2:已经调用send(),响应头信息返回给客户端
- 3:待服务器返回响应内容
- 4:响应主体信息已经返回给客户端
status
响应的HTTP 状态。
如 200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText
HTTP 状态的说明。
当状态为 200 的时候它是 "OK",当状态为 404 的时候它是 "Not Found"。和 status 属性一样,当 readyState 小于 3 的时候读取这一属性会导致一个异常。
responseText
作为响应主体被返回的文本。
如果 readyState 小于 3,这个属性就是一个空字符串。当 readyState 为 3,这个属性返回目前已经接收的响应部分。如果 readyState 为 4,这个属性保存了完整的响应体。
responseXML
返回一个 Document
,其中包含该请求的响应,如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML,则返回 null
。如果响应的内容类型是"text/xml"或"application/xml",这个属性将保存着响应数据的XML DOM文档。
timeout
一个无符号长整型(unsigned long
)数字,表示该请求的最大请求时间(毫秒),若超出该时间,请求会自动终止。
方法
open()
作用:初始化请求
xhr.open(method,url,async,user,password)
method 请求方式,如get,post,put等等
url 请求路径,可以是相对路径也可以是绝对
async 是否异步请求 传布尔值,默认true
user 用户名,可选参数,为授权使用;默认参数为空string.
password 密码,可选参数,为授权使用;默认参数为空string.
复制代码
send()
作用:发送请求
参数为发送的请求体,不传请求体的话最好传个null
setRequestHeader()
作用:设置请求头
参数两个,第一个请求体名称header,第二个要赋的值value
abort()
作用:取消当前响应,关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态,并且取消所有未决的网络活动。例如,如果请求用了太长时间,而且响应不再必要的时候,可以调用这个方法。
小例子:
let xhr = new XMLHttpRequest;
xhr.timeout = 1; //=>设置AJAX等待时间,超过这个时间算AJAX延迟
xhr.ontimeout = function () {
console.log('请求超时~~'); //如果超过时间就会输出;
xhr.abort(); //=>手动中断AJAX的请求
}
xhr.withCredentials = true; //=>在跨域请求中是否允许携带证书(携带COOKIE)
xhr.open('GET', 'json/data.json');
xhr.send();
getResponseHeader()
作用:返回指定响应头的值,readyState状态值为2时可以返回
参数:响应头的名称
getAllResponseHeaders()
作用:返回所有头部信息的字符串
请求方式
我理解我请求方式分为两大种:
- get系列: delete/head/options
- post系列:post/put
所有请求都可以基于请求头把信息传给服务器
GET请求传递给服务器一般基于问号参数,例:
xhr.open('get','./json.data?XXX=111');
POST请求方式传递给服务器的信息一般基于"请求体",例:
// xhr.send({请求主体信息})
xhr.send()
总结
从以上的几个方面来回答的话,保证让面试官为你露出甜美的笑容