筑基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());%>