ajax模拟用户注册和搜索页面

概要

异步简介

ajax简介

应用场景1

应用场景2

常见问题及排除方法

小结

---

一、异步简介

你打电话问书店老板有没有《分布式系统》这本书，如果是同步通信机制，书店老板会说，你稍等，”我查一下"，然后开始查啊查，等查好了（可能是5秒，也可能是一天）告诉你结果（返回结果）。 而异步通信机制，书店老板直接告诉你我查一下啊，查好了打电话给你，然后直接挂电话了（不返回结果）。然后查好了，他会主动打电话给你。在这里老板通过“回电”这种方式来回调。^1

"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。^2

---

二、ajax简介

Asynchronous Javascript And XML ----异步的javascript和xml。 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，Ajax引擎再将数据给浏览器解析。

---

三、应用场景1

1.功能演示

模拟账号注册：注册页面中，如果用户名文本框失去焦点，则进行异步校验；如果用户名已经存在，则在右侧用红色字体提示用户用户名不可用，并且禁用注册按钮，否则提示可用，并解除注册按钮禁用。

2.代码

1. 页面源码(使用了一些Bootstrap样式)：

<div class="form-group">
	<label for="inputname1" class="col-sm-2 col-sm-offset-2 control-label">用户名:</label>
	<div class="col-sm-3">
		<input type="text" name="remitter" class="form-control" id="inputname1" placeholder="请填写全称">
	</div>
	<div class="col-sm-3" id = "msg" style="vertical-align: middle;">
	</div>
</div>

2. 导入jquery及bootstrap样式

<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

3. ajax异步校验

<script type="text/javascript">
	// 页面加载
	$(function(){
		// 触发文本框失去焦点事件
		$("#inputname1").blur(function(){
			// 初步判断文本框非空和去掉空格后仍然非空
			if($(this).val() != "" && $.trim($(this).val()) != "") {
				// 使用post请求方式传输数据
				var url = "${pageContext.request.contextPath}/CheckServlet";	// 访问服务器地址
				var params = "remitter=" + $(this).val();	// 检验参数
				$.post(url, params, function(d) {	//post请求方式
					if(d > 0) {	//	如果查询到1条记录,则提示用户重新选择用户名
						$("#msg").html("<font color='red'>该用户名太受欢迎,请重新输入</font>");
						$("#submit").prop("disabled", true);
					}else{	//否则提示可以使用该用户名
						$("#msg").html("用户名可以使用").css("color", "blue");
						$("#submit").prop("disabled", false);
					}
				});
			}else{	//	如果文本框没有有用的信息则将提示内容清空,并禁用注册键
				$("#msg").html("");
				$("#submit").prop("disabled", true);
			}
		});
	});
</script>

4. CheckServlet内容

try {
	// post请求解决乱码问题
	request.setCharacterEncoding("UTF-8");
	// 获取请求数据
	String remitter = request.getParameter("remitter");
	// 调用service层
	CheckService cs = new CheckService();
	// 返回查询参数
	int count = cs.find(remitter);
	// 传递到客户端
	response.getWriter().print(count);
} catch (SQLException e) {
	e.printStackTrace();
}

5. CheckService内容 略......
6. CheckDao内容

public int find(String remitter) throws SQLException {
	// 使用QueryRunner工具类
	QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());
	// 编写sql语句
	String sql = "select count(*) from searchkey where username = ?";
	// 由于ScalarHandler返回的Object只能强转成Long类型,必须再次调用intValue()方法才能返回int类型
	return ((Long)qr.query(sql, new ScalarHandler(), remitter)).intValue();
}

7. C3p0Utils自定义工具类请参考使用

public class C3p0Utils {
	private static DataSource ds = new ComboPooledDataSource("nefu");
	public static DataSource getDataSource() {
		return ds;
	}
}

配置文件c3p0-config.xml存放在src目录下

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
	<named-config name="nefu">
		<!-- 连接数据库的4项基本参数 -->
		<property name="driverClass">com.mysql.jdbc.Driver</property>
		<property name="jdbcUrl">jdbc:mysql://127.0.0.1:3306/searchkey_db
		</property>
		<property name="user">root</property>
		<property name="password">123</property>
		<!-- 如果池中数据连接不够时一次增长多少个 -->
		<property name="acquireIncrement">5</property>
		<!-- 初始化连接数 -->
		<property name="initialPoolSize">20</property>
		<!-- 最小连接受 -->
		<property name="minPoolSize">10</property>
		<!-- 最大连接数 -->
		<property name="maxPoolSize">40</property>
		<!-- -JDBC的标准参数，用以控制数据源内加载的PreparedStatements数量 -->
		<property name="maxStatements">0</property>
		<!-- 连接池内单个连接所拥有的最大缓存statements数 -->
		<property name="maxStatementsPerConnection">5</property>
	</named-config>
