基础ajax应用

function createXMLHttpRequest(){
	var xhr = null;
	try{
		xhr = new XMLHttpRequest();
	}catch(e){
		var MSXML = 
			['abc','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
	
		//IE7.0以下的 浏览器以ActiveX组件的方式来创建
		for ( var i = 0; i < MSXML.length; i++) {
			try {
				xhr = new ActiveXObject(MSXML[i]);
				break;
			} catch(ex){
			}
		}
	}
	return xhr;
}

function ajaxGet(){
	
	//1.创建XMLHttpRequest对象
	var xhr = createXMLHttpRequest();
	
	//2.创建一个新的http请求,但是没有发送该请求,并指定此请求的方法和url
	/**
	 * 参数一:http方法例如POST、GET、PUT及DELETE
	 * 参数二:请求的URL地址，可以为绝对地址也可以为相对地址,但是必须是本域路径
	 * 参数三:指定此请求是否为异步方式，默认为true.一般都为true
	 */
	xhr.open("GET","/AjaxServlet?username=admin&__task="+new Date().getTime(),true);
	
	//指定当readyState属性改变时的事件处理函数
	/**
	* 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
	  1 (初始化) 对象已建立,已经调用open方法，尚未调用send方法 
	  2 (发送数据) send方法已调用，但是当前的状态及http头未知 
	  3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseText获取部分数据会出现错误 
	  4 (完成) 数据接收完毕,此时可以通过通过responseText获取完整的回应数据 
	 */
	xhr.onreadystatechange = function(){
		//数据接收完毕
		if(xhr.readyState==4 && (xhr.status==200||xhr.status==304)){
			var result = xhr.responseText;
			document.getElementById("msg").innerHTML = result;
		}
	};
	
	//3.发送请求到http服务器并接收回应
	/**
	 * 参数一:只对post有效
	 */
	xhr.send(null);
}




function ajaxPost(){
	//创建ajax对象
	var xhr = createXMLHttpRequest();
	
	//创建http请求
	xhr.open("POST","/AjaxServlet"/*,true*/);
	
	//如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4 && xhr.status==200){
			var result = xhr.responseText;
			if(result=="true"){
				location.href="index.html";
			}else{
				alert("登录失败");
			}
		}
	};
	//参数格式为url方式 http://localhost/AjaxServlet?userName=admin&password=123456
	xhr.send("userName=adminx&password=123456");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!