jquery 之ajax 封装

新建一个js文件,以下是该文件代码

 

// $ 原型中

//定义一个构造函数

let Fn = function () { }

//实例化该构造函数

let $ = new Fn()

 

//子面量形式创建一个空对象

var obj = {}

//将$的原型赋于 obj,obj的构造函数赋于Fn

$.__proto__ = obj

obj.contructor = Fn

 

// 原型obj中写入属性和方法，$对象中可以继承

 

// 将ajax方法写入原型中

obj.ajax = function (opt) {//opt是自定义形参，不用多说

//判断用户传入的实参是否是对象,如果不是,则函数停止往下执行,即不执行。如果是,则继续往下执行请求

if (typeof opt != "object") {

    return false

}

// 获取opt对象中的数据

let type = opt.type || "get" //请求方式,如果用户不写明，默认为get请求

let url = opt.url || location.pathname//请求地址,如果用户不写明,则默认为本地服务地址(一般自己测试才会这样写-_-)

let async = opt.async || true //设置是否异步,默认为 异步

let dataType = opt.dataType || "json"  //要请求的数据类型,如果用户不写明，默认为json.

// 处理传参数据 : "key=value&key=value..."---->参数的传递形式

// 循环传参对象 : 将对象的键名和键值拼接为字符串

 

let data = opt.data || {}//用户传递的参数,如果不写明,默认为空对象。

let dataStr = ""//定义一个空字符串

for (var key in data) {//for in 遍历 对象

//转成 key=value&key=value 这种形式

dataStr += key + "=" + data[key] + "&"

}

dataStr = dataStr.slice(0, -1)//slice方法,去除 参数字符串最后一位"&",因为最后一个"&" 后面再无参数.即变为(如:key=value&key1=value1)

 

//请求发送前的函数 beforeSend(){执行某代码片段}

if (opt.beforeSend) {

    opt.beforeSend()

}

// 1.发送请求体

let http = new XMLHttpRequest()

http.open(type, type == "get" ? url + "?" + dataStr : url, async)//三元表达式,如果是get请求 则地址后面加传递的参数,如果是post请求则直接写地址,后面不加参数

// 判断 如果是post请求,则设置请求头 ;get请求的话不设置

if (type == "post") {

    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

}

http.send(type == "get" ? null : dataStr)//发送参数这里,get请求的话这里不写或写null,post请求则写入传递的参数;

// 2.接收响应数据

http.onreadystatechange = function () {

    if (http.readyState == 4 && (http.status == 200 || http.status == 304)) {

 

// 3.接收数据并自动处理数据

// 3.1判断后台响应数据的格式

// Content-Type以下三种

// json application/json

// xml application/xml

// text text/plain

// let rh = http.getAllResponseHeaders()

// console.log(rh,typeof rh)

//获取响应头的响应类型

    let ct = http.getResponseHeader("Content-Type")

 

     let resData = null;//接收请求数据

//判断响应类型

if (ct == "application/json") {//json文件的处理方式

  let jsonData = http.responseText

  let jsData = JSON.parse(jsonData);

  console.log(jsData)

  resData = jsData

}

else if (ct == "application/xml") {//xml文件的处理方式

  let xmlData = http.responseXML;

  console.log(xmlData)

  resData = xmlData

}

else {

  let textData = http.responseText;//text文件的处理方式

  console.log(textData)

  resData = textData

}

//响应成功，执行成功的回调函数

  if (opt.success) {

    opt.success(resData)

  }

}

else {

  //如果交互失败

   if (opt.error) {

  // 反馈响应状态码 响应状态值 生命周期状态

  let err = {

    status: http.status,

    readyState: http.readyState

  }

  opt.error(err)

    }

}

// 4.交互完成

  if (opt.complete) {

      opt.complete()

  }

 }

}