/*
Ajax 的有优缺点
优点
1.浏览器默认支持(一般浏览器都是支持JavaScript的)
2.提高用户体验(不需要刷新页面, 局部刷新)
3.提高页面性能
缺点
1.破坏了浏览器的前进和后退功能, (Ajax不会改变网页URL,因此不会在浏览器记录前后页面)
2.对搜索引擎的支持较弱(搜索引擎无法监测到JS引起的数据变化)
Ajax的使用
Ajax的基本流程: 创建XHR 对象 => 发送数据 =>接收数据
xhr的基本使用
在使用xhr 之前, 我们需要创建一个xhr 的实例对象
let xhr = new XMLHttpRequest()
然后再调用xhr 对象上的open() 方法, 表示创建一个请求
open() 方法接收三个参数
第一个参数: 请求的类型(例如get / post)
第二个参数: 请求的URL
第三个参数:是否异步发送请求 (默认为true)
// 创建一个Ajax 请求
xhr.open('get', 'example.php', 'true')
光调用管理open() 方法还是不够的, 它只是创建个了一个请求, 但还是没有发送请求,
因此我们 还要调用xhr 对象上的另一个方法. 即 send() 方法, 表示将请求发送给 目标URL
send() 方法接收一个参数
第一个参数: 作为请求主体发送的数据 (例如post携带请求的数据)
xhr.send()
请求发送出去后 , 客户端需要接收服务器端回来的数据, xhr对象中的一些属性 ,
他们存储着服务器返回来的一些数据信息
属性名 含义
responseText 服务端返回的文本信息
responseXML 服务端返回的XML DOM文档
status HTTP状态码
statusText HTTP状态码说明
readyState xhr对象的请求响应阶段
既然我们要获取服务器端返回的数据,我们就要知道服务端是怎么样返回数据的,
这就可以通过上面表格中的 readyState 属性来判断了
readyState 属性一共有5个值,分别表示不同的请求响应阶段:
0: 还未创建请求,即未调用 open() 方法
1: 已调用 open() 方法,但未发送 send() 方法
2: 已调用 send() 方法,但未接收到响应
3: 已接收到部分响应
4: 已接收到全部的响应
*/
// 利用promiss 封装$ajax方法
let $ = {
createXHR: function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
} else {
return new ActiveXObject()
}
},
ajax: function (params) {
// 初始化参数
let type = params.type? params.type.toLowerCase() : 'get'
let isAsync = params.isAsync ? params.isAsync : 'true'
let url = params.url
let data = params.data ? params.data : {}
let dataType = params.dataType.toLowerCase()
// 用我们封装的方法动态生成XHR对象
let xhr = this.createXHR()
let str = ''
// 拼接字符串
Object.keys(data).forEach(key => str += `${key}={data[key]}&`)
str = str.slice(0, -1)
//如果事get 请求就把携带参数 拼接到 url 后面
if(type === 'get') url + '?${str}'
// 返回promise对象, 便于外部then和catch函数调用
return new Promiss((resolve,reject) =>{
// 创建请求
xhr.open(type, url, isAsync)
if(type === 'post') {
xhr.setRequsetHeader('Content-Type','application/x-www-form-rulencoded')
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 {
rejext(xhr.status) // 请求失败, 返回状态码
}
}
}
})
}
}
// 该方法既可以发送get请求又可以发送post请求
$.ajax({
url: 'example.php', // 请求的URL
type: 'get', //请求类型,若为post,则表示发送post请求
data: {query: 4, em: 0}, // 请求携带数据
dataType: 'json', // 接收的数据类型
isAsync: true // 是否异步请求
})
.then(data => {
console.log(`请求成功,数据为${data}`)
})
.catch(err => {
console.log(`请求失败,状态为${err}`)
})