Jump to content
  • Advertisement
Sign in to follow this  
_nomad_

[web] Is this AJAX?

This topic is 4433 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

http://www.yahoo.com/?r204=1151209656 When you click on the yellow "All Yahoo! Services" button (left side), a popup box slides out. I right click it to check if it's flash, it's not. Is this AJAX? Can anyone point to me some tutorial to get started on doing that? Thanks.

Share this post


Link to post
Share on other sites
Advertisement
I can't seem to find what you're describing, although if it's just a popup message it's likely that it's just pure javascript. Google "dhtml tutorial" for more information (or look around webmonkey.com - great site).

Share this post


Link to post
Share on other sites
AJAX is not synonymous with "stuff that moves," even if 95% of Digg users think that. AJAX is literally creating an instance of XMLHttpRequest (or even an iFrame) and loading a remote page ("behind the scenes") that returns XML. Alternatively, I think most people can live with calling something AJAX even if it returns "JSON" or HTML.

The process of moving HTML around the screen is completely independent of AJAX. You can do AJAX without making any visual changes. Or you can do visual changes without calling any AJAX routines.

That Yahoo! page that you are talking about does use AJAX to dynamically load the content. It returns this data:


{'data':{'html':'<span class="shadow1"><span class="shadow2"> <div id="trough-overlay-content"> <h2>Yahoo! Services</h2> <a href="r/72" id="trough-close" onclick="YAHOO.Fp.trough.toggleTrough(0, {sAction : \'close\'});return false;">Close</a> <div id="trough-overlay-bd" class="bd"> <div id="properties"> <ol id="drawer-1" start="1" class="col1"><li><a href="r/3t">360°</a></li><li><a href="r/50">Addresses</a></li><li><a href="r/6n">Answers</a></li><li><a href="r/51">Auctions</a></li><li><a href="r/cr">Autos</a></li><li><a href="r/52">Briefcase</a></li><li><a href="r/53">Buzz</a></li><li><a href="r/54">Calendar</a></li><li><a href="r/55">Chat</a></li><li><a href="r/56">Classifieds</a></li><li><a href="r/57">Downloads</a></li></ol><ol id="drawer-2" start="12" class="col2"><li><a href="r/58">Education</a></li><li><a href="r/59">Entertainment</a></li><li><a href="r/5a">Family Accts</a></li><li><a href="r/5b">Fantasy FB</a></li><li><a href="r/5c">Fantasy MLB</a></li><li><a href="r/sq">Finance</a></li><li><a href="r/5d">Fntsy Sports</a></li><li><a href="r/pl">Games</a></li><li><a href="r/g3">GeoCities</a></li><li><a href="r/5e">Greetings</a></li><li><a href="r/gp">Groups</a></li></ol><ol id="drawer-3" start="23" class="col3"><li><a href="r/wm">Health</a></li><li><a href="r/h2">Horoscopes</a></li><li><a href="r/jb">HotJobs</a></li><li><a href="r/yg">Kids</a></li><li><a href="r/6l">Local</a></li><li><a href="r/5f">Lottery</a></li><li><a href="r/6i">Mail</a></li><li><a href="r/mp">Maps</a></li><li><a href="r/5g">Messenger</a></li><li><a href="r/oa">Mobile</a></li><li><a href="r/6k">Movies</a></li></ol><ol id="drawer-4" start="34" class="col4"><li><a href="r/6j">Music</a></li><li><a href="r/i2">My Yahoo!</a></li><li><a href="r/dn">News</a></li><li><a href="r/ps">People Srch</a></li><li><a href="r/pr">Personals</a></li><li><a href="r/5i">Pets</a></li><li><a href="r/fo">Photos</a></li><li><a href="r/5j">Points</a></li><li><a href="r/r1">Real Estate</a></li><li><a href="r/5k">Search</a></li><li><a href="r/sh">Shopping</a></li></ol><ol id="drawer-5" start="45" class="col5"><li><a href="r/5l">Small Biz</a></li><li><a href="r/ys">Sports</a></li><li><a href="r/tg">TV</a></li><li><a href="r/h0">Tech</a></li><li><a href="r/ta">Travel</a></li><li><a href="r/5m">Weather</a></li><li><a href="r/yp">Yellow Pages</a></li></ol> </div> <div id="properties-intl"> <ol id="drawer-i-1" start="1" class="col1"><li><a href="r/5n">Y! AU & NZ</a></li><li><a href="r/5o">Y! Argentina</a></li><li><a href="r/5p">Y! Asia</a></li><li><a href="r/6s">Y! Austria</a></li><li><a href="r/5r">Y! Brazil</a></li><li><a href="r/5s">Y! Canada-EN</a></li><li><a href="r/5t">Y! Canada-FR</a></li><li><a href="r/5u">Y! Catalan</a></li></ol><ol id="drawer-i-2" start="9" class="col2"><li><a href="r/5v">Y! China</a></li><li><a href="r/5w">Y! Denmark</a></li><li><a href="r/6t">Y! Finland</a></li><li><a href="r/5x">Y! France</a></li><li><a href="r/5y">Y! Germany</a></li><li><a href="r/6u">Y! Greece</a></li><li><a href="r/5z">Y! Hong Kong</a></li><li><a href="r/60">Y! India</a></li></ol><ol id="drawer-i-3" start="17" class="col3"><li><a href="r/61">Y! Indonesia</a></li><li><a href="r/62">Y! Italy</a></li><li><a href="r/63">Y! Japan</a></li><li><a href="r/64">Y! Korea</a></li><li><a href="r/65">Y! Malaysia</a></li><li><a href="r/66">Y! Mexico</a></li><li><a href="r/6v">Y! Netherlands</a></li><li><a href="r/67">Y! Norway</a></li></ol><ol id="drawer-i-4" start="25" class="col4"><li><a href="r/68">Y! Philippines</a></li><li><a href="r/6h">Y! Russia</a></li><li><a href="r/69">Y! Singapore</a></li><li><a href="r/6a">Y! Spain</a></li><li><a href="r/6b">Y! Sweden</a></li><li><a href="r/6w">Y! Switzerland</a></li><li><a href="r/6c">Y! Taiwan</a></li><li><a href="r/6f">Y! Telemundo</a></li></ol><ol id="drawer-i-5" start="33" class="col5"><li><a href="r/6d">Y! Thailand</a></li><li><a href="r/6e">Y! UK & IE</a></li><li><a href="r/6x">Y! Vietnam</a></li><li><a href="r/6g">Y! in Chinese</a></li></ol> </div> <div id="seriously"> <a href="r/xw">» All Yahoo! Services</a> </div> </div> </div></span></span>','retcode':'0'}}




That is known as JSON. It's just standard javascript notation for representing an object. It gets eval()'d into a variable that can then be used. At that point, AJAX ends and DHTML begins.

(Note in this case, that's a pretty poor usage of AJAX + JSON. It's pretty much just using "AJAX" returning HTML.)

Share this post


Link to post
Share on other sites
I see. thanks. could anyone here point me a good tutorial (like step by step, you know, those lesson 1, lesson 2, and so on kind of tutorial) on AJAX?

thanks.

Share this post


Link to post
Share on other sites
Quote:
Original post by _nomad_
I see. thanks. could anyone here point me a good tutorial (like step by step, you know, those lesson 1, lesson 2, and so on kind of tutorial) on AJAX?

thanks.

http://www.w3schools.com/ajax/default.asp
http://www.google.com/search?hl=en&q=AJAX+tutorial&btnG=Google+Search

for future reference and so people don't post 'STFW n00b!' use [google]

Share this post


Link to post
Share on other sites
yeah yeah i know google is everyone's friend...i was thinking there might be some good link(s) someone could show (which you did) for AJAX noobs like me.

thanks!

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!