JS中AJAX的简单应用

    最近了解了一下JS中AJAX的应用，总结一下，以备今后不时之需。

一. 创建XHR对象：

/**
 * 创建XMLHttpRequest对象
 **/
function createXmlHttpRequest(){
	var xmlhttp = null;
	try{
		xmlhttp = new XMLHttpRequest();
	}catch(e){  
		//IE7.0一下版本浏览器以ActiveX组件方式创建XMLHttpRequest对象
		var MSXML = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
		for(var i=0; i<MSXML.length; i++){
			try{
				xmlhttp = new ActiveXObject(MSXML[i]);
				break;	
			}catch(e){}
		}
	}
	
	return xmlhttp;
}

 

二. 以GET方式发送数据

/**
 * 利用ajax校验用户名的重复性
 * get方式
 **/
function checkUserByAjaxGet(){
	var groupName = $("GroupName");
	//创建XHR对象
	var xhr = createXmlHttpRequest();
	//设置一个针对readystatechange事件的监听函数
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200 || xhr.status == 304){
				if(xhr.responseText == '1'){
					var msg = '已存在此用户组，请修改';
				}else{
					var msg = '此用户组可用';
				}				
				var span = document.createElement("span");
				span.innerHTML = "<font color='red'>" + msg + "</font>";
				groupName.parentNode.appendChild(span);
			}
		}
	}
	//GET方式提交
	xhr.open('GET', '/groups/checkUser?name='+groupName.value, true);
	xhr.send(null);
}

 

三. 以POST方式发送数据

/**
 * 利用ajax校验用户名的重复性
 * post方式
 **/
function checkUserByAjaxGet(){
	var groupName = $("GroupName");
	//创建XHR对象
	var xhr = createXmlHttpRequest();
	//设置一个针对readystatechange事件的监听函数
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200 || xhr.status == 304){
				if(xhr.responseText == '1'){
					var msg = '已存在此用户组，请修改';
				}else{
					var msg = '此用户组可用';
				}				
				var span = document.createElement("span");
				span.innerHTML = "<font color='red'>" + msg + "</font>";
				groupName.parentNode.appendChild(span);
			}
		}
	}
	//准备一个post连接（post方式提交）
	xhr.open('post', '/groups/checkUser', true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	//发起请求
	xhr.send('name='+groupName.value);	
}

 

四. 返回XML格式数据信息

/**
 * 利用ajax校验用户名的重复性
 * 返回xml格式解析
 **/
function checkUserByAjaxXml(){
	var groupName = $("GroupName");
	var xhr = createXmlHttpRequest();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200 || xhr.status == 304){
				var ret = xhr.responseXML;
				var flag = ret.getElementsByTagName('flag')[0].firstChild.nodeValue;
				var msg = ret.getElementsByTagName('msg')[0];
				$("tip").innerHTML = "<font color='red'>"+msg.firstChild.nodeValue+"</font>";
				if(flag != 0){
					groupName.value = '';
					groupName.focus();
				}
			}
		}
	}
	xhr.open('GET', '/groups/checkUserXml?name='+groupName.value, true);
	xhr.send(null);
}

 对应目标处理端：

header("Content-Type:text/xml; charset=utf-8");
$xml = '<?xml version="1.0" encoding="utf-8" ?>';
$xml .= '<result>';
$xml .= '<flag>'.$flag.'</flag>';
$xml .= '<msg>'.$msg.'</msg>';
$xml .= '</result>';
echo $xml;exit;

 FireBug前端捕获：

 

五. 返回 JSON 格式数据信息：

/**
 * 利用ajax校验用户名的重复性
 * 返回Json格式解析
 **/
function checkUserByAjaxJson(){
	var groupName = $("GroupName");
	var xhr = createXmlHttpRequest();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200 || xhr.status == 304){
				//var ret = eval('('+xhr.responseText+')');				
				var ret = JSON.parse(xhr.responseText);
				$("tip").innerHTML = "<font color='red'>"+ret.msg+"</font>";
				if(ret.flag != 0){
					groupName.value = '';
					groupName.focus();
				}
			}
		}
	}
	xhr.open('GET', '/groups/checkUserJson?name='+groupName.value, true);
	xhr.send(null);
}

 对应目标处理端：

header("Content-Type:text/json; charset=utf-8");
$json = json_encode(array('flag'=>$flag, 'msg'=>$msg));
echo $json;exit;

 FireBug前端捕获：