AHAH by using JQuery

AHAH stands for Asynchronous HTML and HTTP, as name includes asynchronous, it means we can load html markup without User Experience (UX) interrupt over HTTP.

In common practice, if we want show, some type of summary or details on different pages, we copy past the same html markup on pages. Hence there is no reuse of html markup.

Now come to JQuery, if we required partial or whole html page, we can do by using load command i.e. load (URL, callback) of JQuery.

You can download JQuery from here.

Let’s we have an example as listing below:

STEP 1 Create website project, add JQuery JavaScript file

STEP 2 Add HTMLPage.htm and tow div container as given below:

STEP 3

a. Add default.aspx page and JQuery script reference in default page

b. Insert two div containers in default.aspx page

c. Write JavaScript in default.aspx page

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

$(document).ready(function() {

$(‘#aBoth’).click(function() {

//load whole HTMLpage.htm

$(‘#divContainer’).load(‘HTMLPage.htm’, function() { });

});

$(‘#aContainer-1’).click(function() {

//load divContainer-1′ div Container-1 from  HTMLpage.htm only

$(‘#divContainer’).load(‘HTMLPage.htm #divContainer-1’, function() { });

});

$(‘#aContainer-2’).click(function() {

//load divContainer-2′ div Container-2 from  HTMLpage.htm only

$(‘#divContainer’).load(‘HTMLPage.htm #divContainer-2’, function() { });

});

}

);

</script>

// Test: Browse default.aspx page

a. Click on “Both Containers”

b. Click on “Container-1”

c. Click on “Container-2”

If you have questions related to this blog just write your thoughts.

Thanks for reading!

Rukhsar Ahmad

Tagged: AHAH, AHAH and JQuery