一个Ajax的简单实例
通常WEB应用中与服务器的交互都是利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。
而AJAX,通过JavaScript的XMLHttpRequest对象,直接与服务器来通信。通过使用HTTP请求,web页可向服务器进行请求,并得到来自服务器的响应,而不加载页面。
1、客户端页面代码:<html> <body> <script type="text/javascript"> function ajaxFunction(){ var xmlHttp; if(window.ActiveXObject){ //IE浏览器 xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP"); }else if(window.XMLHttpRequest){ //其他浏览器 xmlHttp = new XMLHttpRequest(); } //onreadystatechange 属性存有处理服务器响应的函数 xmlHttp.onreadystatechange=function(){ /* readyState 属性 0 请求未初始化(在调用 open() 之前) 1 请求已提出(调用 send() 之前) 2 请求已发送(这里通常可以从响应得到内容头部) 3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 4 请求已完成(可以访问服务器响应并使用它) */ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ document.myForm.time.value=xmlHttp.responseText; alert("返回客户端的信息为:"+xmlHttp.responseText); } } } xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> <form name="myForm"> 用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 时间: <input type="text" name="time" /> </form> </body> </html>
2、服务器端代码
PrintWriter out = response.getWriter(); out.write("返回客户端的信息");
相关推荐
坚持着执着 2020-07-16
坚持着执着 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
jiaguoquan00 2020-07-07
李永毅 2020-07-05