ajax_封装函数_升级_传递多个参数和传递一个参数

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
  <h2>测试工具函数</h2>
  <input class='get' type="button" value='测试get'>
  <input class='post' type="button" value='测试post'>
  <input class='ajax_test' type="button" value='测试ajax_test'>
  <input class='ajax' type="button" value='测试ajax'>
  <input class='json' type="button" value='获取json'>
  <input class='xml' type="button" value='获取xml'>
</body>
</html>
<!-- 导入 js   -->
<script  src="./ajax.js"></script>
<!-- 自己的js  -->
<script>
  // get请求
  document.querySelector('.get').onclick = function(){
    // 直接调用 get方法
    //function get(url, data, success)
    get('../00.backData/01.backSendData.php','name=jack&friend=rose',function(data){
      console.log(data);
    })
  }

  // post请求
  document.querySelector('.post').onclick = function(){
    // 直接调用 get方法
    //function post(url, data, success)
    post('../00.backData/01.backSendData.php','name=rose&friend=青椒',function(data){
      alert(data);
    })
  }

  // ajax 自选get post
  document.querySelector('.ajax_test').onclick = function(){
    // ajax_test('../00.backData/01.backSendData.php','get','name=葫芦娃&food=胡萝卜',function(data){
    //   alert('葫芦娃');
    //   alert(data);
    // })
    ajax_test('../00.backData/01.backSendData.php','post','name=蛇精&food=爷爷',function(data){
      alert('蛇精');
      alert(data);
    })
  }

  // ajax 只传递一个参数
  document.querySelector('.ajax').onclick = function(){
    ajax({
      type:'get',
      data:'skill=爱吃西兰花和芹菜蹦蹦跳跳好可爱&name=兔子',
      success:function(data){
        document.body.innerHTML = data;
      },
      url:'../00.backData/01.backSendData.php'
    });
  }

  // 获取json
  document.querySelector('.json').onclick = function(){
    ajax({
      type:'get',
      url:'../00.backData/backJSON.php',
      success:function(data){
        console.log(data);
      }
    })
  }

  // 获取 xml
    document.querySelector('.xml').onclick = function(){
    ajax({
      type:'post',
      url:'../00.backData/backXML.php',
      success:function(data){
        console.log(data);
      }
    })
  }
</script>

JS封装：

/**
 * ajax工具函数-get
 * @param {*} url 
 * @param {*} data(key1=value1&key2=value2) 
 * @param {*} success 
 */
function get(url, data, success) {
  var xhr = new XMLHttpRequest();
  if (data) {
    url += '?';
    url += data;
  }
  xhr.open('get', url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      success(xhr.responseText);
    }
  }
  xhr.send(null);
}

/**
 * ajax工具函数-post
 * @param {*} url 
 * @param {*} data (key1=value1&key2=value2) 
 * @param {*} success 
 */
function post(url, data, success) {
  var xhr = new XMLHttpRequest();
  xhr.open('post', url);
  if (data) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
      success(xhr.responseText);
    }
  }
  xhr.send(data);
}

/**
 * 参数越来越多之后 用户如果要传递参数 必须遵循
 * @param {*} url 
 * @param {*} type 
 * @param {*} data 
 * @param {*} success 
 */
function ajax_test(url, type, data, success) {
  var xhr = new XMLHttpRequest();
  // 如果是get 并且有数据
  if (type == 'get' && data) {
    url += '?';
    url += data;
    data = null; // 这样最后直接send data即可 
  }
  xhr.open(type, url);
  // post请求 并且有数据
  if (type == 'post' && data) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      success(xhr.responseText);
    }
  }
  xhr.send(data);
}

// 只传递一个参数
// 用户传入的是 对象
/*
  键名
    url
    type
    data
    success
  用户不需要记忆 参数的顺序 只需要记忆 参数的属性名即可
  大部分的框架 都是这么做的
*/
function ajax(option) {
  var xhr = new XMLHttpRequest();
  // 如果是get 并且有数据
  if (option.type == 'get' && option.data) {
    option.url += '?';
    option.url += option.data;
    option.data = null; // 这样最后直接send data即可 
  }
  xhr.open(option.type, option.url);
  // post请求 并且有数据
  if (option.type == 'post' && option.data) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // option.success(xhr.responseText);
      // console.log(xhr.getResponseHeader('Content-Type'));
      var type = xhr.getResponseHeader('Content-Type');
      // 是否为json
      if (type.indexOf('json') != -1) {
        option.success(JSON.parse(xhr.responseText));
      }
      // 是否为xml
      else if (type.indexOf('xml') != -1) {
        option.success(xhr.responseXML);
      }
      // 普通字符串
      else {
        option.success(xhr.responseText);
      }
    }
  }
  xhr.send(option.data);
}


/*
  总结
    封装的目的
      让我们把精力集中在逻辑
      页面的交互效果
      基础的部分不用每次都来一遍
    封装的步骤
      固定的部分 抽取
      不固定的部分 作为参数
      参数很多==>
        使用对象 来优化
    封装的好坏
      功能能否正常执行
      代码的简洁程度(可读性)
      考虑的问题是否足够多,兼容性问题,异常处理
*/

ajax_封装函数_升级_传递多个参数和传递一个参数

猜你喜欢