Tải bản đầy đủ - 0 (trang)
Hack 36. Use Permanent Client-Side Storage for Ajax Applications

Hack 36. Use Permanent Client-Side Storage for Ajax Applications

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

information.TheAMASSsysteminformstheclient-side

applicationwhetherthestoragerequestwasallowedordenied.

Intests,AMASShasbeenabletostoreupto10MBofuser

datawithgoodperformance.

AMASSworksonInternetExplorer6+andGecko-based

browserssuchasFirefox.UsersmusthaveVersion6+ofthe

Flashplug-ininstalledtouseAMASS,butaccordingto

Macromedia'sstatistics

(http://www.macromedia.com/software/player_census/flashplayer/

Flash6+isalreadyinstalledon95%ofmachines.

ThelatestreleaseofAMASScanbefoundat

http://codinginparadise.org/projects/storage/latest.zip;atthe

timeofpublicationthelatestreleaseofAMASSwasVersion

0.02andwasinalphadevelopment.AMASSisunderaBSD

license.



UsingAMASS

WorkingwithAMASSissimple.TheAMASSframeworkcreates

theabstractionofapermanenthashtablethatpersistseven

aftertheuserhasleftthepageorclosedthebrowser.

ThefirststepinworkingwithAMASSistoloadtheAMASS

script:







InordertouseAMASS,youmustwaitforitsinternalmachinery

tofinishloading.Tofindoutwhenthishappens,addalistener:

storage.onLoad(initialize);



functioninitialize(){

}



OnceAMASSisloaded,youcanbegintoworkwithitbyusing

itshashtablemethods,suchasput(),get(),andhasKey():

varkeyName="message";

varkeyValue=newObject();

keyValue.message="helloworld";

keyValue.testArray=["test1","test2","test3"];

keyValue.testObject={someProperty:"someValue"};

if(storage.hasKey(keyName)==false){

storage.put(keyName,keyValue,statusHandler);

}

else{

varresults=storage.get(keyName);

}



TheAMASSframeworkmakesitpossibletoserializeentire

JavaScriptobjectsintothestoragesystem,suchasthekeyValue

objectweserializedearlier.NotethatDOMnodesandbrowser

objectssuchastheXMLHttpRequestobjectwillnotbeserialized.

Asmentionedearlier,applicationscanstoreupto100Kofdata

withoutuserpermission.Afterthis,apop-upisgeneratedby

theunderlyingFlashsystemthatpromptstheuserfor

permission.TheAMASSframeworkknowswhenthepop-up

appears,generatingadivandbringingtheFlashfiletothe

forefrontoftheapplication.Figure4-12showstheapplication

centeringthepop-uponthescreen.



Figure4-12.Askingpermissiontostorelarge



dataamounts



Userscaneitherapproveordenyastoragerequest,soyou

mustcreateyourapplicationsothatit'sreadyifitsstorage

requestisdenied.Theput()methodtakesasitsthirdargument

astatushandlerthatinformsyourcodewhetherthestorage

requestwassuccessfulornot.Inthefollowingcode,

statusHandler()isacallbackfunctionthatreceivestheoutcome

ofwhethertherequestsucceededorfailed:



functionstatusHandler(status){

if(status==Storage.SUCCESS){

varresults=storage.get(keyName);

alert("ResultsfromstatusHandler="+results);

}

elseif(status==Storage.PENDING){

alert("Resultspendingapprovalofstoragespacefromu

}

elseif(status==Storage.FAILED){



alert("Storagerequestdenied");

}

};



statuscanbeoneofthreevalues:Storage.SUCCESS,Storage.PENDING,



orStorage.FAILED.Ifthepop-upappears,youwillgetacallback

ofStorage.PENDING.Later,iftheuserapprovestherequest,you

willreceiveStorage.SUCCESS;iftherequestisdenied,youwill

receiveStorage.FAILED.Uponapprovingtherequest,userscan

alsoindicatewhethertheygivepermissiontofuturerequeststo

automaticallystoreinformationwithouttheapplicationpopping

upthepermissiondialogagain.



HowAMASSWorksInternally

Internally,AMASSusesahiddenFlashfileandFlash's

SharedObjectfunctionalitytopermanentlystorethe

information.AMASSscriptstheFlashappletusingtheFlash

plug-in'sActiveXmethodsonInternetExplorerandits

LiveConnectmethodsonFirefox.AMASSthenusestheFlash

SharedObject'scallbackstodetectwhentherequeststorage

dialogisonthescreenandpassthesebacktotheJavaScript

application.

BradNeuberg



Hack37.ControlBrowserHistorywithiframes



Learntheblackartofiframesandbrowserhistory.

Aniframeisaninternalframethatcanpointtoandloadan

arbitraryURLwithinyourHTMLpage.Hereisanexamplesmall

iframeshowingGoogle:


"width:320px;height:300px;">





Yourbrowserhistoryisthelistofpagesyouhavevisited.When

youpressthebackandforwardbuttonsinyourbrowser,you

arejumpingthroughyourbrowserhistory.

Sometimes,forvariousreasons,programmerswanttocontrol

whatisplacedintothebrowser'shistory.Thinkofthisasa

primitivemechanismthatcanbeusedinmoreelaborateAjax

andDHTMLhacks;it'sabuildingblockusefulinallkindsof

crazyAjaxkung-fu.It'sgoodtoknowabouttrickssuchasthis

onewhenyou'reconfrontedwithAjaxdesignissuesorwhen

youstumbleacrossverystrangebugsthatmightbecausedby

thedifferentkindsofiframewewilldiscusshere.

Therearetwokindsofiframe.Thefirstkindarelocatedright

withinyourHTMLandareloadedinthepage:






src="http://www.google.com">











Codecanalsocreateiframesdynamically,throughtheDOMand

JavaScript,afterthepageisfinishedloading:







functioninitialize(){

vartestFrame=document.createElement("IFRAME");

testFrame.id="testFrame";

testFrame.src="http://www.google.com";

document.body.appendChild(testFrame);

}













Okay,sotherearetwokindsofiframe.Whocares?Well,itturns

outthesetwokindsofiframehavecompletelydifferent

behaviorswhenitcomestohistoryindifferentbrowsers!



BrowserLowdown

Here'sthelowdownforeachkindofbrowser:



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

Hack 36. Use Permanent Client-Side Storage for Ajax Applications

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

×