AJAX request with image loader - Sample

kos · Share | #1 (**permalink**) 10-17-2007, 07:03 AM

Level: 100, 200
Description: retrieve a document content using Ajax

Site tree:

ajaxLoader.gif
AjaxSample.htm
AjaxSample.js
ContentRequested.htm

you can see it in action here (test it): http://optimizaremaster.org/v7n_site...ajaxsample.htm

kos · #2 (**permalink**) 10-17-2007, 07:05 AM

AjaxSample.htm

Code:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>AJAX - Ajax Request Sample</title>

<styletype="text/css">

* { font-family: Verdana,Sans-Serif; font-size: 9pt; }

h3 { font-size: 10pt; font-family: Verdana; }

div#ajaxRequestContainer { width: 700px; height: 500px; overflow-x: scroll; border: solid1px#ff0000; }

</style>

<scriptsrc="AjaxSample.js"type="text/javascript"></script>

</head>

<body>

<div>

<h3>

Ajax request example using an image loader.</h3>

<br/>

<br/>

<inputid="openConnectionButton"type="button"value="Get document"onclick="javascript:ajaxRequestWithImage();"/>

</div>

<br/>

<br/>

<divid="ajaxRequestContainer">

</div>

</body>

</html>

AjaxSample.js

Code:


// Check if is MSIE

function isIE()

{

var userAgent = navigator.userAgent.toLowerCase();

if (userAgent.indexOf("msie") != -1)

{ returntrue; }

else

{ returnfalse; }

}



// Create the XMLHttpRequest object

function createXMLHttpRequest()

{

try { returnnew ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}

try { returnnew ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}

try { returnnew XMLHttpRequest(); } catch(e) {}

alert("XMLHttpRequest is not supported");

returnnull;

}



var _theImage = new Image;

_theImage.src = "ajaxLoader.gif";

// <summary>

// target - the element which will contain the requested document;

// documentUrl - the url to the requested document;

// imageSrc - the url to the animated gif.

// </summary>

function createAjaxRequest(target, documentUrl, imageSrc)

{

var myRequestGet = createXMLHttpRequest();

this.imageSrc = _theImage.src;

if (myRequestGet != null)

{

// Add the image

target.appendChild(_theImage);

// Set the request timeout

target._timer = setTimeout( 

function()

{

myRequestGet.abort();

myRequestFailed("The server timed out while making the request.");

removeLoaderImage(); 

},

10000 // The request will timeout in 10 seconds

);

myRequestGet.open("GET", documentUrl, true);

myRequestGet.onreadystatechange = function()

{

if (myRequestGet.readyState == 4)

{

clearTimeout(target._timer);

if (myRequestGet.status == 200)

{

// Remove the image.

removeLoaderImage();

// Show content.

myRequestCompleted();

}

else

{

// Remove the image.

removeLoaderImage();

// Display error message.

myRequestFailed("Message returned, but with error status. \n" + "Server error: " + myRequestGet.status); 

clearTimeout(target._timer);

}

}

}

function myRequestCompleted() { return target.innerHTML = myRequestGet.responseText; }

function myRequestFailed(errorMessage) { return alert(errorMessage); }

function removeLoaderImage() { while (target.firstChild) {target.removeChild(target.firstChild);} }

}

myRequestGet.send(null);

}



// Execute the request

function ajaxRequestWithImage()

{

var senderID = document.getElementById("openConnectionButton");

var container = document.getElementById("ajaxRequestContainer");

var DocUrl;

var imageSrc = _theImage.src;

if ( isIE() )

{ DocUrl = "http://optimizaremaster.org/v7n_site_test/AjaxRequestSample/ContentRequested.htm"; }

else

{ DocUrl = "ContentRequested.htm"; }

return createAjaxRequest(container, DocUrl, imageSrc);

}

kos · #3 (**permalink**) 10-17-2007, 07:07 AM

ContentRequested.htm

Code:

<p>

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe

eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum

rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias

consequatur aut perferendis doloribus asperiores repellat.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor

sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt

ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo

voluptas nulla pariatur?

</p>

<p>

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint

occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt

mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio

cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas

assumenda est, omnis dolor repellendus.

</p>

<p>

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe

eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum

rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias

consequatur aut perferendis doloribus asperiores repellat.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor

sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt

ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo

voluptas nulla pariatur?

</p>

<p>

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint

occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt

mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio

cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas

assumenda est, omnis dolor repellendus.

</p>

<p>

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe

eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum

rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias

consequatur aut perferendis doloribus asperiores repellat.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor

sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt

ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo

voluptas nulla pariatur?

</p>

<p>

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint

occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt

mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio

cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas

assumenda est, omnis dolor repellendus.

</p>

<p>

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe

eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum

rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias

consequatur aut perferendis doloribus asperiores repellat.</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.

</p>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque

laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione

voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor

sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt

ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam,

quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid

ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate

velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo

voluptas nulla pariatur?

</p>

<p>

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint

occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt

mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio

cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas

assumenda est, omnis dolor repellendus.

</p>

<p>

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe

eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum

rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias

consequatur aut perferendis doloribus asperiores repellat.</p>

Dan Williamson · #4 (**permalink**) 10-17-2007, 10:50 AM

The border breaks superbly and the text overflows immensely for me on Opera and you need padding.

kos · #5 (**permalink**) 10-17-2007, 01:51 PM

yes...I forgot about Opera completely...

The problem is that Opera doesn't understands the "overflow-x" attribute...

Anyway, all's fixed now

Thanks for reminding me that, Dan

Dan Williamson · #6 (**permalink**) 10-17-2007, 02:55 PM

Works very well, yet alas still no padding *cry* -emoslit-

kos · #7 (**permalink**) 10-18-2007, 08:18 AM

*pat pat*

it's ok, padding's here now!

Taltos · #8 (**permalink**) 10-20-2007, 12:00 PM

Nice example, Costin. Tried to rep you but can't until I spread it around

Looks like you covered cross-browser, multiple request, and used dom node manipulation! Sweet. I went this route learning AJAX. After the pain...er... I mean the learning experience was done, I had to start using one of the AJAX frameworks for work. Just curious...are you using any frameworks or doing it all manual? If so, what framework are you using?

I have to use xajax at work. It was already in place. Works well but I haven't tried any other yet.

kos · #9 (**permalink**) 10-21-2007, 06:20 PM

Quote:

Just curious...are you using any frameworks or doing it all manual? If so, what framework are you using?

I don't like to do it manually...but I don't use any of the libraries out there also...
If I were to choose one to work with, I think that i'll choose the Yahoo! User Interface Library (YUI).

I saw how most of the libraries are implemented, and I'm not quite happy with their way of implementation... Most of them don't use any code guidelines and they want to show off by going as abstract as they can get...or extending a method to the extreme...
I really don't like that...

One more thing I dislike, is excessive use of "prototyping"...I have nothing against when it comes to extending the functionality, but I don't appreciate it when it's used everywhere without being really necessary...

Right now I'm using my own library, and that ajax example is part of it, only that I had to rewrite it so it could be used outside my library.
I still have a lot to work on this one, but I hope I'll finish it before january or february.

Quote:

I have to use xajax at work. It was already in place. Works well but I haven't tried any other yet.

Honestly, I have never heard about this library...but that's understandable, I don't use PHP ( because I have no knowledge about PHP whatsoever).

But if you're happy with that library why should you look further than that?