web应用Ajax之jQuery

1、导入jquery-1.4.1.js文件于WebRoot路径下

2、在JSP页面引入该文件的路径

3、编写JavaScript的代码，实现css效果。

4、实例（1）：----CSS效果
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
function hide(){
   $("#ping1").hide();
}
function show(){
$("#ping1").show();
}

function fadeOut(){
   $("#ping2").fadeOut(2000);
}
function fadeIn(){
$("#ping2").fadeIn(2000);
$("div p").toggle(1000);
}
function slideDown(){
   $("#ping3").slideDown(2000);
}
function slideUp(){
$("#ping3").slideUp(2000);
$("div p").slideToggle(1000);

}

</script>

<style type="text/css">
#ping1{
     width: 500px;
     height: 150px;
     background: #fff000;
     color: red;
}
#ping2{
     width: 500px;
     height: 150px;
     background: lightgreen;
     color: red;
}
#ping3{
     width: 500px;
     height: 150px;
     background: red;
     color: red;
}

</style>
</head>

<body>
    <div > public class CheckUserName extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

    this.doPost(request, response);
}

@SuppressWarnings("static-access")
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
  String username=request.getParameter("username");
  System.out.println("获取到的用户名是："+username);
  String info="该用户名可以使用！";
  if("junlin".equals(username)){
   info="该用户名已经被使用！";
  }
  try {
   Thread.currentThread().sleep(5000);
  } catch (InterruptedException e) {
   e.printStackTrace();
  }
  response.setContentType("text");
  response.setCharacterEncoding("UTF-8");
  PrintWriter out = response.getWriter();
  out.print(info);
  out.flush();
  out.close();
}

}
（2）、编写JSP页面
<script type="text/javascript" src="jquery-1.4.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         //获取用户输入的Jquery对象
         var $username=$("#username");
         //获取验证的URL
         var url="<%=basePath%>servlet/CheckUserName";
         //绑定数据源s
        $username.bind("blur",function(){
             var v=$.trim($username.val());
             var sd="username="+v;
             //方式一：通过Ajax
            /* $.ajax({
                type:"POST",
                url:url,
                data:sd,
                dataType:"text",
                success:function(data){
                    $("#info").html(data);
               }
              });*/
             //方式二：使用post
             $.post(url,{"username":v},function(data){
                  $("#info").html(data);
               });

           });
        //开始时ajax请求图片是隐藏的
       $("#ajaxImgDiv").css("display","none");
       $("#ajaxImgDiv").ajaxStart(function(){
        $(this).css("display","block");
       });
       $("#ajaxImgDiv").ajaxComplete(function(){
        $(this).css("display","none");
       });
      });

    </script>

</head>

</form>
<div > </body>