jquery入门（一）

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.zlpy.jquery;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author xingxing
 */
public class UserVerify extends HttpServlet {
   
    /**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("username");
            if (param == null || param.length() == 0) {
                out.println("UserName not Null!");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                if (userName.equals("mlx")) {
                    out.println("userName ["+userName+"] has exist!");
                } else {
                    out.println("["+userName+"] Congratulation on you !");
                }
            }
        } finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

/*
 *需要通过javascript代码做两件事
 *1.button被按下的时候需要将文本框中的数据获取到，
 *然后发送给服务器端，最后接收服务器端返回的数据
 *填充到我们预留的div中，这样用户就可以看到结果。
 *2.文本框上，用户按键之后，需要判断文本框中的内
 *容是否为空，如果不为空，红色边框和红色下划线就
 *应消失，否则保留。
 */

 /*等待页面装载完成*/
 $(document).ready(function(){
	//此内容为页面装载完成后要执行的代码
	//code optimization (代码优化)
	 var userNameNode=$("#username");
	//按钮事件
	$("#verify").click(function(){
		//1.获取文本框的内容
		var username=userNameNode.val();
		//2.将获取的内容发送给服务器
		if(username==""){
			alert("username not null !");
		}else{
			$.get("http://127.0.0.1:8080/Jquery1/userVerify?username="+username,null,function(response){
				//3.接收服务器返回的内容，并填充到div中
				$("#verifymsg").html(response);
			});
		}
		
	});
	//文本框事件
	userNameNode.keyup(function(){
		var username=userNameNode.val();
		if(username==""){
			userNameNode.addClass("username");
		}else{
			userNameNode.removeClass("username");
		}
	});
 });

.username{
	/*将输入边框设为red solid 1px*/
	border:red 1px solid;
	background-image:url(../images/s.gif);
	background-repeat:repeat-x;
	background-position:bottom;
}