AJAX —— 局部更新与 请求Servlet

22 篇文章 0 订阅

此篇日志主要想记录两点:AJAX 与表单提交、超链接的区别;对请求 Servlet 的理解及注意事项。


一、AJAX 请求特点

AJAX 与表单提交的区别:

先看一个实例:

用于请求的页面:ajaxRequest.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">
<%
	String xmlURL=request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX 请求</title>
<script type="text/javascript">
		function getXml(url){
			var xhr;
			if(window.XMLHttpRequest){
				xhr=new XMLHttpRequest();
			}
			else{
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.open("GET",url,true);
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					alert("接受成功");
					var msg=xhr.responseText;
					document.getElementById("showXML").innerHTML=msg;
				}
			}
			xhr.send();
		}
	</script>
</head>
<body>
	<form action="/JWStudyDom4j/resolveAJAX" method="get">
		<input type="hidden" name="send" value="表单提交servlet发送的文字"/>
		<input type="submit" value="表单请求Servlet"/>
	</form>
	<button οnclick='getXml("resolveAJAX.jsp?send=请求页面发送的文字")'>AJAX请求页面</button>
	<button οnclick='getXml("/JWStudyDom4j/resolveAJAX?send=请求servlet发送的文字")'>AJAX请求Servlet</button>
	<div>处理页面输出结果:
		<div id="showXML"></div>
	</div>
</body>
</html>

说明:该页面分别用AJAX 方式请求另外一个jsp 页面与servlet。展示如下:


用于处理请求的页面:resolverAJAX.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String receiveStr=request.getParameter("send");
	receiveStr=new String(receiveStr.getBytes("ISO-8859-1"));
	out.println("接受到的send参数值为:"+receiveStr);
%>
说明:里面没有html,仅仅是用java 处理业务,并向客户端输出内容
请求结果:



用于处理请求的Servlet :resolverAJAX

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response);
	}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	response.setContentType("text/html;charset=utf-8");
	PrintWriter out=response.getWriter();
	String s=new String(request.getParameter("send").getBytes("ISO-8859-1"));
	out.print("servlet接受到的值:"+s);
}
说明:同样是向客户端输出内容。
AJAX 请求结果:


表单提交后结果:



上面能直观感觉到之间的区别:

AJAX 与 表单提交的区别:

AJAX 无论是请求jsp 页面还是servlet,返回的结果都是在当前页面内(我们通过responseText 或responseXML 等获取),而表单提交无论是提交到servlet还是页面,返回的内容都在新的浏览器窗口中显示(或覆盖当前页面)。

AJAX 与 超链接的区别:

同与表单提交的区别,表单提交返回的结果都是整个html页面(frame框架内的也算)。



二、对请求Servlet 的理解与注意事项


关于请求Servlet :

AJAX 请求Servlet:

此时Servlet 返回的内容(包括out打印内容或重定位返回jsp页面),返回的位置都是处在当前页面中,且通过AJAX 的response 获取(具体类型有:responseText、responseXML )后使用。

表单或超链接请求Servlet :

无论返回什么,就算一个普通字符,也会覆盖当前页面(或在新的窗口中显示)。


请求Servlet 注意事项:

1、全路径:

请求Servlet ,前面需加上工程的绝对路径,如上面表单的的 action="/JWStudyDom4j/resolveAJAX",因为servlet 的class 文件并不是放在与WEB-INF 同级的位置的。而jsp 位置如果与WEB-INF同级,可直接通过带后缀的文件名访问。

2、设置响应类型

即设置ContentType ,主要是指定编码(如utf-8),因为默认的编码不是utf-8(具体是什么没细究,也许是ISO-8859-1),所以当返回的是没有指定类型的内容时(如out输出的内容、txt 文件、没指定编码的xml 文件等),内容中的中文会出现乱码。之所以通过servlet 返回页面不会出现乱码,是因为页面中通常设置了ContentType 。

示例:

去掉上面resolverAJAX 的servlet 的doPost 方法中的:response.setContentType("text/html;charset=utf-8"); 无论AJAX 还是表单请求该 Servlet ,将出现中文乱码:

AJAX 请求servlet时


表单请求servlet时



Servlet 更多用法:

除了用于处理表单、作控制器、也可用于单纯的请求资源(如文件、图片)。

实例,之前了解的JFreeChart 显示图片的jsp中部分代码:

<%	...
lineURL=request.getContextPath()+"/displayServlet?filename="+lineURL;
%>
<li>柱状图:<img alt="显示失败" src=<%=barURL %> /></li>
可见,指定src 为servlet,再在servlet 中做相关处理,该servlet 显示图片最终关键代码:

BufferedOutputStream bos = new BufferedOutputStream(//在此之前还设置了ContentType为图片类型
                    response.getOutputStream());
byte[] input = new byte[1024];
boolean eof = false;
while (!eof) {
       int length = bis.read(input);
       if (length == -1) {
            eof = true;
       }
       else {
            bos.write(input, 0, length);
       }
}
 bos.flush();
 bis.close();
 bos.close();
可见,是通过从response 对象获得一个输出流,将filename 指定的文件输出。因为是从img 的src 属性请求该servlet ,所以内容直接输出到img 标签中,而非覆盖整个页面内容,这有点像AJAX 。

也许请求网页中的图片采用的就是AJAX 技术,和请求js、css等一样。通过开发者工具可看到,请求这些资源都是单独的发起一个HTTP 请求。





  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值