Ajax&Jquery

Ajax

Ajax定义

Asynchronous Javascript And XML(异步JavaScript和XML)

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

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

Ajax用途

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

使用Ajax发送和接收请求

1. 创建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>
   

2. 使用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>
   

3. 使用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,"json");
$.post(URL,data,callback,"json");

其中参数意义如下:

• URL: 希望请求的地址
• data: POST方法发送的数据
• callback: 回调函数
• "json": 说明返回的是json对象,浏览器会自动将字符串解析为json对象

//发送GET请求
$("#button1").click(function() {
	$.get("demo_test_get.asp", function(data, status) {
		alert("Data: " + data + "\nStatus: " + status);
		// 说明返回的是json对象,浏览器会自动将字符串解析为json对象
	}, "json");
});

// 发送POST请求
$("button").click(function() {
	$.post("demo_test_post.asp", {
		name : "Donald Duck",
		city : "Duckburg"
	}, function(data, status) {
		alert("Data: " + data + "\nStatus: " + status);
		// 说明返回的是json对象,浏览器会自动将字符串解析为json对象
	}, "json");
});

Jquery应用实例1:处理注册信息

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>");
		}
	});
}