Ajax javascript examples

JavaScript

In order to use AJAX to update a segment of a web page without having to reload the entire page, a JavaScript property known as innerHTML is typically used.  For this example, this attribute must be update when execution of the ajax-sample.php script is complete.

The first step is to create a new div on the page where the results of the query will be contained.   Once that is in place, the div’s innerHTML attribute can be updated with the information returned by ajax-sample.php. Don’t forget that the result is stored in ajaxRequest.responseText.  The following example demonstrates how this is done.

Example: <html>

<body>

 

<script language=”javascript” type=”text/javascript”>

<!–

//Support Code for Browser

function ajaxFunction(){

var ajaxRequest;  // This is necessary for AJAX

 

try{

// Firefox, Opera, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e){

// Internet Explorer

try{

ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try{

ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e){

// Something is incorrect

alert(“Current browser does not work.”);

return false;

}

}

}

// Function to receive data from server

ajaxRequest.onreadystatechange = somefunction(){

if(ajaxRequest.readyState == 4){

var ajaxDisplay = document.getElementById(‘ajaxDiv’);

ajaxDisplay.innerHTML = ajaxRequest.responseText;

}

}

var age = document.getElementById(‘age’).value;

var sex = document.getElementById(‘sex’).value;

var queryString = “?age=” + age + “&sex=” + sex;

ajaxRequest.open(“GET”, “ajax-example.php” + queryString, true);

ajaxRequest.send(null);

}

 

//–>

</script>

 

<form name=’someForm’>

Max Age: <input type=’text’ id=’age’ /> <br />

<br />

Sex: <select id=’sex’>

<option value=’M’>m</option>

<option value=’F’>f</option>

</select>

<input type=’button’ onclick=’ajaxFunction()’ value=’Query MySQL’ />

</form>

<div id=’ajaxDiv’>Result displays here</div>

</body>

</html>

This example will result in the following display:

Display: Max Age:

Sex:

M

F

 

Result displays here

 

If it is necessary to update a non form element, remember to use the innerHTML attribute that is associated with all HTML elements.   Also, remember that an HTML element can be accessed by giving it an id and using the document.getElementById function in JavaScript.

This entry was posted in Ajax Tutorials and tagged , , , , , , , , , , , , . Bookmark the permalink.

8 Responses to Ajax javascript examples

  1. Jon Rucky says:

    I’ve observed that in the world these days, video games are definitely the latest rage with kids of all ages. There are times when it may be extremely hard to drag your kids away from the video games. If you want the best of both worlds, there are lots of educational gaming activities for kids. Great post.

  2. both LG and LiteOn makes a great performing dvd burner, they also feature those anti-shock mount`

  3. Your article constantly have many of really up to date info. Where do you come up with this? Just declaring you are very creative. Thanks again

  4. Generally I do not read article on blogs, however I wish to say that this write-up very forced me to check out and do so! Your writing taste has been amazed me. Thanks, very great post.

  5. there is a need for firming lotion so that we can always maintain the health of our skin ,

  6. You seem to be very professional in the way you write,

  7. There are also many conditions with symptoms similar to appendicitis. But because appendicitis can become serious in a short amount of time, call your

  8. This is a practical blog. I mean it. You can have a whole lot knowledge of this issue, so that a whole lot of appreciation. Moreover, you may find out how to get people to totally behind it, obviously with the feedback. You have a design here thats not too fancy, but an amazing statement as huge as which youre stating. Good job, definitely.

Leave a Reply

Your email address will not be published.