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{
     500px;
     height: 150px;
     background: #fff000;
     color: red;
}
#ping2{
     500px;
     height: 150px;
     background: lightgreen;
     color: red;
}
#ping3{
     500px;
     height: 150px;
     background: red;
     color: red;
}

</style>
</head>

<body>
    <div id="ping1">
         <p>隐藏或显示</p>
    </div>
    <input type="button" value="隐藏" onclick="hide()"/> <input type="button" value="显示" onclick="show()" />
    <br/>
     <div id="ping2">
        <p>淡入或淡出</p>
    </div>
    <input type="button" value="淡出" onclick="fadeOut()"/> <input type="button" value="淡入" onclick="fadeIn()" />
    <br/>
     <div id="ping3">
        <p>收起或挂出</p>
    </div>
    <input type="button" value="收起" onclick="slideUp()"/> <input type="button" value="挂出" onclick="slideDown()" />
    <br/>
</body>
实例（2）：----用户验证
1、编写Servlet：（Java文件）
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 id="ajaxImgDiv"><img src="imgs/loading.gif" /></div>
</body>