Tải bản đầy đủ - 0 (trang)
Hack 32. Use Ajax with a Yahoo! Maps and GeoURL Mash-up

Hack 32. Use Ajax with a Yahoo! Maps and GeoURL Mash-up

Tải bản đầy đủ - 0trang

WhenyouenteraweblogaddressthatisstoredatGeoURL,the

applicationdisplaysamapwithiconsindicatingthelocationsof

nearbybloggersormappedURLs.Figure4-8showsoneof

thesemaps.



Figure4-8.Findingadjacentgeo-mapped

locations



HowItWorks

TheGeoURLservicemapsweblogaddresses,aswellasother

kindsofURLs,togeographicallatitude/longitudelocations.The

servicecanalsoplotneighboringorclusteredlocationsofURLs.



GeographicallocationscanbeplottedforanyURLswithwebpage

sourcecodethatcontainstagsindicatinglongitude/latitudecoordinates.



TheGeoURLserviceprovidesanRSSfeedinXMLformatthat

canspecifyaweblogger'sneighbors,andtheYahoo!MapsAPI

acceptslatitude/longitudevaluessothatitcandisplaymarkers

inamap.Therefore,thesetwowebservicesareallweneedfor

thisapplication.

Togeneratethemap,weneedtopassachunkofXMLdata

originatingfromGeoURLtotheYahoo!MapsAPI.Atypical

applicationforthispurposeinvolvesanHTTPrequesttoa

server-sidescript,whichinturnmakesHTTPrequeststothe

GeoURLservice,constructstherequiredXML,andthensends

theXMLinarequesttotheYahoo!Mapswebservice.



Mashed-upRequests

However,dowereallyneedtomakeatraditionalserver-side

calltoconstructtheXML,andhavetheuserexperiencea

completepagerebuild?Wecanavoidapagerefreshbyusing

Ajaxandtherequestobject!Tothisend,simplyaddaDIV

elementtothewebpage(togivetheuserfeedbackabout

sendingtherequestsandmaploading).Here'sasnapshotof

thecodeforthewebpage:

GeoURLYahoo!Mapping




"http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps"onSubmit=

"loadMapData();returnfalse;">

















WhentheuserclickstheMap!button,theapplicationcallsthe

loadMapData()function,whichsendstheuser'senteredURLtoa

servercomponent.ThecomponentfetchestheGeoURLXML

dataandreturnsittoourapplication.TheJavaScriptinour

applicationthenreceivestheXMLresponseandsubmitsitto

theYahoo!MapsURL,

http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps/.

Hereisthemash-upapplication'scode,whichthewebpage

includesinascripttag:



functiongetXmlHttpObject(){

if(window.XMLHttpRequest)

returnnewXMLHttpRequest();

elseif(window.ActiveXObject)

returnnewActiveXObject("Microsoft.XMLHTTP");

else{

alert("XMLHttpRequestnotsupported!");

returnnull;

}

}

functionhandleHttpResponse(){

if(http.readyState==4){

document.getElementById('load').

innerHTML+='[done]
Generatingmap...';

results=http.responseText;

if(!results.match('rss')){

document.getElementById('load').

innerHTML='[ERROR]ThisURLisprobably'+

'notlistedatGeoURL.';

}else{

document.forms[0].xmlsrc.value=results;

document.forms[0].submit();

}

}



}



functionloadMapData(){

resetLoadDiv();

showLoadDiv();

varurl=document.forms[0].url.value;

varpost_url='/cgi-bin/geourlmap.cgi'

post_data='url='+url;

http.open("POST",post_url);

http.setRequestHeader('Content-Type',

'application/x-www-form-urlencoded;charset=UTF-8')

http.send(post_data);

http.onreadystatechange=handleHttpResponse;

returnfalse;

}

functionresetLoadDiv(){

document.getElementById('load').

innerHTML='Loadingmapdata...';

}

functionshowLoadDiv(){

document.getElementById('load').

style.display='block';

}

varhttp=getXmlHttpObject();





Anyonewhowantstheirsiteincludedinamash-uplikethiscan

addtheirURLtotheGeoURLservice.Simplygoto

http://geourl.org/add.htmlandfollowtheinstructions!

PremshreePillai



Hack33.DebugAjax-GeneratedTagsinFirefox



LookatthenewtagsinatreestructureusingFirefox's

DOMInspector.

View PageSourcehasalwaysbeenapopular(ifprimitive)

programmertoolforinspectingawebpage'scode,butthe

HTMLgeneratedbythismenucommandwillnotshowthe

newlygeneratedwidgetsthatyourAjaxapplicationsmight

produce.ItshowsonlytheoriginalHTMLsourcecode.Firefox,

however,includesaDOMInspectortoolthatshowsthesenewly

generatedtagsinadetailedhierarchicaltree-typewidget.Let's

lookatthewebpage

http://www.parkerriver.com/ajaxhacks/ajax_hack2_5.html.

Thepage,from"SubmitCheckboxValuestotheServerWithout

aRoundTrip"[Hack#17],showstwosetsofcheckboxes

representingteamsportsandindividualsports.Theapplication

asksuserstoparticipateinapoll,choosingtheirfavoritesports

bycheckingtheappropriatecheckboxes.Itthengetsthelatest

resultsofthepollfromaserverprogramanddisplaysthemon

thepage.ThecheckboxesexistintheHTMLsourcecode;

however,thetextthateventuallydisplaysthepollresultsis

dynamicallygeneratedonthepage,withoutanyvisual

submissionorpagerefresh.Toviewtherelevantcodeusing

Firefox,choosethemenucommandTools DOMInspector.

Figure4-9showstheInspectorwindowthatpopsup.



Figure4-9.DOMInspectorviewinFirefox



Theleftsideofthewindowshowstheentirehierarchical

structureofthepage'sDocumentObjectModel,withallthe

parentandchildtagsavailableforinspectionsimplyclickthe

littletrianglewidgetnexttoatag'sname,thenselectan

elementorNode.ThesearetheDOMnodesfortheentireweb

page.

ViewingtheHTMLpageasatreestructurebeginningfromthe

top-levelorrootelement,html,thenodesarethetreebranches.

Nodescontainparentnodesandchildnodes,suchasthebody

elementcontainingpordivelements.IntheDOM,Nodeobjects

representthewebpagenodes.

ClickonanindividualNode,suchastheDIVtaginFigure4-7,and

therightsideoftheDOMInspectorshowsalltheNodeobject's

propertiesandmethods.



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Hack 32. Use Ajax with a Yahoo! Maps and GeoURL Mash-up

Tải bản đầy đủ ngay(0 tr)

×