先说一个时钟的例子。
我们已经有了一个重构的Ajax的通用文件AjaxRequest.js。
在主页面中引入此js文件然后只需要在js中重新3个函数;1、onerror(),2.回调函数(用于指定本页面中那个div中要显示哪个逻辑jsp中的内容) 3.我叫他加载函数,调用AjaxRequest.js中的主要函数。
在body onload 时就调用加载函数。、、、
主页面clock.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>show clock</title>
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
function onerror(){
alert("出错了");
}
function deal()
{
document.getElementById("clock").innerHTML="现在是:"+this.req.responseText;
}
function getSysTime()
{
var loader=new net.AjaxRequest("deal.jsp?nocache="+new Date().getTime(),deal,onerror,"GET");
}
timer=window.setInterval("getSysTime();",1000);
</script>
</head>
<body οnlοad="getSysTime()">
<div id="clock"></div>
系统时间
</body>
</html>
逻辑jsp:deal.jsp
<%@ page contentType="text/html; charset=GBK" language="java" import="java.text.*" errorPage="" %>
<%
String datestyle="yyyy-MM-dd HH:mm:ss"; //定义日期格式
SimpleDateFormat format=new SimpleDateFormat(datestyle);
java.util.Date nowtime=new java.util.Date(); //创建时间对象
String strnowtime=format.format(nowtime); //对日期进行格式化
out.println(strnowtime); //页面显示日期
%>
再一个栗子
首先说一下运行流程:
因为ajax的一个优势在于它可以自己刷新加载目页面,在客户端而不需要通过服务器跑一遍
往往都是通过要么是按某个按钮要么load页面的时候就开始运行,无论哪种方式进入的,都先调用一个主页面中js的一个函数,这个函数中调用一个单独写开的文件,这个文件中是实例化Ajax对象的方法,这个文件时重构ajax中不用改,都要用的文件。在其中这个调用中有一个参数是调用回调函数。回调函数是用来规定你哪些内容要显示在页面中的那个div中的函数。
另外一个jsp文件在这个jsp文件中写的是想要目标页面根据if的某个条件等逻辑显示的内容,或者是操作的核心语句然后显示的内容。这个文件中的out.print就是页面中目标位置所希望输出的东西。
在主页面的body中我们设置div id=??作为会调函数中的在页面的哪里显示的标示符。
在主页面中我们需要写的js除了加载ajax对象的这个主要的方法,还有onerror,和回调函数。这三个方法会不一样。
例子:
运行结果为jsp的一个页面中的一个方框中有从下到上滚动的文字。
代码:
在webcontent下建JS包,在其中建AjaxRequst.js,这个文件为重构后的,通用的
var net = new Object(); // 定义一个全局变量net
// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {
this.req = null;
this.onload = onload;
this.onerror = (onerror) ? onerror : this.defaultError;
this.loadDate(url, method, params);
}
// 编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
if (!method) {
method = "GET";
}
if (window.XMLHttpRequest) {
this.req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
this.req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (this.req) {
try {
var loader = this;
this.req.onreadystatechange = function() {
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method, url, true);// 建立对服务器的调用
if (method == "POST") {// 如果提交方式为POST
this.req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded"); // 设置请求头
}
this.req.send(params); // 发送请求
} catch (err) {
this.onerror.call(this);
}
}
}
// 重构回调函数
net.AjaxRequest.onReadyState = function() {
var req = this.req;
var ready = req.readyState;
if (ready == 4) {// 请求完成
if (req.status == 200) {// 请求成功
this.onload.call(this);
} else {
this.onerror.call(this);
}
}
}
// 重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function() {
alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}
------------------------------------------------------------------------------------------------------------------
然后在webcontent下建主页面chonggou,jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
//注意:这个文件里面没有<!DOCTYP......的句子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>重构</title>
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
function onerror(){
alert("您的操作错误!");
}
function getInfo()
{
var loader=new net.AjaxRequest("a.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET"); //a.jsp为目标url,
}
function deal_getInfo(){
document.getElementById("show").innerHTML=this.req.responseText;
}
window.οnlοad=function(){ //注意是window而不是windows,之前错误就错在这里!
getInfo();
window.setInterval("getInfo",5); 此function 函数的作用是页面一加载就执行getInfo去调用建ajax对象,且每5秒自动 刷新一遍
}
</script>
</head>
<body>
<div style="border:1px solid;height:50px;width:200px;padding:5px;">
<marquee direction="up" scrollamount="3">
<div id="show"></div>
</marquee>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------
在webcontent 下建a.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<%
out.print("<li>hello.welcome little leaf.</li>");
%>
</ul>
</body>
</html>
其他的2个例子http://www.cnblogs.com/gaopeng527/p/4459622.html