Step Create XMLHttpRequest object

var url = "myServer.jsp"; xmlhttp.open("POST", url, true); var params = "name1=value1&name2=value2"; //Send the proper header information along with the request xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); // send out the request xmlhttp.send(params);

xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementById("myHook").innerHTML=xmlhttp.responseText; document.myForm.myName.value=xmlhttp.responseText; }else{ // do some funcy thing } }

<html> <body> <form> Name: <input type="text" id="myID" onkeyup="fireAJAX()" /> Suggestions: <span id="myHook">This part will be soon replaced by response from server.</span> </form> </body> </html>

<html>
<head>
<title>An example to show how AJAX works</title>
</head>

<body>

<script language="javascript">

var xmlhttp

function fireAJAX(str)
{
    // avoiding bothering the server too much
    if (str.length==0)
    {
        document.getElementById("myHook").innerHTML="";
        return;
    }
    
    // get an XMLHttpRequest object
    xmlhttp = getXmlHttpObject();
    
    if(xmlhttp==null)
    {
        alert ("Your browser does not support XMLHttpRequest!");
        return;
    }

    // register the lister before sending out the request
    xmlhttp.onreadystatechange = listenerForStateChange;

    // URL to the target server for response
    var url = "suggest.jsp?s=" + str;
    url = url + "?sid=" + Math.random();   // to avoid cached results

    // send out the request
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);    
}

function listenerForStateChange()
{
    if(xmlhttp.readyState==4)
    {
       document.getElementById("myHook").innerHTML = xmlhttp.responseText;
    }else{
       // do some funcy thing 
    }
}

function getXmlHttpObject()
{
    if (window.XMLHttpRequest)
    {
        // for IE7+, Firefox, Chrome, Opera, Safari
        return new XMLHttpRequest();
    }
    if (window.ActiveXObject)
    {
        // for IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
</script>

<form> 

Name: <input type="text" onkeyup="fireAJAX(this.value);" /> �
Suggestions: <span id="myHook">This part will be soon replaced 
by response from server.</span>

</form>

</body>
</html>

<%! // preload a list of faked names int size; String[] names; // ...perform one time initialization. // ...this method is called only once per JSP, not per request public void jspInit() { size = 100; names = new String[size]; for(int k=0; k<size; k++){ int len = (int)(Math.random()*10); if(len<5) len = 5; StringBuffer sb = new StringBuffer(); for(int j=0; j<len; j++){ int pos = ((int)(Math.random()*1000))%26; if(j==0) sb.append((char)(pos+65)); else sb.append((char)(pos+97)); } names[k] = sb.toString(); } } %> <% // get the parameter from the query string String s = request.getParameter("s"); if(s==null) s = ""; else s = s.toLowerCase(); // go through the name list to find all the matches String hint = null; if(s.length()>0){ int count = 0; for(int k=0; k<size; k++){ String name = names[k].toLowerCase(); if(name.startsWith(s)){ count++; if(count==1) hint = names[k]; else hint += ", " + names[k]; } } } if(hint==null){ out.print("no suggestion"); }else{ out.print(hint); } %>


Forum Home » JavaScript » AJAX + JSP Tutorial