目录
  1. 1. get和post一起封装
  2. 2. get和post一起封装改进
用JS原生封装Ajax实现两种数据自动转化

本次练习分为两个部分:
第一部分是封装get和post两种请求方式到一个Ajax方法中,要点在于get和post这两者的区别需要判断分开一些部分单独处理,首先是发送请求数据的位置,get方式需要拼接到url后面,post则要写到请求主体中xhr.send(data),其他部分则一样。这里一个很巧妙的点在于get和post同用一个send()主体,然而get方式中send里的值应该为null,post的为数据,为了能共用,将if分支中的get方式写在post之前,再在get中加上data = null; ,那么无论哪种方式最后的xhr.send(data)都是适合的,是不是很秒…
第二部分是对之进行改进,考虑到参数越来越多之后 用户如果要传递参数 必须遵循顺序,参数多了之后比较难搞所以采用对象方式来传递参数,所以就想实现一个自动转化数据功能,那么问题来了,数据又有json和xml不同的格式,我怎么知道返回的是哪种数据呢,解决方法是获取返回的conten-type然后做判断即可,这样就实现了无论是json还是xml都可以自动转化成需要的格式功能。通过操作最主要是学习这个封装的思想,具体还有些细节,就直接看代码吧。

get和post一起封装
1
/**
2
 * 参数越来越多之后 用户如果要传递参数 必须遵循
3
 * @param {*} url 
4
 * @param {*} type 
5
 * @param {*} data 
6
 * @param {*} success 
7
 */
8
function ajax_test(url, type, data, success) {
9
  var xhr = new XMLHttpRequest();
10
  // 如果是get 并且有数据
11
  if (type == 'get' && data) {
12
    url += '?';
13
    url += data;
14
    data = null; // 这样最后直接send data即可 
15
  }
16
  xhr.open(type, url);
17
  // post请求 并且有数据
18
  if (type == 'post' && data) {
19
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
20
  }
21
  xhr.onreadystatechange = function () {
22
    if (xhr.readyState == 4 && xhr.status == 200) {
23
      success(xhr.responseText);
24
    }
25
  }
26
  xhr.send(data);
27
}

调用:

1
// ajax 自选get post
2
 document.querySelector('.ajax_test').onclick = function(){
3
   // ajax_test('../00.backData/01.backSendData.php','get','name=葫芦娃&food=胡萝卜',function(data){
4
   //   alert('葫芦娃');
5
   //   alert(data);
6
   // })
7
   ajax_test('../00.backData/01.backSendData.php','post','name=蛇精&food=爷爷',function(data){
8
     alert('蛇精');
9
     alert(data);
10
   })
11
 }
get和post一起封装改进

以上方法:参数越来越多之后 用户如果要传递参数 必须遵循顺序,参数多了之后比较难搞
所以采用对象方式来传递参数

并判断和处理xml和json

1
// 只传递一个参数
2
// 用户传入的是 对象
3
/*
4
  键名
5
    url
6
    type
7
    data
8
    success
9
  用户不需要记忆 参数的顺序 只需要记忆 参数的属性名即可
10
  大部分的框架 都是这么做的
11
*/
12
function ajax(option) {
13
  var xhr = new XMLHttpRequest();
14
  // 如果是get 并且有数据
15
  if (option.type == 'get' && option.data) {
16
    option.url += '?';
17
    option.url += option.data;
18
    option.data = null; // 这样最后直接send data即可 
19
  }
20
  xhr.open(option.type, option.url);
21
  // post请求 并且有数据
22
  if (option.type == 'post' && option.data) {
23
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
24
  }
25
  xhr.onreadystatechange = function () {
26
    if (xhr.readyState == 4 && xhr.status == 200) {
27
      // option.success(xhr.responseText);
28
      // console.log(xhr.getResponseHeader('Content-Type'));
29
      var type = xhr.getResponseHeader('Content-Type');
30
      // 是否为json
31
      if (type.indexOf('json') != -1) {
32
        option.success(JSON.parse(xhr.responseText));
33
      }
34
      // 是否为xml
35
      else if (type.indexOf('xml') != -1) {
36
        option.success(xhr.responseXML);
37
      }
38
      // 普通字符串
39
      else {
40
        option.success(xhr.responseText);
41
      }
42
    }
43
  }
44
  xhr.send(option.data);
45
}

调用:

1
// ajax 只传递一个参数
2
  document.querySelector('.ajax').onclick = function(){
3
    ajax({
4
      type:'get',
5
      data:'skill=爱吃西兰花和芹菜蹦蹦跳跳好可爱&name=兔子',
6
      success:function(data){
7
        document.body.innerHTML = data;
8
      },
9
      url:'../00.backData/01.backSendData.php'
10
    });
11
  }
12
13
 // 获取json
14
  document.querySelector('.json').onclick = function(){
15
    ajax({
16
      type:'get',
17
      url:'../00.backData/backJSON.php',
18
      success:function(data){
19
        console.log(data);
20
      }
21
    })
22
  }
23
24
  // 获取 xml
25
    document.querySelector('.xml').onclick = function(){
26
    ajax({
27
      type:'post',
28
      url:'../00.backData/backXML.php',
29
      success:function(data){
30
        console.log(data);
31
      }
32
    })
33
  }

总结

封装的目的

让我们把精力集中在逻辑

页面的交互效果

基础的部分不用每次都来一遍

封装的步骤

固定的部分 抽取

不固定的部分 作为参数

参数很多==>

使用对象 来优化

封装的好坏

功能能否正常执行

代码的简洁程度(可读性)

考虑的问题是否足够多,兼容性问题,异常处理

文章作者: Byron
文章链接: https://byronk.top/2019/06/20/%E7%94%A8JS%E5%8E%9F%E7%94%9F%E5%B0%81%E8%A3%85Ajax%E5%AE%9E%E7%8E%B0%E4%B8%A4%E7%A7%8D%E6%95%B0%E6%8D%AE%E8%87%AA%E5%8A%A8%E8%BD%AC%E5%8C%96/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 byron's | BLOG
打赏
  • 微信
  • 支付宝

评论