码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-11-17 12:38:11      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:异常处理   记忆   异常   head   encode   直接   导入   ajax   log   

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_封装函数_升级_传递多个参数和传递一个参数

标签:异常处理   记忆   异常   head   encode   直接   导入   ajax   log   

原文地址:https://www.cnblogs.com/qtbb/p/11875826.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!