Case 1: verify whether the registration name is duplicate
1. Create registration page register.html
<body> <label for="email">Your login name:</label> <input type="text" id="username" name="username" maxlength=32/> <input type="button" value="Verification" onclick="checkUsername();"/> <span id="checkusername"> </span><!--Used to display validation results--> </body>
2. Use JavaScript code to create the checkUsername() function to be called after page loading
3. Create a callback function handleStateChange() function, and then process according to the returned result of the request state. If the returned result contains a "true" string, it means that the user name is valid, otherwise, it means that it has been registered
<script type="text/javascript">
var xmlHttp;
function createXmlHttpRequest(){
//Create XMLHttpRequest object under IE
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(oc){
xmlHttp=null;
}
}
//Create XMLHTTPRequest object in non IE browser
if(!xmlHttp && typeof XMLHttpRequest!="undefined"){
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}
function checkUsername(){
var username=document.getElementById("username").value;
var url="check.jsp?username="+username;
createXmlHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var result=xmlHttp.responseText;
if(result.indexOf("true")!=-1){
document.getElementById("checkusername").innerHTML="Congratulations! User name is valid!";
}else{
document.getElementById("checkusername").innerHTML="I'm sorry! User name has been registered!";
}
}else{
alert("The page you requested does not exist!");
}
}
}
</script>4. Create the check.jsp page to verify the registered name and output true or false
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<body>
<%
String[] users={"Tom","Jarray","Mary","Jack"};
String username=request.getParameter("username");
String flag="true";
Arrays.sort(users);
int result=Arrays.binarySearch(users,username);
if(result>-1){
flag="false";
}
out.println(flag);
%>
</body>
Case 2: achieve category cascade
1. Create the index.html page and define two drop-down lists in the page
<body> //First level classification: <select id="bigclass" onchange="return submit();"> <option value="0">-Selection category-</option> <option value="www">-network maintenance-</option> <option value="os">-operating system-</option> <option value="db">-data base-</option> <option value="pg">-Program design-</option> </select> //Secondary classification: <select id="subclass"></select> </body>
2. Use JavaScript code to create the submit() function to be called after loading
3. Write the callback() function to get the information returned from the server, and then generate the OPTION element dynamically according to the information
<script type="text/javascript">
var xmlHttp;
function createXmlHttpRequest(){
//Create XMLHttpRequest object under IE
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(oc){
xmlHttp=null;
}
}
//Create XMLHTTPRequest object in non IE browser
if(!xmlHttp && typeof XMLHttpRequest!="undefined"){
xmlHttp=new XMLHttpRequest();
}
return xmlHttp;
}
function submit(){
var selected=document.getElementById("bigclass");
if(selected.options[selected.selectedIndex].value==0){
alert("Please select a category!");
return false;
}else{
createXmlHttpRequest();
xmlHttp.onreadystatechange=callback;
xmlHttp.open("POST","select.jsp");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var selectvalue=selected.options[selected.selectedIndex].value;
xmlHttp.send("bigclass="+selectvalue);
}
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var target=document.getElementById("subclass");
var subclass_string=xmlHttp.responseText;
//alert(subclass_string);
var subclass_array=subclass_string.split(",");
while(target.options.length>0){
target.options.remove(0);
}
for(var j=0;j<subclass_array.length;j++){
var oOption=document.createElement("OPTION");
oOption.text=subclass_array[j];
oOption.value=subclass_array[j];
target.add(oOption);
}
}
}
}
</script>4. Create the select.jsp page to process the request sent by the client
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String bigclass=request.getParameter("bigclass");
String subclass="";
if("www".equals(bigclass)) subclass="Network management,Hardware device,Network protocol";
if("os".equals(bigclass)) subclass="Windows,Linux,UNIX,Other";
if("db".equals(bigclass)) subclass="SQL Server,Oracle,MySql,Other";
if("pg".equals(bigclass)) subclass=".NET,Java,C++,C,software engineering,Other";
out.print(subclass);
%>