筑基Ajax

完整版见https://jadyer.github.io/

废话少说，直接上代码

这是一个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" οnkeyup="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()); %>