注意！！代码前面带+为新增代码

封装自己的$.get方法

创建$的对象

  1. let $ = {
  3. }

给对象添加一个方法叫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)
        }
    }