New York Design & Development Forums  

Go Back   New York Design & Development Forums > Knowledge Bank > Tutorials
Connect with Facebook

Notices

Reply
 
LinkBack Thread Tools
Old 03-28-2006, 06:08 PM   #1 (permalink)
Junior Member
Casual Browser
 
seco's Avatar
 
Join Date: Dec 2004
Age: 30
Posts: 17
seco is a glorious beacon of lightseco is a glorious beacon of lightseco is a glorious beacon of light
Send a message via AIM to seco Send a message via Yahoo to seco
Default AJAX: What is AJAX & Simple Tutorial

AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it’s content and load them into your existing page without having to refresh the whole page. This means that services like email don’t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.

Code:
<script type="text/javascript">
function loadurl(dest) {
 
 try {
  
   // Moz supports XMLHttpRequest. IE uses ActiveX. 
   // browser detction is bad. object detection works for any browser
   xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
          new ActiveXObject("Microsoft.XMLHTTP");
  
 }
 catch (e) {
   // browser doesn't support ajax. handle however you want
 }
 
 // the xmlhttp object triggers an event everytime the status changes
 // triggered() function handles the events
 xmlhttp.onreadystatechange = triggered;
 
 // open takes in the HTTP method and url.
 xmlhttp.open("GET", dest);
 
 // send the request. if this is a POST request we would have
 // sent post variables: send("name=aleem&gender=male)
 // Moz is fine with just send(); but
 // IE expects a value here, hence we do send(null);
 xmlhttp.send(null);
 
}

function triggered() {
 
  // if the readyState code is 4 (Completed)
  // and http status is 200 (OK) we go ahead and get the responseText
  // other readyState codes:
  // 0=Uninitialised 1=Loading 2=Loaded 3=Interactive
  if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
  
      // xmlhttp.responseText object contains the response.
      document.getElementById("output").innerHTML =
                  xmlhttp.responseText;
   }
 
}
</script>
The above code goes between the html <head></head> tags. The corresponding html body would be:

Code:
<div id="output" onclick="loadurl('/resume/resume.txt')">click here to load my resume into this div</div>
The destination url has to be in the same domain or a security error might be thrown depending on your security settings.

Of course you are going to have to create the page to load. you can use html, php, ect pages as well with formatting rather than a txt file.

enjoy! many more to come

Last edited by danielmichel; 11-27-2006 at 07:18 PM.
seco is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 03-28-2006, 07:54 PM   #2 (permalink)
Senior Member
Fanatic
 
Cota's Avatar
 
Join Date: Mar 2006
Age: 32
Posts: 414
Cota is a glorious beacon of lightCota is a glorious beacon of light
Default Re: AJAX: Simple Tutorial

Excellent..keep'em coming.
Cota is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-01-2006, 11:53 PM   #3 (permalink)
Member
Enthusiast
 
textbooksword's Avatar
 
Join Date: Nov 2004
Posts: 97
textbooksword will become famous soon enough
Default Re: AJAX: Simple Tutorial

Yes thank you for this one.
textbooksword is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-02-2006, 09:23 AM   #4 (permalink)
Senior Member
Fanatic
 
Michael's Avatar
 
Join Date: Mar 2006
Age: 23
Posts: 253
Michael is a glorious beacon of lightMichael is a glorious beacon of light
Send a message via AIM to Michael Send a message via MSN to Michael Send a message via Yahoo to Michael Send a message via Skype™ to Michael
Default Re: AJAX: Simple Tutorial

Seco, it might be worth you writing an article on what AJAX is... not really show code but talk about the languages that comprise it, it's pitfalls and advantages and such. I was going to write it, but I'm not fond enough of AJAX to be writing tutorials, so I am offering you the chance to write it. If you don't want to, just tell me and I'll write it. Take Care, and good little tutorial.

_Michael
__________________
Actionscript Developer :P ...Dope...


To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
<--- yeah I'm a nooob, so what
Michael is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-07-2006, 08:39 PM   #5 (permalink)
Junior Member
Casual Browser
 
seco's Avatar
 
Join Date: Dec 2004
Age: 30
Posts: 17
seco is a glorious beacon of lightseco is a glorious beacon of lightseco is a glorious beacon of light
Send a message via AIM to seco Send a message via Yahoo to seco
Default Re: AJAX: Simple Tutorial

no problem, ill hook it up
__________________
Seco --- Yes, I play a Fretless Bass :)
seco is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-18-2006, 06:14 AM   #6 (permalink)
Junior Member
 
Join Date: Apr 2006
Age: 27
Posts: 2
eklektik is on a distinguished road
Default

Are then any browser issues with this script?

Like
Will internet explorer block it when activex is disabled?
Will Firfox block it when javascript is disabled?
etc...

thanks
eklektik is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-18-2006, 05:54 PM   #7 (permalink)
Junior Member
Casual Browser
 
seco's Avatar
 
