手寫js實現ajax功能（轉）

自從javascript有了各種框架之后，比如jquery，使用ajax已經變的相當簡單了。但是有的項目不需要加載jquery這種龐大的js插件，只需要實現ajax即可。所以我們就需要自己用原生JS實現ajax

ajax：一種請求數據的方式，不需要刷新整個頁面；

ajax的技術核心是 XMLHttpRequest 對象；

ajax 請求過程：創建 XMLHttpRequest 對象、連接服務器、發送請求、接收響應數據；

<script type="text/javascript">
//通過createXHR()函數創建一個XHR對象：
function createXHR() {
	if (window.XMLHttpRequest) {	//IE7+、Firefox、Opera、Chrome 和Safari
		 return new XMLHttpRequest();
	} else if (window.ActiveXObject) {   //IE6 及以下
		var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
		for (var i = 0,len = versions.length; i<len; i++) {
			try {
				return new ActiveXObject(version[i]);
				break;
			} catch (e) {
				//跳過
			}	
		}
	} else {
		throw new Error('瀏覽器不支持XHR對象！');
	}
}
//封裝ajax，參數為一個對象
function ajax(obj) {
	var xhr = createXHR();	//創建XHR對象
	//通過使用JS隨機字符串解決IE瀏覽器第二次默認獲取緩存的問題
	obj.url = obj.url + '?rand=' + Math.random();
	obj.data = params(obj.data);  //通過params()將名值對轉換成字符串
	//若是GET請求，則將數據加到url后面
	if (obj.method === 'get') {
		obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data; 
	}
	if (obj.async === true) {   //true表示異步，false表示同步
		//使用異步調用的時候，需要觸發readystatechange 事件
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {   //判斷對象的狀態是否交互完成
				callback();		 //回調
			}
		};
	}
	//在使用XHR對象時，必須先調用open()方法，
	//它接受三個參數：請求類型(get、post)、請求的URL和表示是否異步。
	xhr.open(obj.method, obj.url, obj.async);
	if (obj.method === 'post') {
		//post方式需要自己設置http的請求頭，來模仿表單提交。
		//放在open方法之后，send方法之前。
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send(obj.data);		//post方式將數據放在send()方法里
	} else {
		xhr.send(null);		//get方式則填null
	}
	if (obj.async === false) {  //同步
		callback();
	}
	function callback() {
		if (xhr.status == 200) {  //判斷http的交互是否成功，200表示成功
			obj.success(xhr.responseText);			//回調傳遞參數
		} else {
			alert('獲取數據錯誤！錯誤代號：' + xhr.status + '，錯誤信息：' + xhr.statusText);
		}	
	}
}
//名值對轉換為字符串
function params(data) {
	var arr = [];
	for (var i in data) {
		//特殊字符傳參產生的問題可以使用encodeURIComponent()進行編碼處理
		arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
	}
	return arr.join('&');
}
</script>

　　

　　示例：

<script src="ajax.js"></script>
<script>
var deng= document.getElmentsById（“btn”）[0];
deng.onclick = function(){

var jr= document.getElmentsById（“btn”）value;

var pwd= document.getElmentsById（“btn”）value;

}
ajax({
	method : 'post',
	url : 'demo.php',
	data : {
		name : jr,
		pwd:pwd
	},
	success : function (message) {
		alert(message);
	},
	async : true
});
</script>