Myeclipse 开发 web 总结

一、项目结构

Myeclipse 开发 web 总结

jsp 中有html 其中还能插入 java代码即<% java代码%>

java代码：

1.可以用src目录中的类创建实例调用其函数处理从 web页面中获取的信息（例如：表单）

2.可以将处理好的信息编辑到 web页面用户就可以在web页面看到反馈了

缺点：html 中插入java代码没实现前端后端分离

二、Servlet + AJAX（JQuery）能实现前后分离

后端处理写在 Servlet 类中

AJAX 写在 web中

1、web页面得到的数据给Servlet

WebRoot/index.jsp

 <body>
    <form method = "get" action = "servlet/HelloServlet">
    	学生查询<input type = "text" name = "id"/> <br><br>
    	<input type = "submit" value = "查询" />
    </form>

2、HelloServlet 类处理数据并抛出结果

src/HelloServlet.java

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String id = request.getParameter("id");
		id = new String(id.getBytes("iso-8859-1") , "UTF-8");
		String fileName = id + ".jpg";
		
		response.setContentType("image/jpeg");
				
		File imageDir = new File("c:/MCC/wallpaper");
		File imageFile = new File(imageDir,fileName);
		
		FileInputStream fis = new FileInputStream(imageFile);
		
		OutputStream streamOut = response.getOutputStream();
		byte[] buf = new byte[4096];
		while(true)
		{
			int n = fis.read(buf);
			if(n<=0) break;
			
			streamOut.write(buf,0,n);
			streamOut.flush();
		}		
		fis.close();
		streamOut.close();		
	}

3、AJAX(JQuery) 获取HelloServlet 抛出的结果并结果写到web页面上

<script >
		function onQuery()
		{
			$.ajax({
				method: "GET",
				url: "servlet/HelloServlet",
				success: function(data, textStatus,jaXHR)
				{
					$("#userCount").html(data);
				},
				error: function(jqXHR, textStatus, errorThrown)
				{
					trace("error: " + errorThrown);
				}
			});
		}
		
		$(document).ready(function(){
			var  timerId = $.timer(1000*5, onQuery, false);
		});
</script>

Myeclipse 开发 web 总结

相关推荐