ajax小谈

cxshun

浏览: 724066 次
性别:
来自: 广州

最近访客更多访客>>

lujianwen

jjxliu306

wenwu821

玉无瑕

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

j2ee相关

Java JSP Ajax jQuery

最近在做项目时经常用到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中添加需要处理的，处理完之后要记得把它替换掉，不然处理完还在转啊转啊就郁闷了。

上面我们是直接用jquery来处理的，我们直接用js呢，也很简单，只不过创建XMLHttpRequest的时候需要进行多种判断以适合万恶的IE，看一下代码：

<%@ 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">
		var request;
		function changeName(){
			var name = document.getElementsByName("name")[0].value;
			try{
				request = new XMLHttpRequest();
			}catch(trymicrosoft){
				try{
					request = new ActiveXObject("Microsoft.XMLHTTP");
				}catch(failed){
					request = false;
				}
			}
			if (request){
				request.open("post","<%=request.getContextPath()%>/testServlet?name="+name,true);
				request.onreadystatechange=getResult;
				request.send(null);
			}
		}

		function getResult(){
			if (request.readyState == 2)
				$("#result").append("<img src='<%=request.getContextPath()%>/loading.gif'/>");
			if (request.readyState == 4)
				if (request.status == 200)
					;//这里没语句的话需要加上;//$("#result").html(request.responseText);
		}
	</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>

这里我们看到，直接用js来发送ajax请求，需要多很多代码，其实这些jquery已经帮我们做了，我们看不到而已。

运行后，我们可以看到效果：

我们看到它一直在滚，并没有消失，对，这跟前面的效果一样。

那么我们把:

$("#result").html(request.responseText);

这句话的注释给去了，我们看到了效果：

这也跟我们前面的效果一样，成功返回了结果。

那么那个2代表什么呢？这个还需要看一下ajax的运行状态：

0：请求没有发出（在调用 open() 之前）。
1：请求已经建立但还没有发出（调用 send() 之前）。
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。

大家可以一个个试试，1对应的就是jquery中的beforeSend，而4就是success，其他状态用得不多，有兴趣的童鞋可以试试，看jquery中有没有相对应的属性。

很多童鞋有时候会发现ajax返回的结果是乱码，这里不要紧张，分析一下原因，应该是因为编码不一致，因为是返回给页面才出现乱码，这里我们需要用：

response.setContentType("text/html;charset=UTF-8");

不要跟着写哦，注意按自己页面的编码来写。

查看图片附件

2
顶

0
踩

分享到：

jsp相对路径和绝对路径小谈 | android学习（1）

2011-07-07 21:51
浏览 2132
评论(1)
分类:Web前端
查看更多

1 楼 MrPengPeng 2011-07-08

很好写的详细。。。。。呵呵我这个菜鸟都学会了！哈哈哈

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax小谈

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ajax小谈

评论

发表评论

相关推荐

你的单元测试有多稳定？提升自动测试质量的最佳实践

Protobuffer和json深度对比

小记S2SH开发

论JAVA框架

struts2.x样式修改

tomcat结合nginx使用小结

自定义标签之EL函数

JSP自定义标签小结

JAVA处理XML

JAVA webservice之Jersey

JAVA webservice之CXF

JAVA webservice之xfire

JDBC对clob和blob的相关操作

jsp相对路径和绝对路径小谈

oracle分页小谈

EL表达式遇到的问题

solr初体验（3）

jsp:include和@include学习

最近访客更多访客>>