使用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" οnblur="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中，所以无法解决