ajax优缺点
优点:
减轻服务器的负担，AJAX一般只从服务器获取只需要的数据。
无刷新页面更新，减少用户等待时间。
更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验
无平台限制
促进显示与数据相分离
缺点:
页面中存在大量js，给搜索引擎带来困难
AJAX没有了Back和History(历史)功能，即对浏览器机制的破坏
存在跨域问题 域名
只能传输及接收utf-8编码数据
异步操作:
异步就是可以同时做多件事,且代码中有错误也会继续执行
同步操作:
只能一件一件做,从上至下,从左至右,代码有一部出错则不会向下执行
ajax实现步骤
创建xhr对象
配置请求信息
发送请求
判断请求是否发送成功
ajax封装
ajax get 同步sync操作
function getSync(url, params, succFun, errFun) {
let xhr;
浏览器兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
get请求传参在地址中
xhr.open("get", url + "?" + params, false);
xhr.send();
if (xhr.readyState == 4 && xhr.status == 200) {
// 成功操作
succFun(xhr.responseText);
} else {
// 失败操作
errFun();
}
}
ajax get 异步操作
function getAsync(url, params, succFun, errFun) {
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", url + "?" + params, true);
xhr.send();
在异步封装的时候，需要使用onreadystatechange来监听readystate状态的改变，只要onreadystatechange发生改变，就能触发对应的方法，这时候就能对异步请求的数据进行检测
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 成功操作
succFun(xhr.responseText);
} else {
errFun();
}
}
};
}
ajax post
同步操作
function postSync(url, params, succFun, errFun) {
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", url, false);
post请求需要添加请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
post传递参数须在send中传参(不需要加?)
xhr.send(params);
if (xhr.readyState == 4 && xhr.status == 200) {
succFun(xhr.responseText);
} else {
errFun();
}
}
ajax post
异步操作
function postAsync(url, params, succFun, errFun) {
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 成功操作
succFun(xhr.responseText);
} else {
errFun();
}
}
};
}
