原生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);
			}
		}
	}
}