AJAX —— 局部更新与请求Servlet

电玩女神 2022-06-16 04:08 178阅读 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。展示如下：

![Center][]

**用于处理请求的页面：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 处理业务，并向客户端输出内容  
请求结果：

![Center 1][]

**用于处理请求的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 请求结果：

![Center 2][]

表单提交后结果：

![Center 3][]

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

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时

![Center 4][]

表单请求servlet时

![Center 5][]

**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 请求。

[Center]: /images/20220616/22ea2738b3ed471ab99d22c500e27f61.png
[Center 1]: /images/20220616/5b0a60e193994c1a899387e80719dda2.png
[Center 2]: /images/20220616/5e5611fd57c943298bca012b1b385ac9.png
[Center 3]: /images/20220616/7e5e2c7075184b25998c25fa6a7e5cd2.png
[Center 4]: /images/20220616/f167e30c727f434d85a4867a5c71799a.png
[Center 5]: /images/20220616/a64b6be82c1e45b7bc94d831a49a8ade.png