ajax的认识及封装

深藏阁楼爱情的钟 2023-06-25 10:08 17阅读 0赞

## ajax的初步认识 ##

交互语言 ajax  
作用：实现web浏览器与web服务器的交互过程，并更新部分网页内容（页面的局部刷新）  
交互：浏览器发送请求；服务器做出响应浏览器与服务的交互行为  
1：实例化ajax 对象。  
2：调用内部api 完成请求响应  
请求方式：get post  
两者区别：  
get 将请求参数拼接到url 地址上，然后传递儿给服务器；  
post 通过【请求体】 发送请求的数据；  
get 比post 快 不安全 请求参数可以被所有人都看见，一般获取数据会使用get ；  
post 请求更加安全。请求参数比较多时候会用到post 请求信息： 头 行 体 在 Request-Headers 中

## ajax的封装 ##

/**
        ajax()  作用向服务器发送请求；
        参一 url
        参二： 请求参数
        参三请求方法：
        参四：请求成功的响应处理数
        参数五：请求失败的处理函数
          */
     function ajax(url, parm, method, async, success, error) {
          // 实例化请求对象
          var xhr = new XMLHttpRequest();
          var url = url; // 接受请求地址
    
          if (method === "GET") { // 如果是 get 
            // 1: 处理请求参数，将请求参数拼接到url地址上
            url += "?";
            for (var x in parm) { // 拼接字符串
              url += x + "=" + parm[x] + "&";
            }
            url = url.slice(0, url.length - 1); // 去掉最后一个&
            // 2：准备发送请求
            xhr.open(method, url, async);
            //3：发送请求
            xhr.send();
          } else if (method === "POST") {
            // 1:对post 请求的请求参数处理
            var str = ''   // 初始化请求参数
            xhr.open(method, url, async); // 准备发送请求
            // 设置请求头
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            // 请求参数处理
            for (var x in parm) {
              str += x + '=' + parm[x] + '&'
            }
            str = str.slice(0, str.length - 1);
            // 将请求参数传给 send 发送post 请求
            xhr.send(str);
          }
          // 4:监听服务器响应事件
          xhr.onreadystatechange = function () {
            // 接受服务器响应的数据
            var data = xhr.responseText;
            if (xhr.status === 200 & xhr.responseText === 4) {
              // 请求成功了
              // 将请求成功后数传入给success 回调函数
              success(data); // 请求成功的处理的函数
            } else if (xhr.status === 404 || xhr.status === 500) {
              // 请求失败的处理函数
              error(data)
            }
          }
        }
        function success(data) {
          console.log('请成功了，这里是对请求成功的业务处理函数')
          console.log(data);
        }
        function error() {
          console.log('请求失败了')
          console.log('这里是对请求失败的业务处理函数');
        }