一开始我以为只要多做项目,才能够进行更好的技能提升,但是在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中,所以无法解决
分享到:
相关推荐
项目使用的开发技术:hibernate+struts+ajax+jQuery+mysql 与上一个三级联动不同的是:上一个项目是使用dom技术编写的整个js代码,存在一定的不足与bug,即浏览器不兼容,只在火狐中有成效,IE、opera、google等都...
AjaxTags项目是在现有的Struts ... AjaxTags改写了Struts标签类org.apache.struts.taglib.html.FormTag和org.apache.struts.taglib.html.BaseHandlerTag,并使用Struts的plugin技术,使得Struts提供了对AJAX的支持。
有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新、不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观)。网路上虽已有许多可用的示例,如: jQuery File ...
基于浏览器和Oracle数据库实现的小型购物车,使用了Servlet和Ajax以及Juery等主流技术,功能主要有购物车中的商品的浏览,增加,删除,以及结算等功能,
工作介绍Job是一个Spring Web应用程序,它提供了一些基本功能,例如登录,注销,在附近搜索列出的作业,保存喜欢的作业以供以后重新访问。在本地启动技术细节视图是由纯... Ajax用于浏览器端API和服务器端API之间的通信
本科2020年毕业设计 题目:求职招聘小程序的设计 毕设时间:2019/12/29 -------2020/2/1 毕业时间:2020/6 技术:1、PHP 使用(因为导师是本科教PHP...本项目不难,只是基本的SSM框架与小程序的结合使用,由于本人20
ITool网站综合查询系统是我练习PHP写的小东西之一,...1.重新改写代码,更换模板引擎 2.修正失效查询项目 V1.0.1(20100311) 1.使用SpeedPHP框架,模板化加载 2.换用AJAX加载信息,提高用户体验 3.修正已知BUG
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。 前言: 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use()...
3.1 偶的ExtJS讲座之基础教程PDF版3.2 很炫的图片循环效果(jquery改写版)3.3 CSS雕虫小技:八卦五行布图法介绍4. 软件开发和项目管理 4.1 面子驱动编程 4.2 创业公司的项目管理困境 ···············...
根据我们的决定,该项目已从翻译逐步改写为 使用更多ES6功能(承诺,箭头功能等) 将标准库用于utils函数(underscorejs) 使它更受事件驱动(来自borderjs的一些想法) 支持一些额外的功能,例如会话序列化,...