Ajax can also take templates locally, examples-perfect window hiding and co-use, simple sample template code in the Templates folder
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Local fetch template--perfect window hiding and co-use</title> <style>. Add{width:300px;Background-color:Gray; }ul{List-style:None; } </style></Head><Body> <ul> <Li>Open it<inputtype= "button"ID= "Open"></Li> <Li>Browse<inputtype= "button"ID= "Look"></Li> </ul></Body><Script> vargethtml=function(URL,FN) {varXHR= NewXMLHttpRequest (); Xhr.open ("GET", URL); Xhr.setrequestheader ("Content-type", "Text/plain"); Xhr.onreadystatechange= function() { if(Xhr.readystate== 4) {fn (xhr.responsetext); }} xhr.send (NULL); } //Open Window One varOpen=document.getElementById ("Open"); Open.onclick=function() {gethtml ("template/add.html",function(HTML) {varDialog=Document.createelement ("Div"); Dialog.innerhtml=html; Document.body.appendChild (Dialog); varwords=document.getElementById ("words"); Words.setattribute ("Status","Open"); //Setting PropertiesWords.innertext="haaaaaaaa"; Bind_event (); //open the execution of various operation functions in the window }); } //Open Window two var Look=document.getElementById (" Look"); Look.onclick=function() {gethtml ("template/add.html",function(HTML) {varDialog=Document.createelement ("Div"); Dialog.innerhtml=html; Document.body.appendChild (Dialog); varwords=document.getElementById ("words"); Words.setattribute ("Status"," Look"); Words.innertext="XIIIIIIII"; Bind_event (); }); } //Exit varbind_event=function(){ varExit=document.getElementById ("Exit"); Exit.addeventlistener ("Click",function() { This. ParentNode.parentNode.removeChild ( This. parentnode); } ) }</Script></HTML>
Template folder
<Divclass= "Add"> <Pclass= "Words"ID= "Words"></P> <inputtype= "button"value= "Exit"ID= "Exit"></Div>
Ajax local Fetch template--perfect window hiding and co-use