JDev

Code, javascript, ajaxJuly 17, 2007 6:42 pm

Simple Ajax

Let’s say you want to bring down a list of names from the server and display them without reloading the page.

I’ll show you a simple way to do it using the Ajax technology.

1. Create a form:

<form name="frm" action="#" autocomplete=off onSubmit="getIt();return false;">
   <fieldset>     
    <label for "id">Enter name:</label>
    <input size="20" type="text" id=’id’ name="name" value='’><BR>   
    <input type="submit" name="doit" value="submit">
    </fieldset>
</form>

The submit even will call a JavaScript function getIt(). We’ll get to it later.

2. Create a div

<div id=result> </div> 

3. Get a reference to XMLHttpRequest object.

    function getHTTPObject() {
        if (typeof XMLHttpRequest != ‘undefined’)
        { return new XMLHttpRequest(); }
        try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e)
        { try { return new ActiveXObject("Microsoft.XMLHTTP"); }
        catch (e) {} }
    return false; }

    var xmlhttp = getHTTPObject();
        

 4. Create a getIt()  function:

function getIt( ) {              
        if( xmlhttp) {
            var url =’servlet/myClass’;
            var target = document.getElementById("id");            
            url += "?id=" + encodeURIComponent(target.value);
            xmlhttp.open(’GET’, url, true);
            xmlhttp.send(null);
           
            var divResult =document.getElementById(’result’);              
            xmlhttp.onreadystatechange = function (){

                if (xmlhttp.readyState == 4) {
                       if (xmlhttp.status == 200) {                           
                            divResult.innerHTML = xmlhttp.responseText;
                   }   
                } 

           }

        }                
    }    

Comments (0)
Code, javascript, ajaxJuly 11, 2007 7:53 pm

Wait Cursor for Ajax

Here’s a simple way to generate an hourglass on demand, regardless of what the mouse is over.
Create a document-element class:

html.waitCursor * { cursor: wait; }

When the <html> tag has a class of "waitCursor", the mouse would become an hourglass over the entire page and all elements, including any margin outside the BODY area. Create a pair of simple functions that can be called in global scope:

function beginWait { document.documentElement.className = ‘waitCursor’; }
function endWait { document.documentElement.className = ‘’; }

From John Black on http://swik.net/Ajax/Ajax+Mistakes 

Comments (0)