2 AJAX（封装+调用 ）

AJAX定义
主要思路
兼容IE
监听【异步对象】状态变化

1.AJAX定义：不重新加载页面，更新页面的数据（例如搜索框）

2.主要思路：

**主流程：**
1.引入AJAX
2.添加：请求方式，请求地址，请求参数，发送
3.判断请求过程码，判断请求状态码
4.监听数据
5.设置过期时间

**附属功能：**
1.封装时：兼容IE
2.封装时：转化调用type大小写问题
1.调用时：将参数分开，在封装函数设拼接
3.调用时：处理实参位置前后
4.调用时：监听XML格式 / JSON格式

3.兼容ie

1.引入AJAX异步对象:
位置：写在最上方
定义：低版本ie浏览器在创建ajax异步对象时，需要在w3c复制粘贴代码
代码：「ajax-XHR-创建对象-拉到最下面」
2.GET方式：请求地址:
位置：封装新的函数
定义：让每次get访问请求地址都不一样
理由：IE浏览器中缓存因素，IE认为ie认为AJAX返回get地址===【第一次】返回的服务器内容

/	代码
随机数	Math.random()
当前时间	new Date.getTime()

4.监听【异步对象】状态变化

请求状态	代码
请求未初始化	readState===0
服务器连接已建立	readState===1
请求已接收	readState===2
请求处理中	readState===3
请求已完成，且响应已就绪	readState===4

//⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️
//0.处理2中请求参数问题
//实现功能:因调用时方便，参数和url分开，需要在此处拼接
//实现功能:处理参数可能出现的中文情况
//实现功能:处理IE浏览器兼容问题：（具体问题文档，需要每次给路径拼接不同的内容）
function obj2str(data) {
  //（1）给json格式参数设置新的key为t，value为随机数，最后会一起拼接，解决兼容问题
  data.t = new Date.getTime();
  //（2）设置空数组
  var lzy = [];
  //（3）循环传递进来的key=value格式内容
  for (var key in data) {
    //（4）数组的push方法：用等号拼接key和value
    //（5）通过encodeURIComponent方法将key和value转化为乱码，防止出现中文
    lzy.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
  }
  //（6）数据方法：数组转化为字符串，用&拼接
  return lzy.join("&");
}

//⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

function ajax(potion) {
  //0.调用外部函数，处理2中请求路径
  var str = obj2str(option.data);

  //1.创建ajax异步对象
  //隶属1：兼容ie浏览器创建ajax异步对象代码
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2判断是get还是post，然后设置请求方式，请求地址，请求参数存放位置，发送；
  if (option.type.toLowerCase() == "get") {
    //toLowerCase()方法是转化成小写
    //设置请求方式，请求地址，请求参数:需要外部引用函数拼接解决问题，永远是true[true为异步请求函数]
    xmlhttp.open("GET", option.url + "?" + str, true);
    //发送请求
    xmlhttp.send(); //GET时为空，请求参数在路径上
  } else if (option.type.toLowerCase() == "post") {
    //toLowerCase()方法是转化小大写
    //设置请求方式，请求地址
    xmlhttp.open("POST", option.url, true);
    // POST发送时默认规定的一行代码
    xmlhttp.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    //发送请求+请求参数
    xmlhttp.send(str);
  }

  //3.监听听【异步对象】状态变化
  xmlhttp.onreadystatechange = function () {
    //只要状态发生变化就会调用回调函数，请求状态：文档
    if (xmlhttp.readState === 4) {
      clearInterval(timer); //关掉定时器，处理6的 [往回问题]
      if (
        (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
        xmlhttp.status == 304
      ) {
        //判断服务器返回的状态吗
        //4.处理返回结果，写在3内
        //（1）success, error为行参数，实参为函数代码，通过闭包在函数调用处写成功/失败代码，例如弹出
        //（2）实时接收服务器返回结果，res.end或者echo的值，格式为json格式数据或者字符串
        option.success(xmlhttp);
      } else {
        //（1）success, error为行参数，实参为函数代码，通过闭包在函数调用处写成功/失败代码，例如弹出
        //（2）实时接收服务器返回结果，res.end或者echo的值，格式为xml格式数据或者字符串
        option.error(xmlhttp);
      }
    }
  };
  //5.设置响应超时功能：超过参数300秒时关掉【3.发送请求】
  var timer; //设置变量做定时器
  if (option.timeout) {
    //判断是否有实参超时时间，如果有超时时间
    timer = setInterval(function () {
      //开启定时器，经过xx秒后运行，关掉请求和定时器，参数在setInterval方法最后
      xmlhttp.abort(); //中断请求方法
      clearInterval(timer); //关掉定时器
    }, option.timeout);
  }
}

//⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

ajax({
  type: "get",
  url: "test1.txt",
  data: {
    //调用ajax时传递参数时分开
    key: "value",
    key: "value",
  },
  timeout: 3000, //设置超时时间
  success: function (xhr) {
    var lzy2 = xmlhttp.responseText; //将服务器运行结果返回到前台js文件（实时）
    var lzy3 = xmlhttp.responseXML; //将XML文件内json格式键值对传递给前台js文件（实时）
    alert(xhr.responseText); //服务器返回的数据弹出
  },
  error: function (xhr) {
    alert("调用失败" + xmlhttp.status);
  },
});