原生js编写Ajax

代码

/**
* @author: kjprime
* @description ajax
* @param {object} obj
* @return {void}
*/
function ajax(obj){
    // 创建XMLHTTPRequest对象 
    let xhr =  new XMLHttpRequest() || new ActiveXObject("microsoft.xmlhttp") || window.XMLHttpRequest
    // 设置默认POST
    obj.type = obj.type || "POST"
    let isPost = "POST" == obj.type ? true : false //默认POST
    // 当为GET无？在url中添加？xx=xx&
    if(!isPost && obj.url.indexOf("?") < 0){
        obj.url += "?"
        for(let key in obj.data){
            obj.url += `${key}=${obj.data[key]}&`
        }
    }
    xhr.open(obj.type, obj.url, true,"4444", "849654")
    if(isPost){
        //("Content-type", "application/x-www-form-urlencoded")
        xhr.setRequestHeader("Content-type","application/json")
        xhr.send(JSON.stringify(obj.data))
    }else{
        xhr.send()
    }
    xhr.onreadystatechange = function(){
//        console.log(readyState[this.readyState])
        if (this.readyState == 4 && this.status == 200) {
//            console.log(status[this.status])
            obj.success(JSON.parse(this.responseText))
        }
        if(this.readyState < 4 && this.status > 204){
            console.error(status[this.status])
       }
    }

}

const readyState = {
    0: '请求未初始化',
    1: '服务器连接已建立',
    2: '请求已接收',
    3: '正在处理请求',
    4: '请求已完成且响应已就绪',
}


const status = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）。',
    204: '删除数据成功。',
    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限（令牌、用户名、密码错误）。',
    403: '用户得到授权，但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除，且不会再得到的。',
    422: '当创建一个对象时，发生一个验证错误。',
    500: '服务器发生错误，请检查服务器。',
    502: '网关错误。',
    503: '服务不可用，服务器暂时过载或维护。',
    504: '网关超时。',
}

例子-POST

ajax({
	type: "POST",
	url: "http://127.0.0.1:3000/add", // url
	data: data, // json
	success: function(data){
		console.log(data);
	},
})

例子-GET

ajax({
	type: "GET",
	url: "http://127.0.0.1:3000/add", // url
	data: data, // json
	success: function(data){
		console.log(data);
	},
})