使用jQuery写了一个简单的窗口和异步刷新-优快云博客

本文介绍使用JQuery简化Ajax应用的方法，通过一个用户注册验证的例子展示了如何利用JQuery进行异步数据提交，避免页面刷新，提升用户体验。文章对比了传统JavaScript实现方式与JQuery实现方式的复杂度。

使用Jquery做Ajax应用，简化了繁琐的JavaScript传统的代码书写，也便于了理解。

一下使用Jquery写的一个简单的例子：

用是：一个简单的用户注册验证的信息，AJax应用简化了传统模式的使用FROM形式提交数据，而是通过JavaScript的一个事件出发某个域中的内容提交到服务端，通过异步的形式提交，别且不影响当前也的刷新，给用户增强了友好的体验。

客户端：

<body>
        <input type="text" id="username" name="username" onblur="verify()" />
        <input name="check" type="button" value="检查" onclick="verify()" />
<div id="result" style="color:#ff0000;">
    

</div>

</body>

又两个域一个是被提交的内容域，另一个是检验的，当然了，注意：onblur="verify()" 和onclick="verify()",事件。

处理数据的JS代码用jQuery写的如下：

/**
 * 定义校验
 **/
function verify() {
    /**
     * 1、获取input 中的内容。
     */
    //jQuery每个函数返回的是jQuery自己的一个对象，我们可以其上去操作一些其他的jQuery方法
//    document.getElementById("username");   DOM
    /**
     *2、 送数据给Servlet
     * 调用XMLHTTPRequest对象
     *     jQuery.get(url,[data],[callback],[type])
     */
    $j.get("ajaxServlet?username="+$j("#username").val(),null,function(data){
         //alert(data);
        $j("#result").html(data);
    });
    /**
     * 3、servlet 返回数据并接受
     */
    /**
     * 4、显示数据到页面上来
     */
    //alert(username);
}

再看看繁琐的传统的JavaScript写的代码：

function verify() {
       var username = document.getElementById("username").value;
       var xhr;
    if(window.XMLHttpRequest()) {
         xhr  = new XMLHttpRequest();
        if(xhr.overrideMimeType) {
           xhr.overrideMimeType("text/xml"); 
        }

    }else if(window.ActiveXObject) {
        var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i = 0;i<activeName.length;i++) {
            try {
                xhr = new ActiveXObject(activeName[i]);
                break;
            }catch(e) {
                //alert(e);
            }
        }
       // xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
   //程序的健壮性
    if(!xhr) {
        alert("独享创建失败");
        return;
    }
    /**
     * 3servlet
     */
     xhr.onreadystatechange = function(){
         if(xhr.readyState == 4 && xhr.status==200) {
             var responseText = xhr.responseText;
             var divNode = document.getElementById("result");
             divNode.innerHTML = responseText;
         }
     }
    xhr.open("GET","ajaxServlet?username="+username,true);
    /**
     * GET方式下没有数据可以发送
     */
    xhr.send(null);
    /**
     * 4ʾݵҳ
     */
    //alert(username);
    /**
     * post 的写法
     */
   /* xhr.onreadystatechange=function() {
       if(xhr.readyState == 4 && xhr.status==200) {
             var responseText = xhr.responseText;
             var divNode = document.getElementById("result");
             divNode.innerHTML = responseText;
         }
    }
    xhr.open("POST","ajaxServlet",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("username="+username);*/
    
    
}

服务端一个很简单的Servlet

package org.bestupon.ajax.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;
import java.net.URLDecoder;

/**
 * Created by IntelliJ IDEA.
 * User: bestupon
 * Date: 2009-9-30
 * Time: 11:27:29
 * Email:bestupon@foxmail.com
 * To change this template use File | Settings | File Templates.
 */
public class AJAXServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         //处理
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out =  response.getWriter();
        String userName = request.getParameter("username");

       //2检查
        if(null == userName || userName.length() == 0) {
            out.println("the user name not null");
        }else {
            //验证
            String realityName = userName.trim();
            if(realityName.equals("bestupon") ) {
                out.println("userName["+realityName+"]already exit in system");
            }else{
                out.println("<input type='text' value='your very luckly the  ["+realityName+"] can used for sys' />");
            }
        }
    }
}

附件：能直接运行的项目代码：