Ajax学习(一),获得XMLHttpRequest对象,进行初步异步交互(jquery.javascript)

javascript方法:

//使用XMLHTTPRequest对象校验来进行初步的异步交互
var xmlHttp;

function verify() {
	
	//获得节点userName的值
	var userName = document.getElementById("userName").value;
	
	//创建XMLHTTPRequest对象
	//需要针对不同浏览器使用不同的方法获得对象
	if(window.XMLHttpRequest) {
		//针对FireFox、mozilla、opera、ie7、ie8、safari
		xmlHttp = new XMLHttpRequest();
		//针对某些mozilla浏览器的Bug修正
		if(xmlHttp.overrideMimeType) {
			xmlHttp.overrideMimeType("text/xml");
		}
	} else if(window.ActiveXObject) {
		//针对ie6及其以下版本
		var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
		for(var i = 0; i<activexName.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activxName[i]);
				break;
			} catch (e) {}
		}
	}
	
	//确认XMLHttpRequest对象创建成功
	/*if(!xmlHttp) {
		window.alert("XMLHttpRequest对象创建失败");
		return ;
	} else {
		window.alert("XMLHttpRequest对象创建成功");
	}*/
	//注册回调函数
	xmlHttp.onreadystatechange = callback;
	
	//设置和服务器端连接的信息 请求方式、URL、同步或异步
	xmlHttp.open("GET", "AJAXServer_1?name="+userName, true);
	
	//发送数据，开始和服务器端进行交互(因为数据已经在上面写了，所以send空)
	xmlHttp.send(null);

}

//回调方法
function callback() {
	
	var result = document.getElementById("result");
	
	//判断是否交互完成
	if(xmlHttp.readyState == 4) {
		//响应是否成功
		result.innerHTML = "交互失败";
		if(xmlHttp.status == 200) {
			//获取服务器返回的数据
			var responseText = xmlHttp.responseText;
			//把数据显示在页面上

			result.innerHTML = responseText;
		} else {
			result.innerHTML = "响应失败"
		}
	}
	
}

JQuery方法：

$.get("AJAXServer_1?name="+$("#userName"), null,
		function callback(data) {
			$("#result").html(data);
		}
	);