距离写原生ajax——one year
那就写一下 打个卡
//post
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
// get
var request = new XMLHttpRequest();
request.open('GET', '/my/url?'+data, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
// 稍微封装一下
function ajax({ url, method, headers, data, success, error }) {
headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8'
if(window.XMLHttpRequest) {
let request = new XMLHttpRequest()
} else {
let request = new ActiveXObject('Microsoft.XMLHTTP')
}
if(method.toUpperCase() === 'POST') {
request.open(method, url, true)
request.setRequestHeader('Content-type', headers)
request.send(data)
}
if(method.toUpperCase() === 'GET') {
request.open(method, url+"?"+data, true)
request.send(null)
}
request.onload = function(progressEvent) {
let response = progressEvent.currentTarget
let {status, statusText, responseText, responseUrl} = response
if(status > 199 && status < 400) {
if(success) success(responseText)
} else {
if(error) error(statusText)
}
}
request.onerror = function(error) {
console.error(error)
}
}
AJAX的基本原理与步骤
1、创建请求 - var xhr = new XMLHttpRequest()
2、确定发送方式和发送地址 - xhr.open('get/post', 'url', false/true)
3、发送 - xhr.send(null/数据)
4、服务器收到(前端等待请求响应) - xhr.onload = function() {}
5、服务器返回数据(前端收到数据) - xhr.responseText。返回类型为字符串类型
感谢读者指出问题。就这样了,欢迎继续吐槽