Ajax+JSP实例
在本节中,将以案例的方式介绍,在客户端利用JavaScript代码和XMLHttpRequest对象编写Ajax代码,服务器使用JSP技术实现客户端与服务器端的通信。
首先创建服务器端代码,打开记事本,输入下列代码:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%@ page import="java.util.Date" %>
<%@ page import="SimpleDateFormat" %>
<%
Date date = new Date();
String dateFormatStr = "北京时间:\n\tH:mm:ss\n\tE\n\tyyyy-M-dd";
ajax实例 文件浏览SimpleDateFormat simpleFormat = new SimpleDateFormat(dateFormatStr);
out.println(simpleFormat.format(date));
%>
将上述代码保存,名称为Da.jsp。在文件中,主要返回当前日期的中文格式的时间。将该文件直接保存Tomcat安装目录下,即C:\Tomcat 6.0\webapps\JSPExample下。
现在创建客户端代码,打开记事本,输入下列代码:
<html>
<head>
<title>异步请求实例</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
}
else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//创建XMLHttpRequet对象
}
}
function startRequest() {
createXMLHttpRequest();
adystatechange=handleStateChange;
xmlHttp.open("GET", "Da.jsp", true);
xmlHttp.send(null);
}
function handleStateChange() {
adyState==4) {
if(xmlHttp.status==200) {
ElementById("res").innerHTML = sponseText;
}}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="获取当前时间" onclick="startRequest(); "/>
</form>
<div id="res"></div>
</body>
</html>
将上述代码保存,名称为Date.html。将该文件同上面文件保存在同一个文件内即可。启动Tomcat服务器,打开IE浏览器,在地址栏中输入localhost:8080/JSPExample/Date.html,单击【转到】。在显示窗口上单击【获取当
前时间】,会显示如图1-55所示窗口:
图1-55 显示窗口
在该文件中,函数createXMLHttpRequest()主要用来创建XMLHttpRequest对象,startRequest()函数主要作用是向服务器端发送请求信息,其方式为get,发送信息为空,参数值通过URL传递到服务端。函数handleStateChange()主要用来处理从服务器端传递的信息,并做出设置。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论