AJAX课程作业报告

AJAX课程作业报告
所选题目：招聘信息管理系统
功能介绍：这是一个简易的用户管理招聘信息的系统，可以实现用户注册和登录，还能查看和搜索数据库中的已存数据信息。

使用的技术：服务端用到了servlet和jsp，前端则使用HTML和CSS以及Javascript，
同时还使用MySQL数据库作为数据仓库。

另外，还引入了一个Javascript工具库。

本系统的特点是，利用Javascript跟后台结合实现了异步加载的功能，即AJAX，从而给与用户比较好的使用体验。

功能模块：
管理系统首页：该页面中列出全部招聘信息，并设置有注册，登录，搜索的导航按钮。

该页面在用户没有登录的情况下(通过session判断的)，会自动跳转到登录界面要求用户登录。

该页面截图如下：
登录界面：用户必须先登录才能查看系统里面的数据，在用户名输入用户名的时候，通
过AJAX技术，输入栏下方会实时显示一个下拉建议列表，以方便用户选择自己的用户名从而快速登录。

另外在该页面，有一个注册按钮，用于给没有注册的用户进行注册。

页面截图如下：
注册页面：该页面用于给用户进行注册，在用户输入自己希望的用户名后，系统会自动
检测该用户名是否已经被注册，是的话就即刻提示用户，让其更换一个。

在用户成功注册后，会把用户名和密码写入数据库。

同时设置一个session，表示该用户此时已经自动登录并可以浏览信息展示页面和进入搜索页面了。

页面截图如下：
已被注册的情况
未被注册的情况
注册信息确认页面：该页面是在用户成功提交注册信息后跳转到的页面，在该页面，
会提示用户输入刚才填写的用户名，在输入栏失去焦点时，系统会自动从数据库中取回改成用户填写的密码，显示给用户，如果不是，用户点击“不是哦”后，鼠标会自动跳入用户名输入栏中，并清空里面的内容。

在用户点击确认后，即可跳转到信息展示主页面。

此时用户是已经登录了的，不需要再到登录页面去执行登录了。

下面是该页面的截图：
初始界面
输入自己用户名后的提示界面
搜索页面：在信息展示主页面的右上方，有几个导航按钮，其中有一个是“搜索”按钮，
按下该按钮后，页面会跳转到搜索页面。

在搜索栏中输入你想查看的公司的招聘信息，系统就会查找数据库中的数据，显示给用户。

这里用到了自定义tag标签，并以json的方式返回数据。

程序中json数据的格式为：
{"info":{
"degree": "硕士",
"job": "手机软件开发",
"salary": "9000"
}}
该数据的生成过程是：在用户输入一个公司名后，点击后面的按钮，会触发javascript代码（由自定义标签生成的）中定义好的事件处理程序，该程序会向servlet发送一个请求，请求中包含了一个参数（公司名称），servlet收到请求后会根据该公司名称到数据库中取回其相关信息，然后打包成一个json，返回给原来的javascript处理。

在search.jsp中使用了自定义标签，引入方式为：
<%@taglib uri="/WEB-INF/taglibFile.tld"prefix="ajax"%>
使用方式为：
<ajax:employ companyNameId="companyName"jobId="job"
degreeId="degree"salaryId="salary"url="/EmployAdmin/lookup"/>该标签的作用原理是：根据标签属性来在此处输出相应的javascript代码，从而自动实时的操作特定的页面DOM元素（这里是3个表单text域），实现ajax异步获取数据并显示的功能。

效果为：不刷新界面更新界面显示的数据。

该页面截图如下：
数据库中一共两张表，分别是employ和users，分别用来存放用户数据和招聘的信息。

下面是数据库的截图：
总览
employ表
Users表
系统使用安装和使用方法：
将系统文件夹拷贝到tomcat的webapps文件夹下，启动服务器。

在数据库中手动建一个数据库和两个表单，使用提供的sql文件来导入即可。

打开浏览器，在
地址栏中输入http://localhost:8080/EmployAdmin/index.jsp，这是信息展示主页，第一次的时候会被跳转到登录页面，登录页面的地址是：http://localhost:8080/EmployAdmin/login.jsp，当然第一次登录的时候，你是没有用户名的，所以在这个页面可以进行注册（该页面也提供了注册按钮）。

登录成功后即可进入主页面查看信息了。

在主页面，你可以看到这里列出了所有的招聘信息，在右上方有3个导航按钮，分别是搜索、登录、注册，搜索按钮进带你跳转到搜索界面；登录按钮可以让你重新登录（比如说换一个用户）；注册按钮自然就是注册啦（注册一个新账户）；可以点击搜索按钮进入搜索页，输入公司名，就可以查看该公司的招聘信息了。