前端开发之原生Ajax的封装

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010782846/article/details/82191356

因项目需要 封装一波Ajax的使用：

ajaxUtils.js

获取Ajax的对象：

// ajax 对象
function ajaxObject() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
        } 
    catch (e) {
        // Internet Explorer
        try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("您的浏览器不支持AJAX！");
                return false;
            }
        }
    }
    return xmlHttp;
}

Post请求：

// ajax post请求：
function ajaxPost (callback) {
    var ajax = ajaxObject();
    ajax.open( "POST" , callback.url , true );
    ajax.setRequestHeader( "Content-Type" , "application/json" );
    console.log("request(POST):"+callback.url);
    console.log("data:"+JSON.stringify(callback.data));
    ajax.onreadystatechange = function () {
         if( ajax.readyState == 4 ) {
            if( ajax.status == 200 ) {
                callback.success(ajax.responseText)
            }
            else {
            	callback.fail("HTTP请求错误！错误码："+ajax.status)
            }
        }
        else {
            callback.loading();
        }
    }
    ajax.send(callback.data);
 
}

Get请求:

// ajax get请求：
function ajaxGET (callback) {
    var ajax = ajaxObject();
    ajax.open( "GET" , callback.url , true );
     console.log("request(GET):"+url);
    ajax.onreadystatechange = function () {
        if( ajax.readyState == 4 ) {
            if( ajax.status == 200 ) {
                callback.success(ajax.responseText)
            }
            else {
            	callback.fail("HTTP请求错误！错误码："+ajax.status)
            }
        }
        else {
            callback.loading();
        }
    }
    ajax.send();
 
}

以Post请求为列子，使用方法如下：

ajaxPost({
		url: url,
		data: {},
		success: function(data) {
			console.log(data);
		},
		fail: function(e) {
			console.log(e);
		},
		loading: function() {
			console.log("正在加载...");
		}
	});