Jquery是一个很好用的Ajax框架,应用得很广泛。它对javascript进行了封装,使我们可以用极少的代码实现复杂的功能,真正做到了write less,do more 。
下面做一个Jquery应用得小例子,使用Jquery实现无刷新验证用户名是否存在。这里需要用到Jquery库 jquery.js 可以从jquery官网http://www.jquery.com下载得到,下面是具体的实现:
html页面代码:
AJax验证用户名
使用AJax技术校验用户名!请输入您的用户名:
verify.js代码如下:
function verify(){
//将两个方法简写为两句代码,如果按一般的写,应该写获得用户名,然后用$.get传个服务器,再写一个回调函数。
$.get("AJAXService?name="+encodeURI($("#username").val()),null,function(result){
//显示结果
$("#result").html(result);
})
}
后台servlet的写法:
package servlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2010-11-10
* Time: 23:09:49
* To change this template use File | Settings | File Templates.
*/
public class AJAXService extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//首先获取数据
String name=request.getParameter("name");
PrintWriter out=response.getWriter();
//response.setContentType("text/html;charset=gb2312");
//response.setCharacterEncoding("gb2312");
//进行逻辑运算
if(name!=null&&!"".equals(name)){
if("kj".equals(name)){
//最后一步是传数据到前台。这是和传统Servlet不同的一步。不是转到一个新的页面,而是传递运算结果给本页面。
//虽然写法一致,但是本质是不相同的,这是AJAX的实现。
out.println("the username["+name+"]is already used . please choose a new.");
}else{
out.println("username["+name+"]can use");
}
}else{
} out.println("用户名不能为空");
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
通过这个应用大家可以看到Jquery的强大之处,只要一两句代码就实现了与服务器的异步交互,建议大家以后还是使用Jquery来实现异步交互,又简单又好用,不要再去写麻烦的javascript代码了。 大家有兴趣的话可以去了解一下Jquery,真的很强大,不但功能丰富,而且实现简单。特别是它提供了很多功能强大的Jquery插件,很好用,效果也非常好,如Jquery插件:Jquery相册 特别好看,而且拿过来就用,不需要自己写代码。