innerHTML sau cum sa schimbam continutul paginii mai rapid din JavaScript

Motivat de viteza cu care ne copleseste serverul nostru xhost, am incercat obtinerea unei imbunatatiri a experientei utilizatorilor pe situl nostru transferand sarcina de incarcare a paginilor vizitate catre client-side. Asadar, in acest articol voi vorbi putin despre JavaScript.

In momentul de fata, de fiecare data cand incerci schimbarea paginii pe situl nostru de interfete web, i se cere serverului web noua pagina. Ideea ar fi sa se incarce in browser de la bun inceput toate paginile si sa se schimbe doar o portiune din pagina afisata in concordanta cu optiunea utilizatorului.

Pentru a face acest lucru se poate folosi propietatea innerHTML a obiectelor din DOM. De notat ca aceasta nu este standardizata si prin urmare suportul sau in diferitele browsere este incert. Pentru o varianta standardizata, incercati innerDOM .

Implementarea este aparent simpla: se face in pagina un div, sa ii spunem "continut". La apasarea butonului de incarcare a unei pagini, se apeleaza o functie JavaScript care seteaza proprietatea innerHTML a divului "continut" la un string dat de noi... si asta este tot.

Problema insa intervine in momentul in care stringul nostru contine mai multe linii, ghilimele si alte elemente speciale (cum este si cazul unui string care codifica o pagina intreaga). Cautand pe net, am dat peste o pagina care contine o comparatie intre innerHTML si innerDOM. Interesant este ca si exemplul cu innerHTML reuseste sa imi actualizeze continutul unui div la un formular intreg. Din cate imi dau seama pana acum, diferenta intre ce am incercat eu si acest exemplu este ca acesta din urma ia codul HTML dintr-un textarea.value, care este de tip DOMString.

Voi incerca sa studiez problema, iar daca voi gasi o solutionare voi reveni cu un articol. Daca aveti o solutionare, please comment :)