[web] Is this AJAX?
Author
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.
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 <a href="http://www.webmonkey.com/">webmonkey.com</a> - great site).
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:
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.<br><br>(Note in this case, that's a pretty poor usage of AJAX + JSON. It's pretty much just using "AJAX" returning 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.<br><br>(Note in this case, that's a pretty poor usage of AJAX + JSON. It's pretty much just using "AJAX" returning HTML.)
Author
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.
thanks.
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]
Author
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!
thanks!
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