</c3p0-config>

---

应用场景2

1.功能演示

模拟搜索引擎：输入关键字，查询数据库，并将查询结果返回到浏览器展示。

2.代码

1. 页面源码

<div class="form-group dropdown">
	<input type="text" class="form-control dropdown-toggle" id="key" style="width: 300px"
		data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" />
	<ul id="list" class="dropdown-menu"
		style="width: 100%; display: none;" aria-labelledby="dropdownMenu"></ul>
</div>

2. ajax代码(导包内容与应用场景2一致)

<script>
	// 当单击备选条是文本框输入内容
	function selected(obj) {
		$("#key").val($(obj).text());
		$("#list").hide();
	}
	// 页面加载
	$(function(){
		// 当按键弹起事件
		$("#key").keyup(function() {
			// 先将下拉列表清空,并隐藏列表
			$("#list").html("");
			$("#list").hide();
			if($(this).val() != "" && $.trim($(this).val()) != "") {
				url = "${pageContext.request.contextPath}/SearchingServlet";
				params = "keyword=" + $(this).val();
				// post请求
				$.post(url, params, function(d) {
					if(d != null) {
						$(d).each(function(a,b) {	// 遍历d,并将结果追加到列表后面
							$("#list").append("<li onclick='selected(this)'><a>" + b + "</a></li>");
							$("#list").show();	// 展示列表内容
						})
					}
				}, "json")	// 使用json的数据形式返回数据
			}
		})
	})
</script>

3. SearchServlet内容

try {
	request.setCharacterEncoding("UTF-8");
	response.setCharacterEncoding("UTF-8");
	String keyword = request.getParameter("keyword");
	SearchingService ss = new SearchingService();
	List<Object> list = ss.find(keyword);
	// 随机选择集合中的前10个选项
	Collections.shuffle(list);
	ArrayList<Object> temp = new ArrayList<Object>();
	for (Object object : list) {
		if(temp.size() < 10) {
			temp.add(object);
		}
	}
	// 将temp集合转换成json格式
	JSONArray jsonarray = JSONArray.fromObject(temp);
	String json = jsonarray.toString();	
	// 传递给浏览器
	response.getWriter().print(json);
} catch (SQLException e) {
	e.printStackTrace();
}

4. SearchingService层 略......
5. SearchingDao层

public List<Object> find(String keyword) throws SQLException {
	QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());
	// 将关键字拆分单个字符
	char[] array = keyword.toCharArray();
	StringBuilder sql = new StringBuilder();
	// where 1 = 1 拼接字符串过程中,避免无法确定and的开始位置
	sql.append("select distinct username from searchkey where 1 = 1");
	// 建立一个list集合存储参数 注意空格
	List<String> params = new ArrayList<>();
	if(array != null) {
		for (char c : array) {
			if(c != ' ') {
				sql.append( " and username like ?");
				params.add("%" + c + "%");
			}
		}
	}
	List<Object> list = qr.query(sql.toString(), new ColumnListHandler(), params.toArray());
	return list;
}

6. C3p0Utils自定义工具类及配置文件 略.....

---

五、常见问题及排除方法

由于html没有语法检查功能（HBuilder好像有，但是加载半天你能忍），所以事件触发后没有响应的错误很难排查，根据笔者的经验给出几点建议

• 排查语法格式，例如$("inputname1")没有#号，var url=写成了val url=(我好像暴露了什么dog脸)
• 注释一部分内容，并使用alert("字符串"),来判断错误的地方，如果是页面加载也没有弹框，可能是没有导入jquery库
• 使用junit进行单元测试，主要是sql语句，再者容易出现的问题就是数据库连接失败，注意C3p0Utils的配置文件是否错误
• 页面500错误提示信息，控制台异常信息都可以帮助定位错误内容。

---

六、小结

1. 内容较杂，很多细节无法面面俱到，不清楚的请询问；
2. ajax的格式本人了解到的有三种,第二种常用

$.get(url,[params],[fn],[type]):发送了一个get请求

$.post(url,[params],[fn],[type]):发送一个post请求

$.ajax({选项});
	常见的选项:
		url:路径,
		data:发送的参数,
		type:请求的方式,
		success:成功时候的回调,
		error:错误时候的回调,
		async:是否异步 默认就是异步的方式,
		dataType:返回内容的格式 默认字符串

3. 本文涉及到json数据格式一般有{"key":value,"key1":value1}、[e1,e2]，可以使用jsonlib调用方法直接将数组、集合等转成json数据类型。
4. 使用到的jar包