Ajax

Ajax定义

Asynchronous Javascript And XML(异步JavaScript和XML)

并不是新的技术,而是把原有的技术整合到一起

使用CSS和XHTML来表示
使用DOM模型来交互和动态显示
使用XMLHttpRequest来和服务器进行异步通信
使用javascript来绑定和调用

Ajax用途

局部刷新网页内容. 保持其他部分不动,只刷新某些地方.

使用Ajax发送和接收请求

创建Ajax对象: 我们可以在js语句中创建Ajax对象,用于发送和接收请求

<script>
	var xmlhttp;
	if (window.XMLHttpRequest) {
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	} else {
		// code for IE6, IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
</script>

使用ajax对象发送GET请求
使用Ajax对象的open(method,url,async)方法发送请求,其参数列表如下:
method: 请求的类型,为GET或POST
url: 文件在服务器上的位置
async: true(异步)或 false(同步),一般用true,异步发送请求

<script>
	var xmlhttp;
	// 通过上一节的语句得到Ajax请求对象	

	// 发送请求
	// 	GET请求的参数要拼接在url中
	xmlhttp.open("GET", "DemoServlet?para1=" + para1, true);

	// 要想获取服务器返回的数据,需要在这里添加一个监听事件
	xmlhttp.onreadystatechange = function() {
		// 若服务器已正常处理Ajax请求,且http状态码为200,则处理服务器返回的数据
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			// 弹出响应的信息
			alert(xmlhttp.responseText);
		}
	}
	// 发送请求
	xmlhttp.send();
</script>

使用ajax对象发送POST请求

<script>
	var xmlhttp;
	// 通过上一节的语句得到Ajax请求对象
	
	// 发送请求
	xmlhttp.open("POST", "DemoServlet?", true);

	// 要想获取服务器返回的数据,需要在这里添加一个监听事件
	xmlhttp.onreadystatechange = function() {
		// 若服务器已正常处理Ajax请求,且http状态码为200,则处理服务器返回的数据
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			// 弹出响应的信息
			alert(xmlhttp.responseText);
		}
	}

	// 使用POST方式带数据,需要添加请求头,说明提交的数据类型是一个经过url编码的form表单数据
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");	
	// 在send方法里写表单数据,若没有请求参数,则send不接收参数 
	xmlhttp.send("para1=value1&para2=value2");
</script>

Ajax应用实例:处理注册信息

使用Ajax判断请求的用户名是否存在

<script type="text/javascript">
	function getAjax() {
		var xmlhttp;
		if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {
			// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xmlHttp;
	}

	function checkUserName() {
		// 获取输入框的值
		var name = document.getElementById("name").value;
		// 创建对象
		var request = getAjax();
		// 发送请求
		request.open("POST", "CheckUsernameServlet", true);

		// 注册状态改变监听,获取服务器传送过来的数据
		request.onreadystatechange = function() {
			if (request.readyState == 4 && request.status == 200) {
				var responseData = request.responseText;
				if (responseData == 1) {
					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
				} else {
					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
				}
			}
		}
		// 传入参数
		request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		request.send("name=" + name);
	}
</script>

Jquery

使用Jquery发送请求

使用Jquery发送GET和POST请求语法如下

$.get(URL,callback);
$.post(URL,data,callback);

URL: 希望请求的地址
data: POST方法发送的数据
callback: 回调函数

//发送GET请求
$("#button1").click(function() {
	$.get("demo_test_get.asp", function(data, status) {
		alert("Data: " + data + "\nStatus: " + status);
	});
});

// 发送POST请求
$("button").click(function() {
	$.post("demo_test_post.asp", {
		name : "Donald Duck",
		city : "Duckburg"
	}, function(data, status) {
		alert("Data: " + data + "\nStatus: " + status);
	});
});

使用Jquery处理注册信息

function checkUsername() {
	// 获取输入框的内容
	var username = $("#username").val();

	// 发送请求
	$.post("CheckUsernameServlet", {
		username : username
	}, function(data, status) {
		// 获得返回状态
		if (data == 1) {
			// 用户名存在
			$("#span01").html("<font color='red'>用户名已被注册</font>");
		} else {
			// 用户名不存在
			$("#span01").html("<font color='green'>用户名可以使用</font>");
		}
	});
}

Ajax&Jquery