封装自己的$.get方法

创建$的对象

let $ = {
}

给对象添加一个方法叫get

let $ = {
  get: function () {}
}

给get方法传一个配置对象 options

let $ = {
  get: function ( + options) {
      // 表示接受到调用函数时 传递的配置对象
      + let url = options.url
      + let data = options.data
      + let success = options.success
      console.log(url);
  }
}

创建 xhr对象

let $ = {
  get: function (options) {
      // 表示接受到调用函数时 传递的配置对象
      let url = options.url
      let data = options.data
      let success = options.success
      // 创建xhr对象 
      + let xhr = new XMLHttpRequest()
      // 调用xhr的open方法 
      + xhr.open('get', url)
  }
}

get方法带参数与不带参数处理

• 如果带参数我们需要先将参数转换为字符串

let $ = {
  // 将对象转换为字符串
  obj2qs: function(obj) {
    if (typeof obj !== 'object') return console.log('传递的数据不是对象');
    let arr = []
    for (let k in obj) {
        arr.push(k + '=' + obj[k])
    }
    return arr.join('&')
  },
  get: function (options) {
      // 表示接受到调用函数时 传递的配置对象
      let url = options.url
      let data = options.data
      let success = options.success
      // 创建xhr对象 
      let xhr = new XMLHttpRequest()
      // 调用xhr的open方法 
      xhr.open('get', url)
  }
}

• 带参数与不参数的功能实现

  let $ = {
  // 将对象转换为字符串
  obj2qs: function (obj) {
   if (typeof obj !== 'object') return console.log('传递的数据不是对象')
   let arr = []
   for (let k in obj) {
     arr.push(k + '=' + obj[k])
   }
   return arr.join('&')
  },
  get: function (options) {
   // 表示接受到调用函数时 传递的配置对象
   let url = options.url
   let data = options.data
   let success = options.success
   // 创建xhr对象
   let xhr = new XMLHttpRequest()
   // 判断 data有没有数据
   // if (data) {
   //   // 表示用户传递了数据
   //   xhr.open('get', url + '?' + this.obj2qs(data))
   // } else {
   //   // 调用xhr的open方法
   //   xhr.open('get', url)
   // }
   xhr.open('get', data ? url + '?' + this.obj2qs(data) : url)
   xhr.send()
  }
  }

监听服务器返回的数据

xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 获取到服务器响应的数据 并且将其转换为 js对象
            let data = JSON.parse(xhr.responseText)
            success && success(data)
        }
    }