1.AJAX详解

在学习HTTP协议的时候，我们知道，HTTP协议基于请求响应模型，一次请求对应一次响应，请求只能由客户端发出，服务器只能被动的等待请求。

但我们经常见到如下的功能：

网络聊天室里，聊天信息，不需要刷新页面就可以接受最新的聊天消息。

网站注册时，输入用户名后无需提交立即提示用户名已经存在。

百度输入搜索条件时，根据输入的不同提示不同的备选查询内容。

本质上就是通过js技术 背着浏览器 在不影响当前浏览器对当期页面的访问的情况下 偷偷的和服务器通信的技术

在这些应用场景中，我们没有刷新网页，却获取到了服务器发回的最新数据。这不是很明显的违反了HTTP协议了吗？

其实这不是违反了HTTP协议，而是使用了一种“另类”的技术，叫做AJAX（Asynchronous JavaScript and XML）。改变了传统方式的同步刷新方式，改为了异步刷新—即在保持当前页面的情况下，异步发出请求等待响应，再根据得到的响应消息修改当前页面。

虽然看起来像是服务器主动将数据发给了浏览器 违背了http协议，但其实并不是这样，ajax仍然是由客户端通过js主动发送请求 浏览器做出响应 客户端收到响应有 再通过js来修改页面的部分内容，是完全符合http协议的。

Ajax并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

XMLHttpRequest对象方法

XMLHttpRequest对象属性

想要实现Ajax需要如下几个步骤

//1 创建XMLHttpRequest对象
	function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
//2.服务器端向客户端进行响应(注册监听)
	var data = null;
	var xhr = ajaxFunction();
	xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200||xhr.status==304){
					data = xhr.responseText;
				}
			}
		}
		readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
			0 代表未初始化。 还没有调用 open 方法
			1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
			2 代表已加载完毕。send 已被调用。请求已经开始
			3 代表交互中。服务器正在发送响应
			4 代表完成。响应发送完毕
		xhr.status
			常用状态码及其含义：
			404 没找到页面(not found)
			403 禁止访问(forbidden)
			500 内部服务器出错(internal service error)
			200 一切正常(ok)
			304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
		xhr.responseText 服务器发回的响应结果,字符串
		xhr.responseXML 服务器返回的响应结果,XML对象
//3 客户端与服务器端建立连接
		 * 使用的是XMLHttpRequest对象的open(method, url, asynch)方法
		 * 	* method：请求类型，类似 “GET”或”POST”的字符串。
		 * 	* url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
		 * 	* asynch：表示请求是否要异步传输，默认值为true(异步)。
	xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true);
//4 客户端向服务器端发送请求
		 * 
		 * 使用的是XMLHttpRequest对象的send()方法
		 * 	* 如果请求类型是GET方式的话，使用send()方法发送请求数据，服务器端接收不到
		 *	* 该步骤不能被省略，只能写成xhr.send(null);
		 */
		 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		~GET方式：
			xhr.send(null);		//xhr.send(null);
		~POST方式：如果请求类型是POST的话，需要设置请求首部信息
			xhr.send("a=7&b=8");

jquery方式实现Ajax

		$.ajax({
			type: "POST",
			url: "some.php",
			data: "name=John&location=Boston",
			success: function(msg){
				alert( "Data Saved: " + msg );
			}
		});
		$.get("test.php?name=John&location=Boston", function(data){
			alert("Data Loaded: " + data);
		});
		$.post("test.php",{"name":"John","location":"Boston"}, function(data){
			alert("Data Loaded: " + data);
		})

1.1.AJAX实现检查用户名是否已经存在

开发检查用户名是否已经存在的Servlet

在用户输入用户名后，触发js代码，用AJAX技术将用户名提交到Servlet中检查用户名。