Tải bản đầy đủ - 0 (trang)
Hack 33. Debug Ajax-Generated Tags in Firefox

Hack 33. Debug Ajax-Generated Tags in Firefox

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

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.



Thepop-upmenuatthetop-rightoftheInspectorwindowincludesthe

view"Object-JavascriptObject,"whichspecificallyindicatesthe

propertiesandmethodsfortheselectedNode.



Theprovidedinformationishighlyvaluableforprogrammers

whowritedynamicHTML(DHTML),whichinvolvesalteringweb

pagesonthefly.Despiteallofthis"DOMspeak,"believeme,

thisisheavenforawebdeveloperwhoisworkingonapage

withAjaxtechniques!



InspectingDynamicCreations

Whatifyourpagedoesnotdisplayasexpected,andyouwant

tolookattheunderlyingcodetoseewhat'sgoingon?View

PageSourcejustshowsthepage'soriginalHTMLorXML.

However,openupanewInspectorwindow,andyoucanlookat

thenewstructurethatyourDOMprogrammingcreated,as

showninFigure4-10.



Figure4-10.Voil\x88,JavaScript-generated

nodes



ChoosingtheFirefoxmenucommandTools

DOMInspectorwillopen

upanewInspectorwindowalongsideanyexistingones.



Figure4-10showsthatanexistingspanelementhasnew

contentintheformofBRtagsandtextnodes.Ifyouclickona

textnodeintheInspector,therightsideoftheInspector

windowshowsthevalueofthenode.Thisinformationcanbe

invaluableforDOMprogrammerswhoareencounteringalotof

textnodes,forexample,thatareemptystrings.Theseempty

nodessprinkledthroughoutapageoftenposedifficultiesfor

anycodethatiteratesthroughthedocumentnodeslookingfor

specificnodesorstructures.

TheDOMInspectorisagreattoolfordebuggingAjax



applications,nottomentionahandywaytoexaminetheDOM

structureofanywebpageandtolearnabouttheavailable

objectpropertiesandmethods.







Hack34.FetchaPostalCode



Typeinacityandchooseastatename;thishackquickly

generatestheU.S.postalcode.

Thishackaskstheuserforthenameofacityandstate,then

generatestheassociatedpostalcodeinatextfield(usingaweb

serviceaccessibleathttp://www.webservicex.net/uszip.asmx?

op=GetInfoByState).Nothingelseaboutthewebpagechanges.

Cool,anduseful,too.Howmanypeoplerememberpostalcodes

otherthantheirown?

Thehackgetsthecityandstatevalues,thenusestherequest

objecttofetchtheZIPCodefromaserver-sidecomponent,

whichinteractswiththewebservice.Theserver-side

componentpullstheZIPCodeoutofanXMLfileitgetsfrom

theserviceandsendsthecodetoourAjaxapplication.



WestartedoutusingtheU.S.PostalService'sWebToolsAPI,which

likelycontainsthemostup-to-dateZIPCodes,aswellasthefour-digit

codesthatextendsomeofthefive-digitcodes.However,theUSPSwas

veryrestrictiveintermsofallowingustowriteabouttheuseofitsweb

toolsinourhacksfairlybureaucraticandnotverycooperativesowe

werenotabletouseafullimplementationofitsZIPCodeservicefor

thishack.



Figure4-11showswhatthepagelookslikeinthebrowser.



Figure4-11.AutomaticallygetaZIPCode



Whentheuserchoosesastatefromthepop-uplist,the

applicationcodesendsthecityandstatetotheserver

component,butonlyifthecityfieldcontainscontent(theuser

couldleaveitemptybymistake).Hereiswhatthewebpage's

codelookslike:




"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtm




PostalCodeSearch





Pleaseenterthecityandstate







City:

State:

Alabama

Alaska

Arizona

Arkansas



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

Hack 33. Debug Ajax-Generated Tags in Firefox

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

×