ajax的原理

25 阅读1分钟

通过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)
      
    }