Ajax的使用和封装

ajax主要是实现页面和web服务器之间数据的异步传输

type：请求的类型；GET 或 POST

url：后端api接口链接

data：要传回后端的数据（传回变量必须与后端方法的参数变量名一样）

dataType：传输格式（一般为json）

success:function(data）{}：data上面的不一样，自己定义的变量，储存后端传输过来的值

原生Ajax

<script>
  //1.实例化连接实例
  let xhr = new XMLHttpRequest();
  //2.配置请求地址和请求方法
  let url = 'https://api.muxiaoguo.cn/api/yiyan';
  xhr.open("post", url)
  //3.发送请求
  xhr.send();
  //4.监听请求状态码的改变，接收请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {

       let res = JSON.parse(xhr.responseText)

      console.log(res)
    }
  }
</script>

 

回调函数封装

缺点：产生回调地狱

// ajax封装
function request(params, callback) {
    var data;
    var ajax = new XMLHttpRequest
    ajax.open(params.method, params.url)
    ajax.send(null)
    ajax.onreadystatechange = () => {
        if (ajax.readyState == 4 && ajax.status == 200) {
            // data = JSON.parse(ajax.responseText).data
            // 使用回调函数
            callback(JSON.parse(ajax.responseText).data)
        }
    }

}
// 使用
request({
    method: "GET",
    url: "./JSON/p_navMenu.json"
}, (res) => {
    console.log(res)
})

 

promise封装

优点：可以通过链式或其方法解决回调地狱

// 利用es6promise拿数据
function request(params) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(params.method, params.url);
        xhr.send(params.data);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(JSON.parse(xhr.response));   //成功回调
            }
      //因为事件执行四次，有三次返回失败，所以不需要手动失败
     // else {
     //        reject(new Error(xhr.statusText)); //失败回调
         //  reject(new Error("错误"));  自定义也可以
     //   }
        }
    })
}
request({
    method: 'get',
    url: './JSON/p_navMenu.json'
}).then((res) => {
    console.log(res);
})