浅谈ajax--异步请求机制

Ajax

什么是Ajax？

谈到ajax，首先说ajax不是javaScript的规范，Asynchronous JavaScript and XML的缩写，意思就是用JavaScript执行异步网络请求。Ajax 是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

Ajax的基本使用

这里就简单举一个表单提交的验证用户是否可以注册的例子。

原生js发送ajax请求代码：

<input id="userName"  onblur="check()" />
//如果验证错误，显示错误信息
<h1 id="msg"></h1>

<script>
// 创建异步请求对象
		var xmlhttp = new XMLHttpRequest();
		// 设置请求类型、请求地址以及参数、是否异步
		xmlhttp.open("post","HelloServlet",true);
		// 设置请求头部信息
		xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
		// 发送请求

		var input = document.getElementById("userName");
		xmlhttp.send("userName="+$("input").input.value);
		// 状态监听
		xmlhttp.onreadystatechange = function(){
			// 当状态为4 响应码为200的时则表示请求完成
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				// 获取返回请求结果
				 var result = xmlhttp.responseText;
				 // 根据请求结果进行处理
				 if(result == 1){
				  	$("#msg").text("恭喜你，可以使用此用户名");					 
				 }else{
				 	$("#msg").text("对不起，此用户名已被使用");					 
				 }
			}
		};
</script>

后台代码：

	// ajax发出请求后，后台获取用户提交的请求参数
		String name = request.getParameter("userName");
		//再写回前台
        PrintWriter pw = response.getWriter();
        // 当用户名是seven返回字符串0，否则返回字符串1
        if("seven".equals(name)){
            pw.write("0");
        }else{
            pw.write("1");
        }

JQuery中的Ajax使用

前台代码：

	$("#userName").on("blur",function(){
			// $.ajax 表示jquery中的ajax的调用方式
			$.ajax({
					 "url":"HelloServlet",  // 请求地址
					 "data":"userName="+$("input").val(),  //参数
					 "type":"POST",  // 请求类型
					 "success":function(data){    // 请求成功时的回调函数
						 if(data == 1){
							 $("#msg").text("恭喜你，可以使用此用户名");
						 }else{
							 $("#msg").text("对不起，此用户名已被使用");
						 }
						
					 },
					 "error":function(){  // 请求失败时的回调函数
						
					 } 
				});
            );

后台代码同上.

如果与服务器交互的数据时json格式可使用如下方式：

			/*
				使用 HTTP GET 请求从服务器加载 JSON 编码的数据
				第1个参数为请求地址，第2个参数为请求参数，请3个参数为成功时的回到函数
			*/
			$.getJSON("HelloServlet",{userName:$("input").val()},function(data){
                // 如果返回的json字符串定义了result的键，可以直接通过键取出值进行判断操作
					if(data.result){
						 $("#msg").text("恭喜你，可以使用此用户名");
					 }else{ 
						 $("#msg").text("对不起，此用户名已被使用");
					 }
			});

后台代码：

	// 获取用户提交的请求参数
		String name = request.getParameter("userName");
		PrintWriter pw = response.getWriter();
		if("seven".equals(name)){
			pw.write("{\"result\":false}");
		}else{
			pw.write("{\"result\":true}");
		}