ajax的认识及封装

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('这里是对请求失败的业务处理函数');
    }