封装一个简单的AJAX及AJAX的优缺点

AJAX（Asynchronous JavaScript and XML）是一种前端技术，它通过在后台与服务器进行数据交换，使得页面内容的更新变得更加快速和流畅，不需要刷新整个页面就能够实现数据的更新。

AJAX代码的核心是XMLHttpRequest对象。XMLHttpRequest对象是JavaScript的内置函数，可以向服务器发送HTTP请求和接收服务器数据。下面是一个简单的Ajax代码：

const xhr = new XMLHttpRequest()//构造一个请求实例
xhr.open('get','/data')  //配置请求
xhr.onreadystatechange = () =>{
    if(xhr.readyStatus === 4){
        if(xhr.status >=200 && xhr.status <300){
            console.log('请求成功')
        }else if(xhr.status >= 400){console.log('请求失败')}
    }
}//监听成功或者失败
xhr.send() //发送请求

下面代码则是我对AJAX做的一个简单的封装：

  const ajax = (method,url,options) => {
    const {data,success,fail} = options
    // 请求 /data json 数据
    const xhr = new XMLHttpRequest() //构造一个请求实例
    xhr.open(method,url) //配置请求
    xhr.onreadystatechange = () =>{
      if(xhr.readyState === 4){
        if(xhr.status >=200 && xhr.status<300){
          const type = xhr.getResponseHeader('Content-Type')
          if(type.startsWith('application/json')|| type.startsWith('text/json')){
            success(JSON.parse(xhr.responseText),xhr)
          }else{success(xhr.responseText,xhr)}
        }else if(xhr.status>=400){
          fail(xhr)
        }
      }
    }
    xhr.send(data)//发送请求
  }
  //调用
   ajax('get','/data',
      {
        success:(data,xhr)=>{console.log('请求成功',data,xhr.status)},
        fail:(xhr)=>{console.log('请求失败',xhr.status)}
      })
  })
  

每次使用只需要调用ajax函数即可。

AJAX的优缺点

优点：

1. 不限请求内容的类型，即可以请求任意内容
2. 不能跨域
3. 不用刷新页面，减少了对服务器的请求次数，提高了用户体验。

缺点：

1. 浏览器需要支持XMLHttpRequest对象，低版本IE浏览器不支持该对象，无法使用AJAX相应技术。
2. 使用AJAX可能会导致SEO问题，因为搜索引擎无法爬取AJAX请求得到的数据，从而影响搜索引擎优化。