使用 js 面向对象封装一个 ajax

有点类似于 jquery 的 ajax 方法

简单的封装一下,写的很糙,还有很多需要改善的地方，例如把ip和端口独立出来等等… 就先这样用着吧.

先确定一个基本的样式

{
  url:''  // 请求地址
  method:'': // 请求方式
  contentType:'', // contentType
  data:{}, // 请求的参数或者发送的数据
  success:function(){} // 请求成功时返回的函数
  err:function(){} // 请求失败时返回的函数
}

首先创建一个类 AJAX

export default class AJAX{
	static obj;
  	static ajax(_obj) {
	    AJAX.obj = _obj;
	    let xhr = new XMLHttpRequest();
	    xhr.addEventListener("readystatechange", AJAX.readystatechangeHandler);
		// 判断 请求的类型
	    if (AJAX.obj.method.toLowerCase() === "get") {
	      // 拼接 url
	      let url = AJAX.obj.url + "?" + AJAX.concatParam(AJAX.obj.data);
	      xhr.open("get", url);
	      xhr.send();
	    } else if (AJAX.obj.method.toLowerCase() === "post") {
	      xhr.open("post", AJAX.obj.url);
	      xhr.setRequestHeader("Content-Type", AJAX.obj.contentType);
	      xhr.send(AJAX.concatParam(AJAX.obj.data));
	   }
  	}
  	// 拼接参数的函数
	static concatParam(o) {
	    var arr = [];
	    for (let prop in o) {
	      arr.push(prop + "=" + o[prop]);
	    }
	    return arr.join("&");
  	}
	// xhr 事件监听函数
	static readystatechangeHandler(e) {
		if (this.readyState === 4) {
			if (this.status === 200) {
				// 请求成功
				AJAX.obj.success && AJAX.obj.success(this.response);
			} else {
				AJAX.obj.error && AJAX.obj.error("ajax 请求数据失败,请检查信息是否错误!");
			}
		}
	}
}

使用:

import AJAX from './AJAX.js';
AJAX.ajax({
	url:'http://localhost:3000/users/login',
	method:'post',
	contentType:'application/x-www-form-urlencoded',
	data:{
		uname:'xiaosai',
		upwd:'123456'
	},
	success:res=>{
		console.log(res);
	},
	error:errmsg=>{
		console.log(errmsg);
	}
})