ajax的基本格式
jQuery
代码语言：javascript复制
$.ajax({
async: true,//是否异步
url: "url",//目的地
method: "POST",//传输方法
dataType: "json",//返回值类型
data: {
data1: "a",
data2: "b",
data3: "c"//传递的数据内容
},
beforeSend: function () {
//发送请求之前
},
success: function (result) {
//成功
},
error: function () {
//失败
},
complete: function () {
//请求完成
}
});
JavaScript
代码语言：javascript复制
//1.创建对象
let xhr = new XMLHttpRequest();
//2.调用open
xhr.open('POST', 'http://example.com');
//3.设置Content-Type内容格式(注意contenttype类型)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.调用send()
xhr.send(formData);
//5.设置readystatechange事件接收响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
//文件上传进度监测
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
//加载值比总需加载值的百分比，可采用bootstrap progress-bar样式。
let percent = e.loaded / e.total * 100 "%";
document.getElementById('percent').style.width = percent;
document.getElementById('percent').innerText = percent;
} else {
alert("文件不支持上传中的进度监测");
}
};
//设置上传文件完成的事件
xhr.upload.onload = function () {
};
Ajax XMLHttpRequest
