ajax請求封裝函數

• 寫封裝函數的套路

1.先寫出這個函數原來的基本用法

2.寫一個沒有形參空函數，將上一步的代碼直接作爲函數體，

3.根據使用過程中，抽象出來需要變的東西作爲形參

function ajax (method, url, params, fun) {
      method = method.toUpperCase()            //在傳入method的時候可以忽略大小寫
      var xhr = new XMLHttpRequest()

      if (typeof params === 'object') {        //如果在地址傳入的東西是一個對象，我們將它的格式轉化爲urlencoded
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&') //===>這裏的格式就爲parsms=[key1=value&key2=value2]
      }

      if (method === 'GET') {
        url += '?' + params
      }

      xhr.open(method, url, false)

      var data = null
      if (method === 'POST') {    //如果請求的方式爲POST，需要手動設置請求頭的Content-Type
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        data = params
      }

      xhr.onreadystatechange = function () {
        if (this.readyState !== 4) return
        
        // console.log(this.responseText)  //這裏可以得到響應體，但是後面要處理的內容應該根據使用者的需要來處理
      
        fun(this.responseText)
      }

      xhr.send(data)
    }

    // 調用者
    // ============================

    var fun = function (res) {
    console.log(res);
    }

    ajax('get', 'test.php', {}, fun)