ajax小途
日期：2014-05-16 浏览次数：20632 次
ajax小谈
最近在做项目时经常用到ajax，当然有个很好的jquery在那时就省去了自己写那一堆XMLHttpRequest对象的麻烦了，但用久了它，发现渐渐地忘记了普通的ajax怎么去写了。现在重新来回顾一下，也跟各位童鞋一起学习一下。
首先建了一个测试的数据库，数据库建表语句如下：
create table `user` ( `id` double , `name` varchar (60), `password` varchar (60) );
? 我们建立一个TestServlet来处理我们的ajax请求，这个需要在web.xml中进行配置，这里就不写配置文件了。
TestServlet中对post请求的处理如下：
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
Connection conn = null;
String name = req.getParameter("name");
resp.setContentType("text/html;charset=UTF-8");
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajax","root","root");
PreparedStatement pstat = conn.prepareStatement("select * from user where name=?");
pstat.setString(1,name);
ResultSet rs = pstat.executeQuery();
//记数器，判断是否存在该用户
int count = 0;
while(rs.next()){
count ++;
}
//当找不到该用户时，返回相应的错误信息
PrintWriter out = resp.getWriter();
if (count == 0){
out.println("不存在该读者");
}
out.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
? 接下来就是我们的JSP文件，名字随便啦：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-1.4.4.js" ></script>
<script type="text/javascript">
function changeName(){
var $name = $("input[name='name']").val();
$.ajax({
type:"post",
url:"<%=request.getContextPath()%>/testServlet",
data:{name:name},
beforeSend:function(){
$("#result").append("<img src='<%=request.getContextPath()%>/loading.gif'/>");
},
success:function(text){
//$("#result").html(text);
}
});
}
</script>
</head>
<body>
<form action="" method="post" >
姓名：<input type="text" name="name" onchange="changeName()"/><span id="result"></span><br/>
密码：<input type="password" name="passwd" /><br/>
<input type="submit" value="登录"/>
</form>
</body>
</html>
? 这里注意一下，我在当前JSP的目录下放了一个jquery-1.4.4.js文件，当然jquery也就是用的是1.4.4版本的，这个版本跟以前的在选择器方面有些不同，以前用的当需要选择属性时需要添加@符号，比如查找所有名字为name的input标签，在jquery 1.3中需要写为:
$("input[@name='name']")
? 而在新的版本的jquery中，@符号已经被去除，只需要这样：
$("input[name='name']")
? 即可。
?
上面的$name变量命名表明现在这个变量是jquery变量，方便查看代码。
我的代码中用到testServlet这是我的TestServlet对应的URL。
直接运行就得到了：
这里一直在转是因为我把那个success中的代码注释掉了。如果把注释去掉我们刷新一下再看看效果就有：
这里也就是曾经许多童鞋在论坛上问过的需要在后台进行长时间处理东西，希望在前台显示一个东西表示正在处理，这样就可以处理了。只需要在beforeSend中添加需要处理的，处理完之后要记得把它替换掉，不然处理完还在转啊转啊就郁闷了。
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
