Ajax 是干什么的
Ajax（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。
Ajax的优缺点
1）优点
- 浏览器默认支持（一般浏览器都是支持JavaScript的）
- 提高用户体验（不需要刷新整个页面，而只需要局部刷新）
- 提高页面的性能（只需要请求部分数据，所以数据量就明显下降了）
2）缺点 - 破坏了浏览器的前进和后退功能(Ajax不会改变网页URL，因此不会在浏览器记录前后页面)
- 对搜索引擎的支持较弱(搜索引擎无法检测到JS引起的数据变化)
Ajax的使用
Ajax的基本流程： 创建XHR对象 => 发送数据 => 接收数据
1）状态码
2）xhr的使用
创建一个xhr的实例
let xhr = new XMLHttpRequest()
创建一个请求体
xhr.open('get', 'example.php', 'true');
发送
xhr.send();
获取服务端返回的数据
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
}
-
发送get请求
get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ? 后面的
let xhr = new XMLHttpRequest();
xhr.open('get', 'example.php?query=2&count=10')
xhr.send()
-
发送post请求
发送post请求的数据是放在请求体中的，因此这里需要调用 xhr 对象上的 setRequestHeader（）方法来模仿表单提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
send() 方法接收的一个参数是请求主体发送的数据，所以我们的post请求要发送的数据就要作为该方法的参数
xhr.send('query=4&em=0')
封装$.ajax方法
const $ = {
createXHR: function() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}else {
return new ActiveXObject();
}
},
ajax: function(params){
// 初始化
let type = params.type ? params.type.toLowerCase() : 'get';
let url = params.url;
let data = params.data ? params.data : {};
let isAsync = params.isAsync ? params.isAsync : 'true';
let dataType = params.dataType.toLowerCase();
let xhr = this.createXHR();
// 拼接字符串
let str = '';
Object.keys(data).forEach(key => {
str += `${key}=${data[key]}&`;
})
// 去掉尾部的&
str = str.slice(0, -1);
// 如果type = get 则吧携带参数直接拼到 url后面
if(type === 'get') {
url += `?${str}`;
}
// 返回一个promise对象
return new Promise((resolve, reject) => {
// 创建请求
xhr.open(type, url, isAsync);
if(type === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(str);
}else {
xhr.send();
}
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
let res = dataType === 'json' ? JSON.parse(xhr.responseText) : xhr.responseText;
resolve(res)
}else {
reject(xhr.status)
}
}
}
})
}
}
