AJAX (Asynchronous JavaScript and XML),是一种用于创建快速动态网页的技术;通过在后台与服务器进行少量数据交换,使网页实现异步更新。
一、背景和目的(传统网站中存在的问题)
- 网速慢的情况下,页面加载时间长,用户只能等待;
- 表单提交后,如果一项内容不合格,需要重新填写所有表单;
- 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。
二、应用场景
- 页面上拉加载更多数据;
- 列表数据无刷新验证;
- 表单项焦点数据验证;
- 索框提示文字下拉列表。
三、原生js Ajax请求的5个步骤
//1、创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//2、规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//(3、发送信息至服务器时内容编码类型)
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4、发送请求
ajax.send(null);
//5、接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
}
};
四、Ajax的封装
function ajax(options) {
// 默认值
var defaults = {
type: 'get',
url: '',
async: true,
data: {},
requestHeader: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {},
error: function() {},
};
//对象覆盖
Object.assign(defaults, options);
var xhr = new XMLHttpRequest();
//拼接参数字符串
var params = '';
for(var attr in defaults.date) {
params += attr + '=' + defaults.date[attr] + '&';
}
params = params.substr(0, params.length - 1);
// console.log(params);
// 当 GET类型请求时
if(defaults.type == 'get') {
var getUrl = defaults.url + '?' + params;
// console.log(getUrl);
xhr.open(defaults.type, getUrl, defaults.async);
}else{
xhr.open(defaults.type, defaults.url, defaults.async);
}
//当Post类型请求时
if(defaults.type == 'post'){
var requestHeader= defaults.requestHeader['Content-Type'];
// console.log(requestHeader);
xhr.setRequestHeader('Content-Type', requestHeader);
//判断发送至服务器信息的编码格式
if(requestHeader == 'application/json'){
xhr.send(JSON.stringify(defaults.date));
}else{
xhr.send(params);
}
}else{
xhr.send();
}
//服务器响应
xhr.onload = function() {
//将服务器响应回来的string转换为JSON对象
var resContenType = xhr.getResponseHeader('Content-Type');
var resText = xhr.responseText;
if(resContenType.includes('application/json')){
resText = JSON.parse(resText);
}
// console.log(resText);
if(xhr.status == 200 ){
defaults.success(resText, xhr);
}else{
defaults.error(resText, xhr);
}
}
}
//调用function ajax()方法
ajax({
type: 'post',
url: 'http://localhost:800/package',
// async: true,
// requestHeader: {
// 'Content-Type': 'application/json',
// },
date: {
type: 'POST',
name: 'XiaoMing',
age: 18,
sex: 'Man'
},
success: function(date) {
// console.log(date);
},
error: function(date, xhr) {
console.log('这是date:' + date);
console.log('这是xhr:' + xhr);
}
});
五、Ajax状态码
0:请求未初始化(还没有调用open());
1:请求已建立,但是还没有发送(还没有调用send());
2:请求已经发送;
3:请求正在处理中,通常响应中已经有部分数据可以用;
4:响应已经完成,可以获取并使用服务器的响应了。
六、Ajax错误处理
1、网络畅通,服务器能接收到请求,服务端返回的结果不是预期结果;
可以判断服务器响应回来的状态码,分别进行处理,xhr.status获取http状态码
。
2、网络畅通,服务器没有接收到请求,返回404状态码;
检查请求地址是否错误
。
3、网络畅通,服务器能接收到请求,服务端返回500状态码;
服务端错误,找后端的伙伴回来加班
。
4、网络中断,请求无法发送到服务器;
会触发xhr对象下面的onerror事件,在onerror
事件处理函数中对错误进行处理。