使用Jquery实现异步交互

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

你可能感兴趣的:(JavaScript,jquery,servlet,jquery插件,import,ajax框架)