AJAX —— 局部更新与请求Servlet

来源：互联网发布：dns协议使用什么端口编辑：程序博客网时间：2024/06/16 22:49

此篇日志主要想记录两点：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 onclick='getXml("resolveAJAX.jsp?send=请求页面发送的文字")'>AJAX请求页面</button><button onclick='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 请求。

0 0

AJAX —— 局部更新与 请求Servlet

AJAX —— 局部更新与请求Servlet