使用AJAX改写项目
一开始我以为只要多做项目，才能够进行更好的技能提升，但是在MLDN的学习中，我发现了，多做项目不如把一个项目做精，而且要非常牢固的掌握一个项目中可能会产生的各个问题，以及这些问题是如何解决的，今天班里的一个同学说，他一个朋友去报了什么尚学堂，那里面要做好多项目，所以晚上就搜索了一下，才发现那里还真的够假的，一共做那么多项目，怎么可能做完，估计也就是一些特别小的项目，哎，真不知道这年头的人是怎么了，这么点小问题都看不出来，AJAX改写的项目很有意思，希望大家喜欢。
No.
内容
01
今天所讲的知识点（如果表格不够，可在备注中继续填写）
主要的知识点
A
AJAX概述
B
AJAX的使用
C
AJAX的具体使用案例
D
E
02
我对知识点的分析（如果表格不够，可在备注中继续填写）
每个知识点的分析
A
AJAX概述
AJAX à Asychronized Javascript And Xml （异步处理的Javascript And Xml）
之前的MVC执行过程
使用AJAX后执行过程：在进行Servlet中的操作时，JSP同时也可以继续进行操作，当Servlet执行完后，将结果放回JSP页面
B
AJAX的使用
一、AJAX的使用说明
1、AJAX是通过一个JavaScript对象来完成异步操作，再通过JavaScript控制<span>或<div>等页面元素来完成信息显示。
2、AJAX中的核心对象为XmlHttpRequest，该对象不同的浏览器创建方式也不同。
3、可以使用AJAX完成的功能：
（1）验证用户名（注册用户时）
（2）联动菜单（省市连动）
（3）分页
（4）树型列表
（5）搜索引擎中的相关关键字查询
二、AJAX的使用步骤
1、建立数据库
2、编写DAO
3、建立页面
<center>
<form action="" method="post" onSubmit="return check();">
用户ID：<input type="text" name="userid" onblur="checkUserid(this.value);" >
<span id="userMessage"></span> <br>
真实姓名：<input type="text" name="username" > <br>
密码：<input type="password" name="password" > <br>
<input type="submit" value="注册" >
</form>
</center>
4、编写javaScript方法，该方法为使用AJAX的主要方法
例如：
var xmlHttp; //定义为全局变量
var userFlag;//保存用户名是否重复的结果，以备表单提交时检查
function createXmlHttp(){
// 判断浏览器，不同的浏览器生成AJAX核心对象的方法不同
// 市面上浏览器的种类很多，但其内核基本就分为两类，IE和FireFox，腾讯、遨游其内核都是IE，世界之窗等其他比较杂的大多属于FireFox
if(window.XmlHttpRequest){
// 表示使用的是FireFox等浏览器
xmlHttp=new XmlHttpRequest();
}else{
// 表示使用的是IE等浏览器
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
在页面元素的相应事件中调用该处方法
function checkUserid(userid){
// 使用AJAX都有四个步骤（2，3的顺序可变，其他不可变）
// 1、生成AJAX的XmlHttpRequest核心对象
// 此处调用createXmlHttp()方法即可
createXmlHttp();
// 2、设置进行验证用户名的Servlet路径
xmlHttp.open("POST","UserServlet?operateType=check&userid="+userid);
// post大小写均可
//3、设置回调方法（即当从Servlet中回来，调用的JS方法，用来接收检验结果）,此处是设置方法，不能方法名后面加()，否则成调用了
xmlHttp.onreadystatechange=checkUseridCallback;
//4、提交，将信息发送到Servlet中进行验证
xmlHttp.send(null);
}
执行完Servlet后，该方法被调用，和当前jsp进行衔接
function checkUseridCallback(){
// 判断当前Servlet的进行状态
// 一共有四个状态，不同的浏览器支持的状态不同，一般3、4状态基本都支持
if(xmlHttp.readyState==4){
var flag=xmlHttp.responseText; // 接收传回的信息,为文本格式
if(flag=="true"){
document.getElementById("useridcheck").innerHTML="<font color='red'>该用户名已存在</font>";
userFlag=false;// 用户名重复，表单不可提交
}else{
document.getElementById("useridcheck").innerHTML="<font color='blue'>该用户名可以使用</font>";
userFlag=true;// 用户名可用，表单可提交
}
}
}
5、编写相应的Servlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
// 接收参数
String operateType = request.getParameter("operateType");
if ("check".equals(operateType)) {
response.setContentType("text/html");
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
String userid = request.getParameter("userid");
// 验证
boolean flag = false;
try {
flag = DAOFactory.getUserDAOInstance().checkUserId(userid);
} catch (Exception e) {
e.printStackTrace();
}
// 通过out对象输出的方式返回页面,不要用println,因为会把换行符也传回去，到时候不好判断
out.print(flag);
// 关闭
out.close();
// 一定不能跳转
}
}
C
（1）验证用户名（注册用户时）参见项目
（2）联动菜单（省市连动）参见项目
（3）分页
（4）搜索引擎中的相关关键字查询
D
个人总结
当在PC-Serving项目中使用AJAX时，例如在任务管理的添加任务页使用
当某个企业被选择时，客户名称文本框、联系方式文本框、区域下拉列表、客户地址文本框，以及预估时间标签和预估费用标签的值随着该企业的信息相应改变
发现从Servlet中返回时，因为其返回的数据需要分散到页面的各个地方，不是一个span或div中，所以无法解决
No.
内容
01
今天所讲的知识点（如果表格不够，可在备注中继续填写）
主要的知识点
A
AJAX概述
B
AJAX的使用
C
AJAX的具体使用案例
D
E
02
我对知识点的分析（如果表格不够，可在备注中继续填写）
每个知识点的分析
A
AJAX概述
AJAX à Asychronized Javascript And Xml （异步处理的Javascript And Xml）
之前的MVC执行过程
使用AJAX后执行过程：在进行Servlet中的操作时，JSP同时也可以继续进行操作，当Servlet执行完后，将结果放回JSP页面
B
AJAX的使用
一、AJAX的使用说明
1、AJAX是通过一个JavaScript对象来完成异步操作，再通过JavaScript控制<span>或<div>等页面元素来完成信息显示。
2、AJAX中的核心对象为XmlHttpRequest，该对象不同的浏览器创建方式也不同。
3、可以使用AJAX完成的功能：
（1）验证用户名（注册用户时）
（2）联动菜单（省市连动）
（3）分页
（4）树型列表
（5）搜索引擎中的相关关键字查询
二、AJAX的使用步骤
1、建立数据库
2、编写DAO
3、建立页面
<center>
<form action="" method="post" onSubmit="return check();">
用户ID：<input type="text" name="userid" onblur="checkUserid(this.value);" >
<span id="userMessage"></span> <br>
真实姓名：<input type="text" name="username" > <br>
密码：<input type="password" name="password" > <br>
<input type="submit" value="注册" >
</form>
</center>
4、编写javaScript方法，该方法为使用AJAX的主要方法
例如：
var xmlHttp; //定义为全局变量
var userFlag;//保存用户名是否重复的结果，以备表单提交时检查
function createXmlHttp(){
// 判断浏览器，不同的浏览器生成AJAX核心对象的方法不同
// 市面上浏览器的种类很多，但其内核基本就分为两类，IE和FireFox，腾讯、遨游其内核都是IE，世界之窗等其他比较杂的大多属于FireFox
if(window.XmlHttpRequest){
// 表示使用的是FireFox等浏览器
xmlHttp=new XmlHttpRequest();
}else{
// 表示使用的是IE等浏览器
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
在页面元素的相应事件中调用该处方法
function checkUserid(userid){
// 使用AJAX都有四个步骤（2，3的顺序可变，其他不可变）
// 1、生成AJAX的XmlHttpRequest核心对象
// 此处调用createXmlHttp()方法即可
createXmlHttp();
// 2、设置进行验证用户名的Servlet路径
xmlHttp.open("POST","UserServlet?operateType=check&userid="+userid);
// post大小写均可
//3、设置回调方法（即当从Servlet中回来，调用的JS方法，用来接收检验结果）,此处是设置方法，不能方法名后面加()，否则成调用了
xmlHttp.onreadystatechange=checkUseridCallback;
//4、提交，将信息发送到Servlet中进行验证
xmlHttp.send(null);
}
执行完Servlet后，该方法被调用，和当前jsp进行衔接
function checkUseridCallback(){
// 判断当前Servlet的进行状态
// 一共有四个状态，不同的浏览器支持的状态不同，一般3、4状态基本都支持
if(xmlHttp.readyState==4){
var flag=xmlHttp.responseText; // 接收传回的信息,为文本格式
if(flag=="true"){
document.getElementById("useridcheck").innerHTML="<font color='red'>该用户名已存在</font>";
userFlag=false;// 用户名重复，表单不可提交
}else{
document.getElementById("useridcheck").innerHTML="<font color='blue'>该用户名可以使用</font>";
userFlag=true;// 用户名可用，表单可提交
}
}
}
5、编写相应的Servlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
// 接收参数
String operateType = request.getParameter("operateType");
if ("check".equals(operateType)) {
response.setContentType("text/html");
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
String userid = request.getParameter("userid");
// 验证
boolean flag = false;
try {
flag = DAOFactory.getUserDAOInstance().checkUserId(userid);
} catch (Exception e) {
e.printStackTrace();
}
// 通过out对象输出的方式返回页面,不要用println,因为会把换行符也传回去，到时候不好判断
out.print(flag);
// 关闭
out.close();
// 一定不能跳转
}
}
C
（1）验证用户名（注册用户时）参见项目
（2）联动菜单（省市连动）参见项目
（3）分页
（4）搜索引擎中的相关关键字查询
D
个人总结
当在PC-Serving项目中使用AJAX时，例如在任务管理的添加任务页使用
当某个企业被选择时，客户名称文本框、联系方式文本框、区域下拉列表、客户地址文本框，以及预估时间标签和预估费用标签的值随着该企业的信息相应改变
发现从Servlet中返回时，因为其返回的数据需要分散到页面的各个地方，不是一个span或div中，所以无法解决