java:ajax实现无跳转刷新的三种方法

最新推荐文章于 2021-08-06 16:22:28 发布

sona_shi555

最新推荐文章于 2021-08-06 16:22:28 发布

阅读量1.8k

点赞数

分类专栏： java web 开发 javascript 文章标签： ajax java javascript border servlet input

本文链接：https://blog.youkuaiyun.com/sona_shi555/article/details/7842654

版权

java web 开发同时被 2 个专栏收录

22 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

概述
实现无跳转刷新，其实就是将请求通过ajax的方式提交给servlet，而不是提交整个jsp页面，通过ajax的方式能够减少网络传输的压力，反应速度要比.jsp快。
servlet端代码实现
2.1 把.jsp页面中需要刷新的代码重写，即直接输出HMTL方式
优点：简单，直接
缺点：需要传送大量数据，网络压力较大
2.2 采用拼接字符串的形式返回，在客户端进行字符串的解析即可
优点：只传输数据部分，对网络压力最小
2.3 采用直接输出XML的方式
优点：简单直观，方便客户端解析，以及和其他系统对接，方便实现WebService

jsp端js控制反馈及html的代码实现

function dealResult()
{
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
	{
		//针对方式一：返回HTML方式
		//document.getElementById("blockInfo").innerHTML = xmlHttp.responseText;
		//init();
		
		//针对方式二：拼接字符串方式
		/*
		var infoList = xmlHttp.responseText.split(";");
		var table = document.getElementsByTagName("table")[0];
		while(table.rows.length > 2)
		{
			table.deleteRow(table.rows.length - 2);
		}
		for(var i = 0; i < infoList.length - 1; i++)
		{
			var infoNews = infoList[i].split(",");
			var otr = table.insertRow(table.rows.length - 1);
			var td1 = otr.insertCell(0);
			var td2 = otr.insertCell(1);
			var td3 = otr.insertCell(2);
			var td4 = otr.insertCell(3);
			var td5 = otr.insertCell(4);
			var td6 = otr.insertCell(5);
			td1.innerHTML = "<input type='checkbox' name='" + infoNews[0] + "\'/>";
			td2.innerHTML = "<a href='querynews.jsp?id=" + infoNews[0] + "'>" + infoNews[1] + "</a>";
			td3.innerHTML = infoNews[2];
			td4.innerHTML = infoNews[3];
			td5.innerHTML = infoNews[4];
			td6.innerHTML = "<a href='modifynews.jsp?id=" + infoNews[0] + "'><img src='images/edt.gif' align='middle' border='0'/></a> " +
							"<a href='modifynews.jsp?id=" + infoNews[0] + "'>编辑  </a>" +
							"<a href='/NewsManage/News?type=del&Id=" + infoNews[0] + "'> <img src='images/del.gif' align='middle' border='0' /></a>" +
							"<a href='/NewsManage/News?type=del&Id=" + infoNews[0] + "'>删除</a>";
		}
		var totalPageDiv = document.getElementById("totalPage");
		var pageInfo = infoList[infoList.length - 1].split(",");
		totalPageDiv.innerHTML = "共有 " + pageInfo[0] + " 条记录，当前第 " + pageInfo[1] + "/" + pageInfo[2] + " 页";
		var turnPageDiv = document.getElementById("turnPage");
		var turnStr = "<a href=\"javascript:PageShow('1')\"><img src='images/first.gif' width='37' height='15' border='0' /></a>";
		var currentPage = parseInt(pageInfo[1]);
		var pageCount = parseInt(pageInfo[2]);
		if(currentPage > 1)
		{
			turnStr += "<a href=\"javascript:PageShow('" + (currentPage - 1) + "')\"><img src='images/back.gif' width='43' height='15' border='0' /></a>";
		}
		if(currentPage < pageCount)
		{
			turnStr += "<a href=\"javascript:PageShow('" + (currentPage + 1) + "')\"><img src='images/next.gif' width='43' height='15' border='0' /></a>";
		}
		turnStr += "<a href=\"javascript:PageShow('" + pageInfo[2] + "')\"><img src='images/last.gif' width='37' height='15' border='0' /></a>";
		turnStr += "<div class='topage'>转到第 <input name='pageindex' type='text' size='4' class='pageinput' /> 页 </div>";
		turnStr += "<a href='javascript:PageShow(-1)'><img src='images/go.gif' width='37' height='15' border='0' /></a>";
		turnPageDiv.innerHTML = turnStr;
		init();
		*/
		
		//针对方式三：XML方式
		var newsList = xmlHttp.responseXML.documentElement.getElementsByTagName("news");
		var table = document.getElementsByTagName("table")[0];
		while(table.rows.length > 2)
		{
			table.deleteRow(table.rows.length - 2);
		}
		for(var i = 0; i < newsList.length; i++)
		{
		/* 	var id = newsList[i].getAttribute("id");
			var title = newsList[i].getElementsByTagName("title")[i].firstChild.nodeValue;
			var author = newsList[i].getElementsByTagName("author")[i].firstChild.nodeValue;
			var date = newsList[i].getElementsByTagName("date")[i].firstChild.nodeValue;
			var catalog = newsList[i].getElementsByTagName("catalog")[i].firstChild.nodeValue;  */
			var otr = table.insertRow(table.rows.length - 1);
			var td1 = otr.insertCell(0);
			var td2 = otr.insertCell(1);
			var td3 = otr.insertCell(2);
			var td4 = otr.insertCell(3);
			var td5 = otr.insertCell(4);
			var td6 = otr.insertCell(5);
			td1.innerHTML = "<input type='checkbox' name='" + newsList[i].getAttribute("id") + "\'/>";
			td2.innerHTML = "<a href='querynews.jsp?id=" + newsList[i].getAttribute("id") + "'>" + newsList[i].getElementsByTagName("title")[0].firstChild.nodeValue + "</a>";
			td3.innerHTML = newsList[i].getElementsByTagName("author")[0].firstChild.nodeValue;
			td4.innerHTML = newsList[i].getElementsByTagName("catalog")[0].firstChild.nodeValue;
			td5.innerHTML = newsList[i].getElementsByTagName("date")[0].firstChild.nodeValue;
			td6.innerHTML = "<a href='modifynews.jsp?id=" + newsList[i].getAttribute("id") + "'><img src='images/edt.gif' align='middle' border='0'/></a> " +
							"<a href='modifynews.jsp?id=" + newsList[i].getAttribute("id") + "'>编辑 </a>" +
							"<a href='/NewsManage/News?type=del&Id=" + newsList[i].getAttribute("id") + "'> <img src='images/del.gif' align='middle' border='0' /></a>" +
							"<a href='/NewsManage/News?type=del&Id=" + newsList[i].getAttribute("id") + "'>删除</a>"; 
			var totalPageDiv = document.getElementById("totalPage");
			var pageinfo = xmlHttp.responseXML.documentElement.getElementsByTagName("pageinfo");
			var totalCount = pageinfo[0].getElementsByTagName("totalCount")[0].firstChild.nodeValue;
			var currentPage = pageinfo[0].getElementsByTagName("currentPage")[0].firstChild.nodeValue;
			var pageCount = pageinfo[0].getElementsByTagName("pageCount")[0].firstChild.nodeValue;
			totalPageDiv.innerHTML = "共有 " + totalCount + " 条记录，当前第 " + currentPage + "/" + pageCount+ " 页";
			var turnPageDiv = document.getElementById("turnPage");
			var turnStr = "<a href=\"javascript:PageShow('1')\"><img src='images/first.gif' width='37' height='15' border='0' /></a>";
			var IntcurrentPage = parseInt(currentPage);
			var IntpageCount = parseInt(pageCount);
			if(IntcurrentPage > 1)
			{
				turnStr += "<a href=\"javascript:PageShow('" + (IntcurrentPage - 1) + "')\"><img src='images/back.gif' width='43' height='15' border='0' /></a>";
			}
			if(IntcurrentPage < IntpageCount)
			{
				turnStr += "<a href=\"javascript:PageShow('" + (IntcurrentPage + 1) + "')\"><img src='images/next.gif' width='43' height='15' border='0' /></a>";
			}
			turnStr += "<a href=\"javascript:PageShow('" + IntpageCount + "')\"><img src='images/last.gif' width='37' height='15' border='0' /></a>";
			turnStr += "<div class='topage'>转到第 <input name='pageindex' type='text' size='4' class='pageinput' /> 页 </div>";
			turnStr += "<a href='javascript:PageShow(-1)'><img src='images/go.gif' width='37' height='15' border='0' /></a>";
			turnPageDiv.innerHTML = turnStr;
			init();
		}
	}
}