高手莫入--最簡單的AJAX實例

時間 2021-01-30

標籤 html java jsp ide 學習 this 3d code htm blog 欄目 Ajax 简体版

原文原文鏈接

高手莫入--最簡單的AJAX實例

學習AJAX參考了網上大量的實例，學得很艱難，代碼可讀性太差。本例就是一個入門的Hello World，相似本例的程序網上也許有，可是絕非抄襲。

本例很模仿用戶註冊，輸入過程當中動態檢查錯誤實時顯示，效果圖以下：

對着上面這個圖，來寫代碼。

1、建立Java Web項目，並建立兩個頁面

a.html

<html>
<body>
<script language= "JavaScript">
         var req = null;
         function test() {
                 //初始化
                 var code = document.all.code.value;
                 var name = document.all.name.value;
                req = new ActiveXObject( "Microsoft.XMLHTTP");
                 //設置屬性，當後臺處理完成後，回來調用myDeal方法。
                req.onreadystatechange = myDeal;
                 //發出請求
                req.open( "GET", "b.jsp?code=" + code + "&name=" + name, "false");

                req.send( null);
        }
         function myDeal() {
                 if (req.readyState == 4) {
                         //接收服務端返回的數據
                         var ret = req.responseText;
                         //處理數據
                        document.all( "myDiv").innerHTML = ret;
                }
        }
</script>

用戶註冊：<br>
用戶編號：<input type= "text" name= "code" onblur= "test();">* <div id= "myDiv" name= "myDiv"></div><br>
用戶名稱：<input type= "text" name= "name"><br>
<input type= "button" value= "註冊" onclick= "test();">

</body>
</html>

建立處理表單數據的b.jsp

<%@ page contentType= "text/html;charset=UTF-8" language= "java" %>
<%
         //接收參數
        String code = request.getParameter( "code");
        String name = request.getParameter( "name");
         //控制檯輸出表單數據看看
        System.out.println( "code=" + code + ",name=" + name);
         //檢查code的合法性
         if (code == null || code.trim().length() == 0) {
                out.println( "code can't be null or empty");
        } else if (code != null && code.equals( "admin")) {
                out.println( "code can't be admin");
        } else {
                out.println( "OK");
        }
%>

2、部署運行

呵呵，很簡單吧~！