Spreminjanje vsebine z padajočim v AJAX

Asinhroni JavaScript in XML lahko naredita vaše poslovne spletne strani bolj odzivne in interaktivne. Tehnologija AJAX omogoča obiskovalcem mesta uporabo spustnih menijev in drugih kontrol, da sprožijo dejanja, ne da bi povzročila osvežitev spletne strani. Če kliknete na ime izdelka v spustnem meniju, se lahko spremeni vsebina vsebnika div. Zapletena opravila AJAX lahko zahtevajo obsežno kodiranje, vendar lahko ustvarite preprost spustni meni z uporabo nekaj vrstic JavaScripta.

Spustni meniji

Dodajte preprosto oznako za izbiro svojemu dokumentu HTML in jo zapolnite z uporabo izbirne oznake, da določite vrednosti, ki naj se prikažejo v spustnem meniju. V vašem meniju je potreben tudi nadzornik dogodkov za klic funkcije JavaScript za izvedbo vaše zahteve AJAX. Naslednji primer doda elemente Camera in Phone v spustni meni in kliče funkcijo "getValue", ko je element izbran. Poleg tega lahko nadzirate, koliko elementov se prikaže v spustnem meniju. V tem primeru atribut size pove brskalnikom, da prikažeta dva elementa. Če vrednost nastavite na nič, morajo obiskovalci strani klikniti meni, da si ogledajo elemente. Če je vaša spletna stran gneča, nastavite velikost na 0, da bo meni kompakten.

Telefon kamere

AJAX Zahtevni predmeti

Na osnovni ravni, da bi delo AJAX, morate ustvariti funkcijo JavaScript, ki ustvarja HyperText Transfer Protocol, ali HTTP, objekt. Nato uporabite to funkcijo, da zahtevate informacije s spletnega strežnika. Koda kliče metode Odpri in Pošlji, da pošlje zahtevo. Ko koda pošlje zahtevo, morate dodati tudi ime vira, ki ga želite vrniti. Če želite na primer prejeti besedilno datoteko z imenom product1.txt s strežnika, v kodo dodate stavek Open in izjavo Send, podobno:

httpObject.open ("GET", "product1.txt", true); httpObject.send ();

Funkcije povratnega klica

Vaša koda AJAX mora poznati ID vsebine, ki jo želite spremeniti. Zahtevajte, da AJAX zahtevo posodobite s katerim koli elementom "div" na vaši spletni strani, tako da v kodo dodate funkcijo "Povratni klic". Funkcije povratnega klica se samodejno zaženejo, ko pride do določenega dogodka. V tem primeru potrebujete funkcijo povratnega klica, ki spremeni lastnost "innerHTML" elementa "div", ki ga želite spremeniti. Tipična funkcija povratnega klica izgleda:

httpObject.onreadystatechange = function () {if (httpObject.readyState == 4 && httpObject.status == 200) {document.getElementById ("container1"). innerHTML = httpObject.responseText; }}

Ko pošljete zahtevo spletnemu strežniku, ta funkcija spremlja zahtevo in išče odgovore. Ko strežnik pošlje nazaj "statusno kodo" 200 in "readyState" vrednost 4, potem ima koda podatke, ki jih potrebuje. Spremeni lastnost "innerHTML" "div", na katerega se sklicuje stavek "document.getElementById".

Premisleki spletnega strežnika

Transakcije AJAX zajemajo komunikacijo med brskalnikom in spletnim strežnikom. Ker koda AJAX v primeru zahteva besedilno datoteko, morate besedilno datoteko dodati v imenik na spletnem strežniku, kjer shranite druge datoteke za vaše spletno mesto. Besedilo v besedilni datoteki je besedilo, ki ga vaša koda AJAX doda na spletno stran, ko koda pridobi podatke. Ko nekdo izbere vrednost iz spustnega menija strani, koda AJAX spremeni tisto, kar je v vsebniku "div", ki je določeno za besedilo, ki ga je strežnik vrnil.

 

Pustite Komentar