Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Good Source

  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    Good Source

    Im trying my hardest to learn and apply ajax, the only problem is that i cant find a good source(book) or a great website tutorial. If anyone can suggest something i would really appreciate it.


    Thanks guys

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Location
    D0u$h!t3 k4?
    Posts
    512
    Thanks
    2
    Thanked 5 Times in 5 Posts
    That's probably because the concept is fairly simple. Here are the steps involved:
    1. Get an XMLHttpRequest object (IE6 and older uses ActiveX, other browsers use a native XMLHttpRequest control, except for IE7 which can use either one).
    2. The readyState property changes to 4 when it is ready, so a function/method is attached to the onreadystatechange event. When it changes to 4, make sure the status property is set to 200 (OK).
    3. After creating the function and have it do something, you then create the actual AJAX query to start the process via the open() method, where you pass GET|PUT, the filename and whether communication should be asynchronous (true) or synchronous (false). In case you don't get the sync/async thing, asynchronous means communicating while other things are being processed at the same time.
    4. Now you send the query to the server via the send() method. For GET, you normally send null and for PUT, you might send some parameters, such as "userId=40&postId=20839" or something.

    In the function attached to onreadystatechange, you would, as previously stated, check to make sure the readyState is 4 and the status is 200. If it is, then you would do something. Now usually you want to have some form of output, hence the reason AJAX would be used. You can use the responseText to get the text version of the response or you can parse the XML response yourself after using the responseXML property and DOM methods.

    Here is a quick example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>AJAX Example</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
    <div id="page_container">
    <form action="" method="GET">
    <textarea cols="80" rows="25" id="tArea">Click the button below to begin</textarea>
    <br>
    <input type="button" value="Get Response Text" onclick="ajaxExecute()">
    </form>
    </div>
    <script type="text/javascript">
    function getXMLHttpRequest ()
    {
        var ajaxRequest;
        try {
            //Opera 8+, Safari, Firefox, IE7
            ajaxRequest = new XMLHttpRequest();
        }
        catch (e) {
            try {
                //IE versions with MSXML 2.0 properly installed
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    //more for IE in case the above fails
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    // ajaxRequest is 'undefined'
                }
            }
        }
        return ajaxRequest;
    }
    
    function getResponseText (xmlHttp)
    {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                document.getElementById('tArea').value = xmlHttp.responseText;
            }
            else {
                document.getElementById('tArea').value = 'Error - Status code: ' + xmlHttp.status;
            }
        }
        else {
            document.getElementById('tArea').value = "Waiting for response...";
        }
    }
    
    function ajaxExecute ()
    {
        var xhr = getXMLHttpRequest();
        if (xhr != 'undefined' && xhr != null) {
            document.getElementById('tArea').value = 'Starting...';
            xhr.onreadystatechange = function () { getResponseText(xhr); }
            xhr.open("GET", "/", false); //get index.html or index.php or whatever from the root document directory
            xhr.send(null);
        }
    }
    </script>
    </body>
    </html>
    The above works in the latest versions of IE, Opera, Firefox and the Safari 3 Windows beta.

    Edit: If you want more information, you might take a look at the XMLHttpRequest entry on Wikipedia.
    Last edited by rpgfan3233; 11-30-2007 at 11:25 PM. Reason: Added Wikipedia link
    PHP Code:
    $hello file_get_contents('hello.txt'); echo $hello
    hello

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Thank you, that helps some and points me to the right way, thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •