重构后的Ajax

最新推荐文章于 2019-12-15 10:28:35 发布

叶一口

最新推荐文章于 2019-12-15 10:28:35 发布

阅读量384

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/yyw1417/article/details/73436527

版权

javaweb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先说一个时钟的例子。

我们已经有了一个重构的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,这个文件为重构后的，通用的

------------------------------------------------------------------------------------------------------------------

然后在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

叶一口

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重构后的Ajax

首先说一下运行流程：因为ajax的一个优势在于它可以自己刷新加载目页面，在客户端而不需要通过服务器跑一遍往往都是通过要么是按某个按钮要么load页面的时候就开始运行，无论哪种方式进入的，都先调用一个主页面中js的一个函数，这个函数中调用一个单独写开的文件，这个文件中是实例化Ajax对象的方法，这个文件时重构ajax中不用改，都要用的文件。在其中这个调用中有一个参数是调用回调函数。
复制链接

扫一扫

专栏目录