The innerHTML Property - AJAX

In this final part of a four-part series, I give you my enhancements to the AJAX approach to Active Client Pages. Before I conclude the series, I will introduce two other approaches to you. Keep reading to learn how to help your web pages load more quickly.

TABLE OF CONTENTS:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 7

October 28, 2008

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

Now that you are producing the content at the client, it might interest you to be able to change the content of HTML elements. You probably already knew that you could change the table cell content with the innerHTML property. Many browsers today allow you to change the content of almost any HTML element.

Consider the following code:

<html>

<head>

function changeContent()

{

document.getElementById('S1').innerHTML = "two";

document.getElementById('D1').innerHTML = "second";

}

</script>

</head>

<body>

<div id="D1">First</div>

<button type="button" onclick="changeContent()">Click</button>

</body>

</html>

When you click the button, the contents of the SPAN and DIV elements will be changed by the function in the script. This is just to show you that, as your web pages or forms would be produced at the client, you may have to change the contents of HTML elements. This feature is not imperative for ACP. It comes as a complement. You can try the above code.

Images

Ajax is used to obtain a string from the server or an XML document without the user being conscious of the process. So in ACP, Ajax cannot help us to obtain images in advance. However I discovered that the HTML OBJECT element could download images in advance. This is a subject for a different article; however see the introduction I give on the next page.

Next: The HTML OBJECT Element >>