Ajax技术分门别类与实现(2)_H5之家 - 中国HTML5教程资源分享第一站

//3、获取服务器的响应并显示时间
???? }
???? xmlHttp.onreadystatechange=function()
?????? {
?????? if(xmlHttp.readyState==4){
?????????? document.myForm.time.value=xmlHttp.responseText;
???????? }
??????? }

//2、发送请求给服务器
??????? xmlHttp.open("GET","time",true);//time是Servlet的名字，也是其URL地址
??????? xmlHttp.send(null);
???????
???? }
?
?
?
? </script>
?
? <body>
??? <form? >
??? <table>
???????????? <tr>????????? <td>用户</td>
?????????????????????????? <td><input type="text"?? onblur?="AjaxFunction();"/></td>

????????????????????????????? //onblur?="AjaxFunction();来激活javascript中的代码
??????????????????? </tr>
???????????? <tr>????? <td>时间</td>
?????????????????????? <td><input type="text"?? /></td>
??????????????????? </tr>
????????? </table>??????????????????????????
??? </form><br>
? </body>
</html>

Servlet?? time的主要代码是：

public void doGet(HttpServletRequest request, HttpServletResponse response)
???throws ServletException, IOException {

??response.setContentType("text/html;charset=UTF-8");
??PrintWriter out = response.getWriter();
?? Date d=new Date();
?? int? h=d.getHours();
?? int m=d.getMinutes();
?? int s=d.getSeconds();
?? System.out.println(d);
?? out.println(h+":"+m+":"+s);//这里就将刚创建的时间传递给了html页面
??out.flush();
??out.close();
?}

最后结果为：

输入用户名，鼠标焦点移开

，鼠标焦点移开，触发事件后：

这样一个实例就完成了