筑基Ajax

废话少说，直接上代码

这是一个Web Project，共由两个JSP页面构成，首先是index.jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<script type="text/javascript">
	//声明一个保存XMLHttpRequest对象的xmlHttp变量
	var xmlHTTP;

	//AJAX的要点是XMLHttpRequest对象，不同的浏览器创建XMLHttpRequest对象的方法是有差异的
	//IE浏览器使用ActiveXObject，而其他浏览器使用名为XMLHttpRequest的JavaScript内建对象
	//这里，我们自定义的createXHR()函数的作用，就是解决不同浏览器创建不同的xmlHTTP对象的问题
	function createXHR(){
		try{
			//Firefox, Safari, Opera 8.0+
			xmlHTTP = new XMLHttpRequest();
		}catch(e){
			try{
				//Internet Explorer 6.0+
				xmlHTTP = new ActiveXObject("Msxml2.xmlHTTP");
			}catch(e){
				try{
					//Internet Explorer 5.0+
					xmlHTTP = new ActiveXObject("Microsoft.xmlHTTP");
				}catch(e){
					alert("Your browser does not support Ajax");
					return false;
				}
			}
		}
	}

	//或者这么写，来创建XMLHttpRequest对象
	function createxmlHTTPRequest(){
		if(window.ActiveXObject){ //IE浏览器
			try{
				xmlHTTP = new ActiveXObject("Microsoft.xmlHTTP");
			}catch(e){
				xmlHTTP = new ActiveXObject("Msxml2.xmlHTTP");
			}
		}else if(window.xmlHTTPRequest){ //若顶级的window对象下面有一个xmlHTTPRequest子对象存在的话
			xmlHTTP = new xmlHTTPRequest();
		}
	}

	//onkeyup事件：当用户在文本域中输入完数据后，将手指从键盘按键上移开时，该函数被调用
	//var showTime = function(){ // TODO ...}
	function showTime(){
		var page = "time.jsp"; //指定处理请求的页面
		var param = "?sid=" + Math.random(); //指定附带的URL参数
		var url = page + param; //拼接为处理请求的URL
		//var url = "time.jsp" + "?sid=" + Math.random() + "&name=沈浪";

		//或者使用createxmlHTTPRequest()函数创建xmlHTTPRequest对象，也即为其分配内存空间
		createXHR();
		
		//也可以用Javascript即时定义函数的方式定义响应函数，如xmlHTTP.onreadystatechange = function(){// TODO ...};
		//注意：这里指定的是函数名，切记莫要加括号，所以写成xmlHTTP.onreadystatechange = callback()的形式是错的
		xmlHTTP.onreadystatechange = callback; //注册回调，即设置回调函数
	
		//要想把请求发送到服务器，就需要使用XMLHttpRequest对象的open()方法和send()方法
		//open()方法的第一个参数定义发送请求的方式，是GET还是POST或者HEADER、PUT、DELETE、OPTIONS、TRACE
		//open()方法的第二个参数指定处理请求的URL地址。基于安全考虑，该URL只能是同网域的，否则会提示"没有权限"的错误
		//open()方法的第三个参数指定使用异步还是同步(async)模式来处理请求
		//                   true表示脚本将会在send()方法被调用后继续执行，不需要等待服务器的返回
		//                   false表示脚本必须等到服务器返回一个请求后，才能继续执行
		//send()方法可将请求送往服务器。如果是GET请求，那么通常不需要给send()方法传参，故此时常用null作为参数
		//                   在使用GET来请求数据时，特别的，当发送的数据长度大于512字节时，建议更换为POST请求
		xmlHTTP.open("GET", url, true); //建立对web服务器的请求，也即初始化xmlHTTPRequest组件，为该内存空间赋值
    	xmlHTTP.send(null); //向web服务器发送请求
	}

	function callback(){
		//响应是否已完成【4为请求状态完成】，以及，请求是否成功【200为成功】
		if(4==xmlHTTP.readyState && 200==xmlHTTP.status){
			document.myForm.time11.value = xmlHTTP.responseText;
			document.getElementById("time22").innerHTML = xmlHTTP.responseText;
		}
	}
	
	/*
	//用AJAX提交的时候一定要按照HTTP的规范来，要尽量做到浏览器兼容
	//尤其是POST提交时，就不要往URL地址里加参数了，因为这是违规的，后果就是有的Web服务器会忽视我们所传递的参数
	//另外xmlHTTP.send(..)的参数如果是以POST方式发出的话，则可以是任何想要传给服务器的内容
	//不过跟form一样，如果要传文件或者POST内容给服务器，必须先调用setRequestHeader()方法修改MIME类别
	function showTime(){
		var page = "time.jsp";
		var param = "sid=" + Math.random();
		createXHR();
		xmlHTTP.onreadystatechange = callback;
		xmlHTTP.open("POST", page, true);
		xmlHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	xmlHTTP.send(param);
	}
	*/
	/*
	【xmlHttpRequest对象的其它方法】
	xmlHTTP.abort()-----------------------------取消当前请求
	xmlHTTP.getAllResponseHeaders()-------------将完整的HTTP头部做为一个字符串返回
	xmlHTTP.getResponseHeader("headerLabel")----以字符串的方式返回给定的HTTP头的值
	xmlHTTP.setRequestHeader("label", "value")--设置HTTP头信息，并和请求一起发送
	【XMLHttpRequest对象的几个属性】
	onreadystatechange--存有处理服务器响应的函数，即指定回调函数的名称。相当于C语言中的函数指针
	responseText--------能够取回由服务器返回的数据，此时是以字符串的方式返回HTTP响应的
	responseXML---------能够将HTTP响应做为XML返回。该属性返回一个XML文档对象，该XML可以用W3C的DOM节点树方法和属性进行检索分析
	readyState----------存有服务器响应的状态信息。每当这个请求状态改变时，回调函数就会被调用一次
						0--请求未初始化【对象已创建，尚未调用open()】
						1--请求已提出【调用open()之后，调用send()之前】
						2--请求已发送【这里通常可以从响应得到内容头部，调用send()之后】
						3--请求处理中【响应中通常有部分数据可用，但是服务器还没有完成响应。即已接收到部分数据，但尚未接收完成】
						4--请求已完成【可以访问服务器响应并使用它，此时数据全部接收完成】
	status--------------能够获得服务器返回的状态码。例如404为"Not Found"或者200为"OK"
	statusText----------能够获得服务器返回的状态文本信息。例如"Not Found"或者"OK"
	*/
