News: Start your script with AJAX

Home News Photos News Videos News Cartoons News Blogs RSS

Home > AJAX Examples and Tutorials > Start your script with AJAX

Start your script with AJAX

This is a basic ajax script and you can just fetch the code and use it for free, I am not giving much description line by line, but to start ajax you can use, If you have any comments, please click on live help button and leave a message, I will be not online to chat with you, But I will reply to your question if I am free. Thank You.

Thursday, Nov 16, 2006 | 2201 Views | Comments [View/Post]

<script Language="JavaScript">
    var http_request = false;

    function ShowExistingRecords() {
    var email_address= document.getElementById('email_address').value; //(1)
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http_request.onreadystatechange = ShowExistingRecordsSub;
    http_request.open('POST', 'filename.ajax.php?email_address='+email_address, true); //(2)
    http_request.send(null);
    }
function ShowExistingRecordsSub() {
    document.getElementById('showexistingrecordtext').innerHTML = '<small><i>Loading...</i></small>'; //(3)
    if (http_request.readyState == 4) {
        var response = http_request.responseText;
        document.getElementById('showexistingrecordtext').innerHTML = response; //(4)
    }
}
</script>

(1) getting the email address from the element id "email_address"
(2) passing parameters to php file
(3) displaying loading on element id "showexistingrecordtext"
(4) displaying the out put from the filename.ajax.php after passing the variable email_address on element id "showexistingrecordtext"

filename.ajax.php can be a normal database program where if your give a slq to the database it will display the result,
What ever the out-put comming from the filename.ajax.php it will display in element id "showexistingrecordtext"

Full Page will be as follows:
<html>
<head>
<script Language="JavaScript">
    var http_request = false;

    function ShowExistingRecords() {
    var email_address= document.getElementById('email_address').value; //(1)
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http_request.onreadystatechange = ShowExistingRecordsSub;
    http_request.open('POST', 'filename.ajax.php?email_address='+email_address, true); //(2)
    http_request.send(null);
    }
function ShowExistingRecordsSub() {
    document.getElementById('showexistingrecordtext').innerHTML = '<small><i>Loading...</i></small>'; //(3)
    if (http_request.readyState == 4) {
        var response = http_request.responseText;
        document.getElementById('showexistingrecordtext').innerHTML = response; //(4)
    }
}
</script>

<title>My Profile</title>
</head>

<body>

<p>
<input type="text" name="email_address" size="20" id="email_address">
<input type="submit" value="Get Profile" name="GetProfile">
</p>
<table border="0" width="100%" id="table1" cellpadding="4" style="border-collapse: collapse">
<tr>
<td id="showexistingrecordtext">&nbsp;</td>
</tr>
</table>

</body>
</html>


Comment on this article
Guidelines: You must register with a social media account such as Facebook, Twitter, Yahoo, etc. to comment on this story. Click on the "Login" button below to choose your login account of choice. We welcome your thoughts, but this is not an open forum. For the sake of all readers, please refrain from the use of obscenities, personal attacks or racial slurs. All comments must remain on topic and cyber bullying will not be tolerated. All comments are subject to our terms of service. Comments that do not comply may be removed. Repeat offenders will lose commenting privileges.
News Other Language
World News
Movie News
Information
Travel News