通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面
实现过程:
1、创建ajax的核心对象XmlhttpRequest对象
2、通过XMLHttpRequest对象的open方法与服务器建立链接
3、构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
4、通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
原生ajax
const myAjax = (payload) => {
console.log(payload)
return new Promise((resolve, reject) => {
const params = setParams(payload.params)
//创建xhr对象
const xhr = new XMLHttpRequest()
if (payload.method.toLowerCase() === 'get') {
xhr.open('get', payload.params ? payload.url + '?' + params : payload.url)
xhr.send()
}
if (payload.method.toLowerCase() === 'post') {
xhr.open('post', payload.url)
const flay =
Object.prototype.toString.call(payload.data) === '[Object Object]'
// //设置请求头
// xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader(
'Content-Type',
flay ? 'application/json' : 'application/x-www-form-urlencoded'
)
// //send
xhr.send(flay ? JSON.stringify(payload.data) : payload.data)
}