使用Jquery实现异步交互

    Jquery是一个很好用的Ajax框架，应用得很广泛。它对javascript进行了封装，使我们可以用极少的代码实现复杂的功能，真正做到了write less,do more 。

   下面做一个Jquery应用得小例子，使用Jquery实现无刷新验证用户名是否存在。这里需要用到Jquery库 jquery.js 可以从jquery官网http://www.jquery.com下载得到，下面是具体的实现：

html页面代码：

   
   
    <script type="text/javascript" src="jslib/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="jslib/verify.js"></script>

     

      使用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相册 特别好看，而且拿过来就用，不需要自己写代码。