</script>

<form name="myForm">
	用户名：<input type="text" name="username" onkeyup="showTime()"/><br/>
	时间11：<input type="text" id="time11" name="time"/><br/>
	时间22：<span id="time22"></span>
</form>

然后是用于处理Ajax请求的time.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%--
★★Ajax缓存问题的五种解决方式★★
其本质是浏览器的缓存问题，浏览器为了提供更好的交互方式，在其内部会缓存已访问的页面的信息
再次发送同一URL请求时，不会提交请求而是使用浏览器所缓存的数据，故缓存不是AJAX特有的问题
11..禁用浏览器缓存。缺点是：访问网页速度会变慢，并且客户未必知道访问该请求时，需要禁用缓存
    IE---工具---Internet选项---常规---浏览历史记录---设置---检查所存网页的较新版本：选中每次访问网页时
22..仅发送POST请求。因为浏览器只会对GET请求进行缓存，而不会对POST请求进行缓存
33..在请求的URL中增加无意义的参数，使URL每次都不一样。如"?time=" + new Date().valueOf();
44..在Ajax中发送请求前添加xmlHTTP.setRequestHeader("if-Modified-Since", "0");
55..在服务端添加回应头内容，指明不使用缓存
    response.setHeader("pragma", "no-cache");
    response.setHeader("cache-control", "no-cache");
    response.setDateHeader("expires", 0);
--%>
<%
//清除缓存
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
//验证是否能获取到URL参数
System.out.println(request.getParameter("sid"));
//返回HTTP响应的字符串
response.getWriter().print(new java.util.Date());
%>