Join Date: Dec 2004
Age: 30
Posts: 17
seco is a glorious beacon of lightseco is a glorious beacon of lightseco is a glorious beacon of light
Send a message via AIM to seco Send a message via Yahoo to seco
Default

sofar i havent had any issues concerning blocking, if you have javascript disabled why are you on the web in the first place, since a large percentage of sites use it vastly now. but activeX isnt a concern, i havent checked it out on IE7 though so i dont know.
__________________
Seco --- Yes, I play a Fretless Bass :)
seco is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 04-18-2006, 10:24 PM   #8 (permalink)
Junior Member
Casual Browser
 
Toucan42's Avatar
 
Join Date: Apr 2006
Age: 39
Posts: 23
Toucan42 is on a distinguished road
Default

AJAX - an acronym for Asynchronous Javascript And XML - really is a revisitation of fairly old technologies and being put to great use. What is interesting about most of the examples and discussions about AJAX that I have run across is most folks talk about what the components of AJAX can do or how they work under the hood, but few discuss the larger picture of how one goes about creating an AJAX driven web application.

What I would really like to see is how this translates to the design phase of a site. Is it enough to just go through classic interface design and then retrofit AJAX into components well suited for it? I have found that it is not always easy to transform sites into AJAX driven sites, but rather much easier when you can start from scratch.

Does anyone have ideas about how best to manage the design process of both a rebuild from scratch and an adaptation of the technology to existing structure?
Toucan42 is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 11-27-2006, 05:36 PM   #9 (permalink)
Junior Member
Newb
 
Join Date: Nov 2006
Posts: 12
MasterMind is on a distinguished road
Default Re: What is AJAX?

Correct if I'm wrong but I have seen many relatively old javascripts snippets going now under the AJAX category today.

Does this mean that AJAX is just a term to redefine something already existing to continue its development and implementation?
MasterMind is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 11-27-2006, 06:16 PM   #10 (permalink)
Moderator
Aficionado
 
Contention's Avatar
 
Join Date: Mar 2003
Age: 31
Posts: 147
Contention is on a distinguished road
Default Re: What is AJAX?

Quote:
Originally Posted by MasterMind View Post
Correct if I'm wrong but I have seen many relatively old javascripts snippets going now under the AJAX category today.

Does this mean that AJAX is just a term to redefine something already existing to continue its development and implementation?
I moved your post to this thread
__________________
Misc Tutorials:

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Tutorial on Flash Interval Managers

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Simple Ajax tutorial for beginners

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Tutorial on creating CSS tabs

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Some things you should read before posting
Contention is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 11-28-2006, 07:47 AM   #11 (permalink)
Administrator
Disciple
 
danielmichel's Avatar
 
Join Date: Feb 2003
Age: 29
Posts: 727
Images: 16
danielmichel is a glorious beacon of lightdanielmichel is a glorious beacon of lightdanielmichel is a glorious beacon of light
Send a message via AIM to danielmichel Send a message via MSN to danielmichel Send a message via Yahoo to danielmichel Send a message via Skype™ to danielmichel
Default Re: What is AJAX?

Quote:
Originally Posted by MasterMind View Post
Correct if I'm wrong but I have seen many relatively old javascripts snippets going now under the AJAX category today.

Does this mean that AJAX is just a term to redefine something already existing to continue its development and implementation?
Hope this thread helps a little.
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- A list of resources for 3D Developers

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- A list of resources for design in motion with Adobe After Effects

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Usefully resources for freelance web developers

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Tips and discussion about search engine optimization

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Tutorials submitted by ny-dev members
danielmichel is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 01-02-2007, 11:48 PM   #12 (permalink)
SHP
Sexual Harassment Panda
Aficionado
 
SHP's Avatar
 
Join Date: Dec 2004
Posts: 139
Images: 2
SHP will become famous soon enough
Default Re: AJAX: Simple Tutorial

Another one on Hotscripts
Ajax For Beginners
Congrats
__________________

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- New York Web Development member gallery

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Community members show off your work

To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
- Members compete for bragging rights or prizes
SHP is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Old 05-30-2009, 03:36 PM   #13 (permalink)
Junior Member
 
Join Date: May 2009
Posts: 1
feelay is on a distinguished road
Default Re: AJAX: Simple Tutorial

Thank you so much!

I've spent about six months searching for AJAX tutorials, and I've read more than hundreds of tutorials, but none of them was clear enough to teach me.

This one was the best out of hundreds that I've read!

You have no idea how grateful I am!

Thank you so much!
//Feelay
feelay is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Reddit! Stumble this Post!Google Bookmark this Post!Blink this Post!
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to Easily AJAX Your Website Contention Website Programming 2 02-22-2010 07:04 AM
Simple website templates... Brighteyes Website Design & Layout 1 12-28-2006 06:03 PM
What is AJAX? melissajean85 General Conversation 1 11-26-2006 07:35 PM
Simple, quick preloader. seco Tutorials 2 10-28-2006 07:28 AM


All times are GMT -4. The time now is 01:31 AM.


Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0

1 2 3 4 5 6 7 8 9 10 11 12 13