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