我們先模擬一個場景——一個使用者登入進某個網站，在不重新整理整個頁面的情況下，需要知道自己的餘額，這就是最簡單的ajax。如下圖：

當點選“查詢餘額”按鈕時，程式並不重新整理整個頁面，但是卻去後臺查詢餘額，並顯示在輸入框中。

html程式碼如下：

<table align="center">
    <tr>
        <td>卡號：</td><td>11010401</td>
    </tr>
    <tr>
        <td>餘額：</td>
 
<td><input type="text" id="input" />（元）</td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" id="check" value="查詢餘額" /></td>
    </tr>
</table>

然後是js程式碼：

<script type="text/javascript">
    $(function(){
        $('#check'
 
).click(function(){
            $.ajax({
                type:'POST',
                url:'gotoAjax',//用的是servlet，比較土
                data:{
                    'id':'11010401'
                },
                dateType:'JSON',
                success:function(data,textStatus){
                    var retdata = eval
 
("("+data+")");
                    $('#input').val(retdata.money);
                },
                error:function(data,textStatus){
                    alert('error');
                }
            });
        });
    });
</script>

這裡後臺用的是最簡單的servlet，配置如下：

<servlet>
    <description></description>
    <display-name>Ajax</display-name>
    <servlet-name>Ajax</servlet-name>
    <servlet-class>Ajax</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Ajax</servlet-name>
    <url-pattern>/gotoAjax</url-pattern>
  </servlet-mapping>

接下來是後臺的程式碼：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //需要註釋掉下面一行
        //response.getWriter().append("Served at: ").append(request.getContextPath());

        String id = request.getParameter("id").toString();

        //可以根據id去資料庫取它的餘額
        //這裡省略掉查資料庫部分，寫死為88元。
        String money = "88";

        Map<String, String> m = new HashMap<String, String>();
        m.put("money", money);

        //json技術需要一些jar包，自行百度，很簡單
        JSONObject jsonObject = JSONObject.fromObject(m);
        response.getWriter().write(jsonObject.toString());
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

執行程式，點選按鈕，輸入框中會顯示餘額，如圖：

這個程式省略了查詢資料庫的步驟。
如果再高階一點，可以加上jdbc連線資料庫查詢資料的程式碼。有興趣的朋友可以一試~