Dupa cum probabil ati aflat tema 3 a aparut de ceva vreme si in acest timp a fost rezolvata si notata. Mai departe voi descrie modalitatea mea de rezolvare, care mi s-a parut una dintre cele mai simple abordari (si care foloseste si AJAX pentru obtinerea bonusului de 10% :) ). Voi incepe prin a rezuma enuntul temei: se cere scrierea unui script (JavaScript) care sa permita cautarea si evidentierea potrivirilor pe un site (pentru bonus se cerea si folosirea AJAX).
Pentru usurinta implementarii si evitarea altor probleme site-ul pe care se facea cautarea se presupene a fi pe acelasi server cu scriptul. Dupa cum am spus am ales sa folosesc AJAX pentru o comportare interactiva a scriptului de cautare (si in varianta cu un iframe, fara a folosi AJAX se poate obtine aceeasi interactivitate). Pagina principala de pe care se face cautarea este una foarte simpla ce contine doua textboxuri si un buton. In primul textbox se introduce pagina in care se face cautarea. La pierderea focusului de catre aceste prin intermediul AJAX se incarca pagina ceruta in div-ul de la sfarsitul html-ului. In al doilea textbox se dau cuvintele de cautat iar dupa apasasrea butonului de search scriptul intra din nou in actiune cautand aparitiile cuvintelor. Pagina este data in continuare (se pot observa id-urile date fiecarei zone necesare pentru script):
Pentru usurinta implementarii si evitarea altor probleme site-ul pe care se facea cautarea se presupene a fi pe acelasi server cu scriptul. Dupa cum am spus am ales sa folosesc AJAX pentru o comportare interactiva a scriptului de cautare (si in varianta cu un iframe, fara a folosi AJAX se poate obtine aceeasi interactivitate). Pagina principala de pe care se face cautarea este una foarte simpla ce contine doua textboxuri si un buton. In primul textbox se introduce pagina in care se face cautarea. La pierderea focusului de catre aceste prin intermediul AJAX se incarca pagina ceruta in div-ul de la sfarsitul html-ului. In al doilea textbox se dau cuvintele de cautat iar dupa apasasrea butonului de search scriptul intra din nou in actiune cautand aparitiile cuvintelor. Pagina este data in continuare (se pot observa id-urile date fiecarei zone necesare pentru script):
<html>
<head>
<title>Search</title>
<script src="search.js">
</script>
</head>
<body>
<form id="searchFrom">
<span>Adresa la care se cauta: </span>
<input type="text" id="location" onblur="lostFocus()"/>
<br/>
<br/>
<span>Cuvinte cautate: </span>
<input type="text" id="keywords" onblur="lostFocus()"/>
<br/>
<br/>
<input type="button" value="Search" id="submitButton" onclick="searchPressed()"/>
</form>
<br/>
<br/>
<div id="contentDiv">
</div>
</body>
</html>
Partea care initializeaza obiectul XMLHttpRequest este urmatoarea (este prezentata partea de Firefox pentru a nu complica lucrurile):
// Se creaza obiectul pentru firefox
httpRequest = new XMLHttpRequest();
// Se seteaza functia apelata la modificari ale starii obiectului httpRequest
httpRequest.onreadystatechange = function()
{
var contentDiv = document.getElementById("contentDiv");
// Daca s-a primit raspunsul la cerere atunci acesta se afiseaza
// in div
if(httpRequest.readyState == 4)
{
contentDiv.innerHTML = httpRequest.responseText;
}
}
// Se construieste si se trimite cererea
httpRequest.open("GET", location, true);
httpRequest.send(null);
Se observa setarea unei functii anonime pentru proprietetea onreadystatechanged. Aceasta este apelata automat ori de cate ori exista o schimbare in starea (readyState) cererii Http trimise cu ajutorul JavaScript. Ne intereseaza starea 4 adica aceea care apare in momentul sosirii raspunsului (in cazul nostru a continutului paginii in care se face cautarea). Dupa cum se vede mai sus se seteaza continutul html al div-ului cu id-ul contentDiv la valoarea campului responseText al obiectului XMLHttpRequest in care se va afla exact pagina ceruta. In ultimile doua linii dupa crearea si configurarea obiectului XMLHttpRequest se trimite un request catre server in care se pune adresa paginii cerute (location).
La apasarea butonului de Search se executa functia searchPressed(). Aceasta se ocupa cu identificarea potrivirilor si colorarea acestora. Erau mai multe variante aici printre care folosirea expresiilor regulate sau cautarea manuala (varianta mai din topor). Binenteles am ales ultima varianta folosind functii precum: indexOf, lastIndexOf, substr, charAt. Nu voi mai descrie cum s-a facut cautarea in text pentru ca nu are rost (presupun ca toata lumea poate cauta text folosind metodele de mai sus). Singurul lucru de mentionat aici este ca trebuie avuta grija sa se sara peste textul interior tagurilor si continutul blocurilor dpeciale de genul script. In rest functia identifica fiecare cuvant in parte din text si face o copie a paginii in care se cauta adaugandu-se taguri pentru modificarea culorii zonelor care s-au potrivit la cautare (prin folosirea unui tag de genul span cu un stil specificat sau font).
Pentru mai multe informatii pot ajuta chiar sursele tuturor participantilor la acest proiect ce se afla aici.
La apasarea butonului de Search se executa functia searchPressed(). Aceasta se ocupa cu identificarea potrivirilor si colorarea acestora. Erau mai multe variante aici printre care folosirea expresiilor regulate sau cautarea manuala (varianta mai din topor). Binenteles am ales ultima varianta folosind functii precum: indexOf, lastIndexOf, substr, charAt. Nu voi mai descrie cum s-a facut cautarea in text pentru ca nu are rost (presupun ca toata lumea poate cauta text folosind metodele de mai sus). Singurul lucru de mentionat aici este ca trebuie avuta grija sa se sara peste textul interior tagurilor si continutul blocurilor dpeciale de genul script. In rest functia identifica fiecare cuvant in parte din text si face o copie a paginii in care se cauta adaugandu-se taguri pentru modificarea culorii zonelor care s-au potrivit la cautare (prin folosirea unui tag de genul span cu un stil specificat sau font).
Pentru mai multe informatii pot ajuta chiar sursele tuturor participantilor la acest proiect ce se afla aici.
Niciun comentariu:
Trimiteți un comentariu