ajax 是什么

ajax 是在不用刷新页面的情况下，通过 js 中的 XMLHttpRequest 对象，从服务器获取数据，对网页内容进行更新的技术。

封装方法

function ajax(params){

申明一些必要的参数，比如成功后的回调函数、错误处理、url、data、type(http method)，并且作兜底处理

 const{success = () => {},
   error = () => {},
   type = 'get',
   data = {},
   url = '/'
} = params;

过程

1. 创建异步请求对象

      const xhr =  new XMLHttpRequest()

2. 注册 xhr 发送接收请求时的回调，并且在服务器返回结果后，调用 success 或者 error 函数

       xhr.onreadystatechange=function(){if(xhr.readyState===4){if(xhr.state===200){success(JSON.parse(xhr.responseText))
           }else{error(xhr.state,xhr.responseText)
           }
         }
       }

   let sendParams = '';
   Object.keys(data).map((key) => {//Object.keys( 对象)，得到一个由对象里的属性名组成的数组  
       sendParams += `${key}=${data[key]}&`
   });

3. 判断 type

   • 如果是 get，参数就挂在 url 上，(url?sendParams),send 空
   • 如果是其他 type，参数就放在 send 中传递，send(sendParams)，但需要在 open 和 send 之间先设置请求头信息

     if(type==='get'){xhr.open(type,`${url}?${sendParams}`,true)
       xhr.send()}else{xhr.open(type,url,true)
       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
       xhr.send(sendParams);
       }
   }        

调用实例

    ajax({
        url: '/code/1',
        type: 'POST',
        data: {
            id: 'id',
            name: 'name'
        },
        success(result) {// do something},
        error(error1, error2) {// do something}
    })