- Ajax — XMLHttpRequest() 对象
优点：无需重新加载整个网页的情况下，实现部分网页更新的技术。提高用户体验，Ajax技术的核心是XMLHttpRequest对象（简称XHR）；像ajax这种耗时长的操作应该异步执行，避免浏览器失去响应。
缺点：1、不支持浏览器back按钮；2、安全问题，暴露与服务器的交互细节；3、对搜索引擎的支持较弱；4、不容易调试；5、破坏了程序异常机制
ajax流程：
- 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest();
- 创建新的http请求，指定请求方法、url、验证信息等。xhr.open('get', 'url', true/false[是否异步]) [true表示会在send后继续执行，而不等待服务器的响应]
- 若是post请求，需要设置请求头格式的内容：xhr.setRequestHeader('content-type', 'application/x-www-form-urlenCoded'); [表单提交的格式]
- 设置响应http请求状态变化的函数。
xhr.onreadyStatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
// 处理：xhr.responseText / responseXML
}
} - 发送http请求 ：xhr.send()，[若是POST请求，需要写传入的string] — "methodName = GetAllComment&str1=str1&str2=str2"
- 获取返回的数据并做后续处理，一般接收异步返回的数据，axios等操作
- 异常捕获：axios catch ，原生：try { xhr.send();} catch (e) { console.log(e);}
readyState：0：请求初始化；1：服务器连接已确立；2：请求已接收；3：请求处理中；4：请求完成，响应就绪
abort()`:取消异步HTTP请求
getAllResponseHeaders()`: 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
getResponseHeader(headerName)`:返回headName对应的报头值
- 原生Ajax请求过程
手撕过程
function getXHR(){
var xhr = null;
if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");// 即MSXML3
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");// // 兼容 IE6, IE5，很老的api,虽然浏览器支持,功能可能不完善,故不建议使用
} catch (e) {
alert("您的浏览器暂不支持Ajax!");
}
}
}
return xhr;
}
var xhr = getXHR();
xhr.open('GET', url/file,true); //设置请求方式，url，以及是否异步
xhr.onreadystatechange = function() { //设置回调监听函数
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
console.log(data);
}
};
xhr.onerror = function() {
console.log("Oh, error");
};
xhr.send(); //发送请求
封装为插件
GET
function getJSON (url) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(this.responseText, this)
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send()
})
}
post
function postJSON(url, data) {
return new Promise( (resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open("POST", url, true)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
resolve(JSON.parse(this.responseText), this)
} else {
var resJson = { code: this.status, response: this.response }
reject(resJson, this)
}
}
}
xhr.send(JSON.stringify(data))
})
}
使用
getJSON('/api/v1/xxx') // => 这里面是就try
.catch( error => {
// dosomething // => 这里就是catch到了error，如果处理error以及返还合适的值
})
.then( value => {
// dosomething // 这里就是final
})
