ajax小途

2012-09-23

ajax小谈最近在做项目时经常用到ajax，当然有个很好的jquery在那时就省去了自己写那一堆XMLHttpRequest对象

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。

直接运行就得到了：

ajax小途

这里一直在转是因为我把那个success中的代码注释掉了。如果把注释去掉我们刷新一下再看看效果就有：

ajax小途

这里也就是曾经许多童鞋在论坛上问过的需要在后台进行长时间处理东西，希望在前台显示一个东西表示正在处理，这样就可以处理了。只需要在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已经帮我们做了，我们看不到而已。

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

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

?那么我们把:

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

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

ajax小途

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

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

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

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

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

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

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

1 楼 MrPengPeng 2011-07-08 很好写的详细。。。。。呵呵我这个菜鸟都学会了！哈哈哈

热点排行

Ajax

ajax小途