原生ajax及其封装

ajax在网页端局部刷新和App端接口使用。封装在App端实用。

原生：

//get请求

//1、创建XMLHttpRequest对象
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    //兼容ie6
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

/**
 * 2、准备发送。
 * 参数一是请求方式，
 * 参数二是请求地址及参数，
 * 参数三是异步请求或同步请求，
 * 同步请求时有请求存在时会卡在这个请求处，不能进行其他任何操作
*/
xhr.open('get',url + '?' + params,true);

/**
 * 3、发送
*/
xhr.send(null);

//4、发送成功后获取请求结果，在请求是异步请求时，使用如下方式获取请求结果
xhr.onreadystatechange = function(){
    if(xhr.readystate == 4){
        if(xhr.status == 200){
            var result = xhr.responseText;//xhr.responseXML;
            //根据具体业务，做具体处理
            /**
             * 如果返回的是json数据，可通过JSON.parse将json字符串转换成json对象使用；
             * 如果返回的是XML格式数据，可通过document.getElementsByName处理
             * 如果是文字字符串，直接使用
            */
        }
    }
}

//4、在请求是同步请求时，使用如下方式获取请求结果
if(xhr.readystate == 4){
    if(xhr.status == 200){
        var result = xhr.responseText;//xhr.responseXML;
        //根据具体业务，做具体处理
        /**
         * 如果返回的是json数据，可通过JSON.parse将json字符串转换成json对象使用；
         * 如果返回的是XML格式数据，可通过document.getElementsByName处理
         * 如果是文字字符串，直接使用
        */
    }
}

//post方式请求

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("post",url,true);
xhr.send(params);
xhr.onreadystatechange = function(){
    if(xhr.readystate == 4){
        if(xhr.status == 200){
            var result = xhr.responseText;//xhr.responseXML;
        }
    }
}

封装：

/**
 * ajax的封装
 * 使用传入obj的方式解决参数的顺序不可改变
 * 定义默认对象，解决参数没有默认值，每次都要传值的问题
 */
function myAjax(obj){
	var  defaults = {
		type: "get",
		url: "#",
		dataType: "json",
		data: {},
		async: true,
		success: function(result){
			console.log(result);
		}
	};
	
	/**
	 * obj中的属性，覆盖到defaults中的属性
	 * 1、如果有一些属性只存在obj中，会给defaults中增加属性
	 * 2、如果有一些属性在obj和defaults中都存在，会将defaults中的默认值覆盖
	 * 3、如果有一些属性只在defaults中存在，在obj中不存在，这时候defaults中将保留预定义的属性
	 */
	for(var key in obj){
		defaults[key] = obj[key];
	}
	
	//1、创建对象
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//组装params
	var params = {};
	for(var attr in defaults.data){
		params += attr + "=" + defaults.data[attr] + "&";
	}
	//去除params最后的&
	if(params){
		params = params.substring(0,params.length - 1);
	}
	if(defaults.type == 'get'){
		defaults.url = defaults.url + "?" + params;
	}
	
	//2、准备发送
	xhr.open(defaults.type,defaults.url,defaults.async);
	
	//3、发送
	if(defaults.type == 'get'){
		xhr.send(null);
	}else if(defaults.type == 'post'){
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send(params);
	}
	
	//4、回调
	if(defaults.async){ //异步
		xhr.onreadystatechange = function(){
			if(xhr.readystate == 4){
				if(xhr.status == 200){
					var result = null;
					if(defaults.dataType == 'json'){
						result = xhr.responseText;
						result = JSON.parse(result);
					}else if(defaults.dataType == 'xml'){
						result = xhr.responseXML;
					}else{
						result = xhr.responseText;
					}
					defaults.success(result);
				}
			}
		}
	}else { //同步
		if(xhr.readystate == 4){
			if(xhr.status == 200){
				var result = null;
				if(defaults.dataType == 'json'){
					result = xhr.responseText;
					result = JSON.parse(result);
				}else if(defaults.dataType == 'xml'){
					result = xhr.responseXML;
				}else{
					result = xhr.responseText;
				}
				defaults.success(result);
			}
		}
	}
}