Ajaxin käyttö. HTML:n tulostaminen AJAX:n avulla Lataa osa sivusta ajax jqueryn kautta

AJAX ja jQuery. Dynaaminen sisällön päivitys. Perustiedot (muutoksia 1.3.2012 alkaen)

Tässä artikkelissa puhutaan siitä, mitä AJAX ja jQuery ovat, ja tarkastellaan esimerkkejä niiden käytöstä.

AJAX on työkalu web-sovellusten rakentamiseen, jotka kommunikoivat palvelimen kanssa taustalla. Tässä tapauksessa käyttäjä saa dynaamisia sisältöpäivityksiä sisältävän sovelluksen lataamatta koko sivua uudelleen.

jQuery on JavaScript-kehys, kirjasto, jonka avulla voit kätevämmin käyttää joitain Javascriptin ominaisuuksia, kuten visuaalisten tehosteiden luomista, tapahtumien käsittelyä, työskentelyä DOM- ja AJAX-tuen kanssa.

Voit ladata jQueryn uusimman version ja tutustua kaikkiin ominaisuuksiin yksityiskohtaisesti kehittäjän verkkosivustolla: http://www.jquery.com/

Tässä artikkelissa tarkastellaan vain yhtä jQuery-kirjastofunktiota, nimittäin $.ajax()-funktiota. Tämän ominaisuuden avulla voimme sekä lähettää tietoja palvelimelle että vastaanottaa vastauksia palvelimelta taustalla lataamatta sivua uudelleen. Datan vastaanotto- tai lähetysasetukset riippuvat parametreista, joilla $.ajax()-funktiota kutsutaan. Pääasiallisia käsitellään alla. Voit lukea lisää parametreista jQuery-oppaasta.

Jatketaan esimerkkien tarkastelua.

Tärkeä!
Jotta esimerkit toimivat oikein, sinun on:
1. Kaikki tiedostot on kirjoitettava UTF-8-koodauksella.
2. Skriptit on suoritettava verkkopalvelimella, eikä niitä saa suorittaa selaimessa tiedostona.

Esimerkki 1: Sisällön dynaaminen päivittäminen ajastimen avulla

Luodaan yksinkertainen ohjelma, joka näyttää kellonajan, päivitetään kerran sekunnissa ajastimen avulla. Tämän ohjelman ominaisuus on saada tietoa nykyisestä ajasta toisesta ulkoisesta tiedostosta.

index.html-tiedoston sisältö.

function show() ( $.ajax(( url: "time.php", välimuisti: false, menestys: function(html)( $("#content").html(html); ) )); ) $(dokumentti ).ready(function())( show(); setInterval("show()",1000); ));

Koodissa on useita ominaisuuksia, selitämme ne.

1. jQuery-kirjasto sisältyy HTML-tiedoston otsikkoon. Tämä rivi on kirjoitettu tätä tarkoitusta varten.

Itse jquery.js-tiedosto sijaitsee samassa kansiossa kuin esimerkkitiedostot.

2. Asiakirjan runkoon luodaan säilö, johon lataamme sisällön.

3. Ensisilmäyksellä outo funktio $(document).ready() tarvitaan, jotta jQuery toimisi oikein, ja siinä voimme suorittaa kaikki valmistelut ohjelman toimimiseksi. Tässä tapauksessa kutsumme show()-funktiota, joka määrittää mekanismin sisällön hakemiseen toisesta tiedostosta, ja asetamme ajastimen niin, että show()-funktiota kutsutaan kerran sekunnissa.

$(dokumentti).ready(function())( show(); setInterval("show()",1000); ));

4. Show()-funktio koostuu $.ajax()-funktion kutsumisesta tietyllä määrällä parametreja, mikä mahdollistaa tiedon saamisen taustalla palvelimella olevasta ulkoisesta tiedostosta.

$.ajax(( url: "time.php", välimuisti: false, menestys: function(html)( $("#content").html(html; ) ));

Katsotaanpa $.ajax()-funktion käyttämiä parametreja.

Url: "time.php" Käyttää time.php-tiedostoa sisällön hakemiseksi. välimuisti: false Kyselytuloksia ei tallenneta välimuistiin. menestys: function(html)( $("#content").html(html); ) Jos pyyntö onnistuu, ohjaus siirtyy funktiolle, joka vastaanottaa sisällön parametrina ja kirjoittaa sen säilön. Säilöön kirjoittaminen tapahtuu tällä rivillä:
$("#sisältö").html(html);

Time.php-tiedoston sisältö.

Time.php-tiedoston tarkoitus on näyttää nykyinen aika näytöllä.

Lataa esimerkkilähdetiedostot (16,6 kt):

Esimerkki 2: Sisällön dynaaminen päivittäminen käyttäjän valinnan perusteella

Ohjelma, joka lataa sisältöä dynaamisesti käyttäjän harkinnan mukaan.

index.html-tiedoston sisältö.

Minkä sivun haluaisit avata?

$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "sivu1.html", välimuisti: false, menestys: function(html)) ( $ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", välimuisti: false, menestys) : function(html)( $("#sisältö").html(html); ) ));

Asiakirjan runkoon on luotu lomake, jossa on kaksi painiketta, joiden kautta käyttäjä valitsee haluamasi sisällön. Ja kontti sisällön lataamiseen.

"Sivu 1" -painikkeen napsautustapahtumaa käsittelee $("#btn1").click()-funktio, ja "Sivu 2" -painikkeen napsautustapahtumaa käsittelee $("#btn2"). click()-funktio.

Sisältöalueelle dynaamisesti ladattavien sivu1.html- ja sivu2.html-tiedostojen sisältö ovat yksinkertaisia ​​HTML-sivuja tai sisältöä sisältäviä tekstitiedostoja.

Lataa esimerkkilähdetiedostot (18,4 kt):

Esimerkki 3: Tietojen lähettäminen palvelimelle taustalla ja sisällön vastaanottaminen

Katsotaanpa esimerkkiä, joka lähettää syötetyn käyttäjänimen palvelimelle. Kun palvelin vastaanottaa nimen, se lähettää tervehdyksen ja laskee syötetyn nimen merkkien määrän.

index.html-tiedoston sisältö.

Kirjoita nimesi:


$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( tyyppi: "POST", url: "greetings.php", tiedot: "käyttäjänimi" =" +$("#käyttäjänimi").val(), menestys: function(html)( $("#content").html(html; ) ));

Asiakirjan runkoon on luotu lomake käyttäjätunnuksen syöttämistä varten. Ja säiliö dynaamisen sisällön lataamiseen.

Huomaa, että lomakkeella itsessään ei ole tavallisia toiminta- ja menetelmäkenttiä. Funktio $("#myForm").submit() toimii käsittelijänä tapahtumalle, jossa napsautetaan "Lähetä"-painiketta. Katsotaanpa tätä toimintoa.

$("#myForm").submit(function())( $.ajax(( type: "POST", url: "greetings.php", data: "username="+$("#username").val ( ), menestys: function(html)( $("#content").html(html); ) ));

Kuten näemme, päätyö liittyy jälleen $.ajax()-funktioon. Tällä kertaa näkyviin tulee lisäparametreja, joita ei otettu huomioon esimerkeissä 1 ja 2. Nimittäin:

Tyyppi: "POST" Tiedonsiirtotyyppi. data: "username="+$("#username").val() Palvelimelle välitetyt parametrit. Tässä tapauksessa välitämme käyttäjätunnuskentän sisällön - käyttäjänimen. Yleensä parametrit kirjoitetaan samalla tavalla kuin GET-menetelmässä, yhdelle riville, esimerkiksi:
tiedot: "username=Vasya&age=18&sex=male"

Huomaa, että lopussa on rivi:

Palauttaa epätosi; Tämä tehdään siten, että lomake ei yritä siirtää tietoja tiedostoon, josta se käynnistetään, eikä sivu lataudu uudelleen.

Greetings.php-tiedoston sisältö.

Näytämme tervehdyksen ja laskemme nimessä olevien merkkien määrän.

Lataa esimerkkilähdetiedostot (16,8 kt):

Lopuksi on syytä todeta, että dynaamista päivityssisältöä käyttävien sivujen luomisen ilmeisten etujen lisäksi on useita haittoja, jotka tulisi ottaa huomioon sivustoa kehitettäessä, nimittäin:

1. Sivuilla, joilla on dynaaminen sisältöpäivitys, selaimen "Takaisin"-painike ei toimi oikein.

2. Sivut, joilla on dynaamisia sisältöpäivityksiä, eivät muuta URL-osoitteita sisällön perusteella, joten niitä ei voi lisätä kirjanmerkkeihin.

3. Hakukoneet eivät indeksoi sivuja, joilla on dynaamisia sisältöpäivityksiä, koska ne eivät suorita JavaScript-komentoja.

Voit päästä eroon yllä mainituista haitoista ohjelmallisesti. Tässä artikkelissa ei käsitellä tällaisia ​​menetelmiä.

AJAX on lyhenne sanoista Asynchronous Javascript ja XML. Itse asiassa AJAX ei ole uusi tekniikka, koska sekä Javascript että XML ovat olleet olemassa melko pitkään, ja AJAX on synteesi määrätyistä teknologioista. AJAX yhdistetään useimmiten termiin Web 2.0, ja sitä mainostetaan uusimpana verkkosovelluksena.

AJAXia käytettäessä koko sivua ei tarvitse päivittää joka kerta, koska vain tietty osa siitä päivitetään. Tämä on paljon kätevämpää, koska sinun ei tarvitse odottaa kauan, ja taloudellisempaa, koska kaikilla ei ole rajoittamatonta Internetiä. Totta, tässä tapauksessa kehittäjän on varmistettava, että käyttäjä on tietoinen sivulla tapahtuvasta. Tämä voidaan toteuttaa latausilmaisimilla ja tekstiviesteillä, jotka osoittavat, että tietoja vaihdetaan palvelimen kanssa. Sinun on myös ymmärrettävä, että kaikki selaimet eivät tue AJAX:ia (selaimien vanhemmat versiot ja tekstiselaimet). Lisäksi käyttäjä voi poistaa Javascriptin käytöstä. Siksi tekniikan käyttöä ei pidä käyttää väärin ja turvautua vaihtoehtoisiin menetelmiin tietojen esittämiseksi Web-sivustossa.

Tehdään yhteenveto AJAXin eduista:

• Kyky luoda kätevä verkkokäyttöliittymä
• Aktiivinen käyttäjän vuorovaikutus
• Helppokäyttöisyys

AJAX käyttää kahta tapaa työskennellä verkkosivun kanssa: muuttaa Web-sivua lataamatta sitä uudelleen ja ottaa dynaamisesti yhteyttä palvelimeen. Toinen voidaan tehdä useilla tavoilla, erityisesti XMLHttpRequestillä, josta puhumme, ja käyttämällä piilotettua kehystekniikkaa

Tietojen vaihtoa varten sivulle on luotava XMLHttpRequest-objekti, joka on eräänlainen välittäjä käyttäjän selaimen ja palvelimen välillä (kuva 1). XMLHttpRequestin avulla voit lähettää pyynnön palvelimelle ja saada myös vastauksen erityyppisten tietojen muodossa.

On kaksi tapaa vaihtaa tietoja palvelimen kanssa. Ensimmäinen menetelmä on GET-pyyntö. Tässä pyynnössä pääset palvelimella olevaan asiakirjaan ja välität sille argumentit URL-osoitteen kautta. Tässä tapauksessa asiakaspuolella olisi loogista käyttää Javascriptin pakotoimintoa, jotta jotkin tiedot eivät keskeytä pyyntöä.

Javascriptillä kirjoitetun asiakasosan tulee tarjota tarvittavat toiminnot turvalliseen tiedonvaihtoon palvelimen kanssa ja menetelmiä tietojen vaihtoon millä tahansa edellä mainituista tavoista. Palvelinosan tulee käsitellä syötetiedot ja sen perusteella tuottaa uutta tietoa (esim. tietokannan kanssa työskennellä) ja lähettää se takaisin asiakkaalle. Esimerkiksi tietojen pyytämiseen palvelimelta voit käyttää tavallista GET-pyyntöä, jossa siirretään useita pieniä parametreja, mutta tietojen päivittämiseen tai uusien tietojen lisäämiseen on käytettävä POST-pyyntöä, koska sen avulla voit siirtää suuria tietomääriä.

Kuten jo mainittiin, AJAX käyttää asynkronista tiedonsiirtoa. Tämä tarkoittaa, että tietojen siirron aikana käyttäjä voi suorittaa muita tarpeellisia toimia. Tällä hetkellä käyttäjälle tulee ilmoittaa, että jonkinlainen tiedonvaihto on meneillään, muuten käyttäjä luulee, että jotain on tapahtunut väärin ja voi poistua sivustolta tai kutsua uudelleen toimintoa, jonka hän uskoo olevan "jäätynyt". Web 2.0 -sovelluksessa viestinnän aikana tapahtuvalla osoituksella on erittäin tärkeä rooli: vierailijat eivät ehkä ole vielä tottuneet tähän tapaan päivittää sivua.

Palvelimen vastaus ei voi olla vain XML, kuten tekniikan nimi antaa ymmärtää. XML:n lisäksi voit saada vastauksen pelkkänä tekstinä tai JSON-muodossa (Javascript Object Notation). Jos vastaus vastaanotettiin yksinkertaisena tekstinä, se voidaan heti näyttää sivun säilössä. Kun vastaus vastaanotetaan XML-muodossa, vastaanotettu XML-dokumentti käsitellään yleensä asiakaspuolella ja muunnetaan (X)HTML-muotoon. Kun asiakas vastaanottaa vastauksen JSON-muodossa, asiakkaan tarvitsee vain suorittaa vastaanotettu koodi (Javascriptin eval-toiminto) saadakseen täysimittaisen Javascript-objektin. Mutta tässä sinun on oltava varovainen ja otettava huomioon se tosiasia, että haitallista koodia voidaan lähettää tällä tekniikalla, joten ennen palvelimelta vastaanotetun koodin suorittamista sinun tulee tarkistaa ja käsitellä se huolellisesti. On olemassa sellainen käytäntö kuin "idle"-pyyntö, jossa palvelimelta ei saada vastausta, vain palvelinpuolen tietoja muutetaan.

Eri selaimissa tällä objektilla on erilaiset ominaisuudet, mutta yleensä se on sama.

XMLHttpRequest-objektimenetelmät

Huomaa, että menetelmän nimet kirjoitetaan samalla Camel-tyylillä kuin muut Javascript-funktiot. Ole varovainen käyttäessäsi niitä.

keskeyttää()- nykyisen pyynnön peruuttaminen palvelimelle.

getAllResponseHeaders()- saada kaikki vastausotsikot palvelimelta.

getResponseHeader("otsikon_nimi")- hanki määritetty otsikko.

open("request_type", "URL", "asynkroninen", "käyttäjänimi", "salasana")- pyynnön alustaminen palvelimelle ja pyyntömenetelmän määrittäminen. Pyynnön tyyppi ja URL-osoite ovat pakollisia parametreja. Kolmas argumentti on boolen arvo. Yleensä tosi on aina määritetty tai sitä ei ole määritetty ollenkaan (oletus on tosi). Neljättä ja viidettä argumenttia käytetään todentamiseen (todennustietojen tallentaminen komentosarjaan on erittäin vaarallista, koska kaikki käyttäjät voivat tarkastella komentosarjaa).

lähetä ("sisältö")- lähetä HTTP-pyyntö palvelimelle ja vastaanota vastaus.

setRequestHeader("otsikon_nimi", "arvo")- Aseta pyynnön otsikkoarvot.

XMLHttpRequest-objektin ominaisuudet

valmiissa tilanmuutoksessa- yksi XMLHttpRequest-objektin tärkeimmistä ominaisuuksista. Tämän ominaisuuden avulla määritetään käsittelijä, jota kutsutaan aina, kun objektin tila muuttuu.

readyState- numero, joka ilmaisee kohteen tilan.

vastausteksti- palvelimen vastauksen esitys pelkkänä tekstinä (merkkijono).

vastausXML- palvelimelta vastaanotettu DOM-yhteensopiva dokumenttiobjekti.

Tila- palvelimen vastauksen tila.

statusTeksti- palvelimen vastauksen tilan tekstiesitys.

Sinun tulisi katsoa tarkemmin readyState-omaisuutta:

• 0 - Objektia ei ole alustettu.
• 1 - Objekti lataa tietoja.
• 2 - Objekti on ladannut tietonsa.
• 3 - Objekti ei ole täysin ladattu, mutta käyttäjä voi olla vuorovaikutuksessa sen kanssa.
• 4 - Objekti on alustettu kokonaan; palvelimelta saatiin vastaus.

Objektin valmiustilan perusteella voit antaa vierailijalle tietoa siitä, missä vaiheessa tiedonvaihto palvelimen kanssa on, ja mahdollisesti ilmoittaa hänelle tästä XMLHttpRequest-objektin luominen

Kuten edellä mainittiin, tämän objektin luominen kullekin selaintyypille on ainutlaatuinen prosessi.

Jos esimerkiksi haluat luoda objektin Gecko-yhteensopivissa selaimissa, Konquerorissa ja Safarissa, sinun on käytettävä seuraavaa lauseketta:

Var Request = uusi XMLHttpRequest();

Ja Internet Explorerissa käytetään seuraavaa:

Var Request = new ActiveXObject("Microsoft.XMLHTTP");

Var Request = uusi ActiveXObject("Msxml2.XMLHTTP");

Nyt sinun on yhdistettävä kaikki toiminnot yhdeksi selaimen yhteensopivuuden saavuttamiseksi:

Funktio CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-yhteensopivat selaimet, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet Explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); ) palautuspyyntö

Kaiken tämän jälkeen voit luoda tämän objektin ja olla huolehtimatta suorituskyvystä suosituissa selaimissa. Mutta voit luoda kohteen eri paikoissa. Jos luot sen maailmanlaajuisesti, tietyllä hetkellä vain yksi pyyntö palvelimelle on mahdollinen. Voit luoda objektin joka kerta, kun palvelimelle tehdään pyyntö (tämä ratkaisee ongelman lähes kokonaan).

Pyyntö palvelimelle

Palvelinpyyntöalgoritmi näyttää tältä:

• XMLHttpRequestin olemassaolon tarkistaminen.
• Alustetaan yhteyttä palvelimeen.
• Pyynnön lähettäminen palvelimelle.
• Vastaanotetun tiedon käsittely.

Pyynnön luomiseksi palvelimelle luomme pienen funktion, joka yhdistää toiminnallisesti GET- ja POST-pyyntöjen toiminnot.

/* Toiminto pyynnön lähettämiseksi palvelimella olevaan tiedostoon r_method - pyynnön tyyppi: GET tai POST r_path - polku tiedostoon r_args - argumentit kuten a=1&b=2&c=3... r_handler - toiminto, joka käsittelee vastauksen palvelin */ toiminto SendRequest(r_method , r_path, r_args, r_handler) ( //Luo pyyntö var Request = CreateRequest(); //Tarkista pyynnön olemassaolo uudelleen, jos (!Request) ( return; ) //Määritä mukautettu Käsittelijä Request.onreadystatechange = function() ( // Jos tiedonvaihto on valmis if (Request.readyState == 4) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) ) //Tarkista, onko se tarpeen tee GET-pyyntö if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args. Request.open(r_method, r_path, true); r_method.toLowerCase() == "post") ( //Jos tämä on POST-pyyntö //Aseta otsikko Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Lähetä pyyntö Request.send(r_args); ) else ( //Jos tämä on GET-pyyntö //Lähetä tyhjä pyyntö Request.send(null); ) )

Pyynnön tekemisestä on tullut paljon helpompaa. Kirjoitetaan esimerkiksi funktio, joka vastaanottaa palvelimella olevan tiedoston sisällön ja tulostaa sen säilöön.

Funktio ReadFile(tiedostonimi, säiliö) ( //Luo käsittelijäfunktio var Käsittelijä = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Lähetä pyyntö SendRequest("GET",tiedostonimi," ", Käsittelijä);

Näin vuorovaikutus palvelimen kanssa tapahtuu.

Vastausta käsitellään

Edellisessä esimerkissä teimme pyyntöfunktion palvelimelle. Mutta se on pohjimmiltaan vaarallista, koska emme käsittele objektin tilaa ja palvelimen vastauksen tilaa.

Lisätään koodiamme, jotta se voi näyttää visuaalisen ilmoituksen latausprosessista.

Request.onreadystatechange = function() ( //Jos tiedonvaihto on valmis if (Request.readyState == 4) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) else ( //Ilmoita käyttäjälle latauksesta ))...

Kuten jo tiedät, XMLHttpRequest-objektin avulla voit tietää palvelimen vastauksen tilan. Hyödynnetään tämä tilaisuus.

Request.onreadystatechange = function() ( //Jos tiedonvaihto on valmis if (Request.readyState == 4) ( if (Request.status == 200) ( //Siirrä ohjaus käyttäjän käsittelijälle r_handler(Request); ) else ( // Ilmoitamme käyttäjälle tapahtuneesta virheestä) ) muuten ( //Ilmoita käyttäjälle latauksesta ) ) ...

Palvelimen vastausvaihtoehdot

Voit vastaanottaa palvelimelta useita erilaisia ​​tietoja:

• Pelkkää tekstiä

Jos saat pelkkää tekstiä, voit lähettää sen heti säilöön, eli lähtöön. Kun vastaanotat tietoja XML-muodossa, sinun on käsiteltävä tiedot DOM-funktioilla ja esitettävä tulos HTML-muodossa.

JSON on Javascript-objektimerkintä. Sen avulla voit esittää objektin merkkijonona (tässä voit antaa analogian serialisointifunktion kanssa). Kun vastaanotat JSON-tietoja, sinun on suoritettava se, jotta saat täyden Javascript-objektin ja suoritat sille tarvittavat toiminnot. Huomaa, että tällainen tiedonsiirto ja suoritus eivät ole turvallisia. Sinun on seurattava, mitä toteutukseen tulee.

Esimerkki JSON-koodista:
( "data": ( "sekalainen": [ ( "nimi" : "JSON-elementti yksi", "tyyppi" : "Alaotsikko 1" ), ( "nimi" : "JSON-elementti kaksi", "tyyppi" : " Alaotsikko 2 " ) ] ) )

Kun vastaanotat tällaisen koodin, suorita seuraava toimenpide:

Muun vastausdata = eval("(" + Request.responseText + ")")

Tämän koodin suorittamisen jälkeen kohde on käytettävissäsi vastaustiedot.

Työskentely palvelinpuolen ohjelmointikielten kanssa

Tällainen työ ei eroa tavallisesta työstä. Esimerkkinä otan PHP:n palvelinpuolen kieleksi. Mikään ei ole muuttunut asiakaspuolella, mutta palvelinpuolta edustaa nyt PHP-tiedosto.

Perinteisesti aloitetaan tervehtimällä ihmeelliseen maailmaamme:

Kaiku "Hei, maailma!";

Kun asiakas käyttää tätä tiedostoa, se palauttaa merkkijonon Hello, World. Kuten voit kuvitella, tämä tarjoaa valtavia mahdollisuuksia sovellusten rakentamiseen. Välittämällä argumentteja kutsuttaessa palvelinta XMLHttpRequestillä, voit parametroida lähdön ja tarjota näin laajan toiminnallisuuden Web-sovellukselle.

PHP:n lisäksi voit käyttää mitä tahansa muuta palvelinpuolen ohjelmointikieltä.

Tässä artikkelissa puhumme ajaxin vuorovaikutuksesta php:n kanssa. Kuinka yhdistää ajax-skriptin ja php-koodin työ? Kuinka käyttää ajaxia verkkokehityksessä? Jos olet kiinnostunut tällaisista kysymyksistä, löydät vastaukset niihin artikkelistamme. Sekä esimerkkejä ajax php -koodista.

Käytä ajax + php

Ymmärtääksemme tarvitsemmeko ajaxia PHP:n kanssa ollenkaan, selvitetään, mihin se voi olla hyödyllinen. Ajax+ php:n käyttöä voi vaihdella, ainoa asia on, että tällä tekniikalla ei voi rakentaa hakukoneille tärkeitä sivuelementtejä. Koska ajax lataa sivuelementtejä latauksen jälkeen, kun js-tapahtumia kutsutaan, mutta kuten tiedämme, hakukoneet eivät voi lukea javascript-koodia, joten sinun on valittava huolellisesti, missä tarvitset ja missä sinun ei tarvitse käyttää ajaxia php:n kanssa.

Missä voin käyttää ajax + php?

1. Uuden kommentin lisääminen

4. Haun järjestäminen sivustolla (automaattinen täydennys)

5. Vaiheittainen käyttäjän rekisteröinti sivustolle

6. Tilaa sähköposti

7. Katsele valokuvia

Ja muut…

Kuten näet, ajax + php:n käyttämiseen on paljon vaihtoehtoja. Eli sitä voidaan käyttää siellä, missä sivun uudelleenlataus ei olisi tarkoituksenmukaista, kun tarvitsee vain vaihtaa tietoja palvelimen kanssa.

Missä sinun ei pitäisi käyttää ajax + php

Mielipiteeni on objektiivinen, ehkä ajattelet toisin, mutta kokemukseni perusteella sanon, että ajax + php ei pidä käyttää:

1. Valikon toteuttaminen

2. Välilehtien käyttöönotto sivulla (Esimerkiksi: kun verkkokaupassa tuotesivulla näet arvostelun, tiedot, kommentit, valokuvat, videot... näitä välilehtiä vaihdettaessa ei tarvitse ladata tietoja.)

Ja muita negatiivisia esimerkkejä, jotka voivat vahingoittaa sivusi parempaa sijoitusta.

Vuorovaikutus ajaxin kanssa php:n kanssa

Itse asiassa ajax-tekniikka ei voi olla olemassa ilman PHP-skriptejä, koska ajax lähettää vain tietoja palvelimelle ja vastaanottaa palautusvastauksen lataamatta sivuja uudelleen. Siksi on oikeampaa kysyä, kuinka yhdistää ajaxin ja php:n työ. Mutta puhumme tästä artikkelin seuraavassa kappaleessa (ajax php esimerkki), ja nyt ymmärrämme ajaxin toiminnan yksityiskohdat.

Jotta voit lähettää tietoja palvelimelle, sinun on luotava XMLHTTPRequest-objekti. Avaa sen avulla url (php-skripti), lähetä siihen tiedot (POST tai GET-menetelmä), vastaanota vastaus ja näytä vastaanotettu palvelinvastaus näytöllä js-kielen tuntemuksella (vastaus voi olla mikä tahansa fragmentti tai sivuston sivun elementti).

Selvyyden vuoksi katso alla olevaa kaaviota, joka havainnollistaa ajaxin ja php:n vuorovaikutusta.

Ajax + php esimerkki

Esimerkkiä ajax-vuorovaikutuksesta php:n kanssa luodaan kaksi tiedostoa:

1. ajax_page.html

2. get_ajax.php

Katsotaanpa ensin sovelluksen käyttäjäpuolta, eli ajax_-sivua. html:

Ajax + PHP: esimerkki | sivustotoiminto XmlHttp() ( var xmlhttp; try(xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");) catch(e) ( kokeile (xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");) catch (E) (xmlhttp = false;) ) if (!xmlhttp && tyyppi XMLHttpRequest!="defined") ( xmlhttp = new XMLHttpRequest(); ) return xmlhttp ) function ajax(param) ( if (window.XMLHttpRequest) req = new XmlHttp(); =(!param.method ? "POST" : param.method.toUpperCase()); if(method=="GET") ( send=null; param.url=param.url+"&ajax=true"; ) else ( send=""; for (var i in param.data) send+= i+"="+param.data[i]+"&"; req.open(method, param . url, true); if(param.statbox)document.getElementById(param.statbox).innerHTML = " "; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() ( if (req.readyState == 4 && req .status == 200) //jos vastaus on myönteinen ( if(param.success)param.success(req.responseText); ) ) ) Täältä saamme raportteja ajax-sovelluksen toiminnasta ja palvelimen vastauksesta.

Syöttökenttä 1

Kirjoita tekstisi.!

Syöttökenttä 2

Vapaa teksti... Olen pakkomielle tähän artikkeliin ja haluan tilata RSS:n, jotta voin lukea tällaisia ​​artikkeleita useammin!!!

ajax_page.html:

Katsotaanpa tämän esimerkin javascript-puolta:

XmlHttp() on funktio, joka luo XMLHttpRequest() -objektin, joka on kirjoitettu mahdollisimman tiiviisti ja selainlaajuisesti.

ajax(param) – käsittelijämme kutsuessaan tapahtumia (onclick) vastaanottaa tarvittavat tiedot parametrijonossa:

url – minne tiedot lähetetään, ja se voi olla seuraavassa muodossa: sivu. php? parametri= arvo eli informaatio voidaan lähettää GET-menetelmällä.

statbox – sen html-lohkon tunnus, joka vastaanottaa ajax + php -sovelluksen tulokset.

menetelmä – tiedon lähetystapa, voi olla POST tai GET. Esimerkissämme käytämme POST-menetelmää, mutta samalla url:n kautta voidaan välittää tietoa GET-menetelmällä.

data – joukko lähetettyjä tietoja. Esimerkissämme tiedot otetaan automaattisesti kentistä 1 ja 2, vaikka voit kirjoittaa tiedot: (nimi: "arvo").

menestys – toiminnon nimi tai itse toiminto, joka käsittelee vastaanotetun tiedon (tekstin).

Kuten näet, ajax-funktiokutsu tehdään onclick=ajax()-tapahtumalla.

Katsotaan nyt ajax + php -sovelluksen palvelinpuolta, eli get_ ajaxia. php:

Täällä kaikki on paljon yksinkertaisempaa. Ensin asetamme lähtötietojen koodauksen otsikon avulla. Asetamme tiedon välimuistiin tallennuksen kiellon. sleep(2) – pysäyttää skriptin 2 sekunniksi, jotta näet odottavan animaation wait.gif. Tulostamme vastaanotetut tiedot samalla kun luemme kaikki $_POST-taulukon elementit ja muunnamme ne vaadittuun koodaukseen (kyrilliselle).

Käynnistä ajax php -sovellus lataamalla sivu ajax_page.html selaimeen

Tämän sain, kun klikkasin TEST AJAX -painiketta:

Tämä on vastaus, joka saatiin get_ajax.php-tiedostosta:

Asiasta on vielä kysymyksiäajax +php? Kysy heiltä alla olevissa kommenteissa ...

JQuery on javascript-kirjasto, jonka tavoitteena on "kirjoittaa vähemmän, tehdä enemmän". jQuery on helppo yhdistää sivustoosi ja aloittaa käyttö. jQuery helpottaa JavaScriptin käyttöä sivustossasi.

jQuery eliminoi suuren määrän JavaScript-koodirivejä ja mahdollistaa näiden rivien toteuttamisen yhdellä menetelmällä.

Mikä on AJAX?

AJAX on asynkroninen (eli selain voi tehdä mitä tahansa pyynnön lähettämisen jälkeen, kuten näyttää vastausta odottavan viestin, vierittää sivua jne.) JavaScript ja XML. Sitä käytetään dynaamisten ja nopeiden verkkosivujen luomiseen. AJAXin avulla voimme päivittää osan verkkosivusta lataamatta koko sivua uudelleen.

Entä jQuery ja AJAX?

JQueryn ja AJAX:n yhdistelmä tarjoaa tehokkaita toimintoja. Jqueryn ja ajaxin avulla voit tehdä pyyntöjä ja vastaanottaa tietoja useissa eri muodoissa, mukaan lukien XML, HTML ja jopa pelkkä teksti. Voit käyttää JSON-muotoa tietojen vaihtamiseen. Voimme käyttää ajax-pyynnön kautta saatuja tietoja html-sivullamme.

jQuery tekee nykyisestä selaimen Ajax API:sta tehokkaamman ja helpompi käyttää. Ajax-kutsujen tekeminen normaalilla tavalla javascriptillä on hieman hankalaa: koska on otettava huomioon, että eri selaimet vaativat erilaisia ​​lähestymistapoja XMLHttpRequest-objektin luomiseen. Lisäksi tietojen lähettäminen esimerkiksi lomakkeista vaikeutuu, jos ajax-kutsussa käytetään tavallista javascriptiä.

jQuery tarjoaa yksinkertaisia ​​ja tehokkaita toimintoja, jotka laajentavat javascriptin AJAX-menetelmiä ja tarjoavat joustavamman lähestymistavan.

Tässä lyhyessä artikkelissa näytän sinulle, kuinka jQueryä ja AJAXia käytetään yksinkertaisessa php-muodossa. Aloitetaan... JQueryn ja AJAXin käyttämiseen tarvitsemme kaksi tiedostoa, joista ensimmäinen sisältää html/php-koodin, jonka kautta ajax-pyyntö tehdään. Toisessa tiedostossa käsittelemme ajax-pyynnön ja palautamme tuloksen ensimmäiselle sivulle.

Vaihe 1: Luo school.php-tiedosto ja liitä siihen seuraava koodi:

Yllä olevasta koodista saamme opiskelijan nimen ja numeron ja jqueryn ja ajaxin avulla lähetämme ne osoitteeseen details.php.

funktio getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( tyyppi: "POST", url: " tiedot .php", data: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Roll no " +rno +" on "+tulos ) ; ));

Sinun nimesi:
Rullanumero:

Vaihe 2: Luo details.php ja lisää siihen seuraava koodi:

Yllä olevaan koodiin saamme opiskelijan osoitteen järjestysnumeron ja nimen avulla.

Tätä esimerkkiä varten sinun on luotava koulun tietokanta ja oppilastaulukko. Opiskelijataulukko sisältää kentät, joissa on nimet, järjestysnumerot ja osoitteet.

Toivon, että tämä artikkeli auttaa sinua.

AJAX tulee sanoista Asynchronous Javascript And XML, mikä tarkoittaa asynkronista JavaScriptiä ja XML:ää. AJAXin avulla voit päivittää HTML-sivun tiedot lataamatta niitä kokonaan uudelleen. Lisäksi tekniikan avulla voit työskennellä Internet-sivujen kanssa asynkronisesti. Eli kun JavaScript on vuorovaikutuksessa Web-palvelimen kanssa, käyttäjä voi jatkaa web-sivun käyttöä.

Esimerkki AJAX-tekniikan käytöstä on Google Suggest. Google Suggest toimii siten, että kun kirjoitat sanaa tai lausetta etsittäväksi, JavaScript siirtyy Googlen tietokantaan ja kysyy siltä 10 suosituinta kyselyä, jotka alkavat samoilla kirjaimilla. Ja sitten näyttää tämän luettelon lataamatta sivua uudelleen.

AJAX-tekniikan toimintaperiaatteiden huomioon ottamiseksi otamme verkkosivustollamme käyttöön samanlaisen mekanismin kuin Google Suggest. Oletetaan, että meillä on matkanjärjestäjän verkkosivusto. Sivustolla on hakukenttä ehdotuksille maan nimen mukaan. Lisätään tähän kenttään avattava luettelo, jossa on automaattinen täydennys syötettyjen kirjainten perusteella. Aloitetaan tämän ongelman ratkaiseminen. Sanon heti, että tämän tehtävän toteuttamiseen tarvitset HTML-tietoa ja vähän JavaScriptiä (sinun ei tarvitse olla asiantuntija). Palvelimen kielenä käytetään PHP:tä.

Ensin luodaan hakulomake. Tee tämä luomalla index.html-tiedosto verkkopalvelimellesi, avaamalla se millä tahansa tekstieditorilla ja kirjoittamalla seuraava html-koodi.

Etsi tarjouksia.

Lomat merellä

Etsi tarjouksia:

Tässä listauksessa loimme hakulomakkeen, jossa on tekstinsyöttökenttä ja lähetyspainike, ja loimme div-kerroksen tulosten näyttämistä varten. Tälle sivulle on liitetty myös ajax.js-tiedosto, joka sisältää JavaScript-funktioita.

Seuraavaksi kirjoitamme JavaScript-funktioita, jotka lähettävät pyyntöjä palvelimelle ja päivittävät sivun. Tarvitsemme Ajax-tekniikkaa, jotta HTML-dokumenttia ei tarvitse ylikuormittaa kokonaan. Joten aloitetaan. Luo ajax.js-tiedosto, sijoita se samaan kansioon kuin index.html ja avaa se tekstieditorissa.

Ensin sinun on luotava objekti, joka lähettää pyyntöjä palvelimelle ja vastaanottaa vastauksia. Tämä objekti luodaan eri tavalla eri selaimissa. Kirjoitamme universaalin toiminnon, jonka pitäisi toimia eri selaimissa. Lisää seuraava JavaScript-koodi ajax.js-tiedostoosi.

/*muuttuja pyyntöobjektin tallentamiseen*/
var pyyntö;
/*funktio pyyntöobjektin luomiseen*/
toiminto CreateRequest()
{
var request=null;
yrittää
{
//luo pyyntöobjekti Firefoxille, Operalle, Safarille
pyyntö = uusi XMLHttpRequest();
}
saalis(e)
{
//luo pyyntöobjekti Internet Explorerille
yrittää
( request=new ActiveXObject("Msxml2.XMLHTTP");
}
saalis(e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
palautuspyyntö;
}

Sinun on näytettävä tulosluettelo aina, kun muutat hakukenttää. Tätä varten käytämme JavaScript-tapahtumakäsittelijää. Havaitsemme muutokset jokaisen näppäimistötapahtuman näppäilyn yhteydessä. Voit tehdä tämän lisäämällä index.html-tiedoston HTML-koodiimme riville, jolle luodaan maa-niminen hakukenttä, attribuutti onkeyup="KeyPress(this.value)":

Eli kun mitä tahansa näppäintä painetaan, kutsutaan JavaScript KeyPress() -funktio, jolle hakumerkkijonoon syötetyt merkit välitetään parametrina. KeyPress()-funktion on suoritettava seuraavat tehtävät:

• Luo uusi pyyntöobjekti kutsumalla CreateRequest()-funktio;
• Luo URL-osoite, johon sinun on muodostettava yhteys saadaksesi tuloksia.
• Määritä pyyntöobjekti muodostamaan yhteys palvelimeen;
• Lähetä pyyntö palvelimelle.

Aloitetaan KeyPress()-funktion luominen. Uuden pyyntöobjektin luomiseksi meidän on yksinkertaisesti määritettävä pyyntömuuttujalle aiemmin luodun CreateRequest()-funktion palauttama arvo. Ja varmuuden vuoksi tarkistetaan pyyntömuuttuja. Jos se on NULL, pyyntöobjektia ei voitu luoda. Tämän ongelman ratkaiseva JavaScript-koodi näyttää tältä:

Toimintonäppäinpainallus(termi) (
request=CreateRequest();

jos(pyyntö==tyhjä)
{
palata;
}
}

Seuraavaksi sinun on kerrottava pyyntöobjektille, mikä JavaScript-toiminto käsittelee palvelimen vastauksen. Tätä varten sinun on määritettävä onreadystatechange-ominaisuudelle vastaavan funktion nimi. Tämä ominaisuus kertoo selaimelle, mikä toiminto suoritetaan aina, kun pyynnön valmiustila muuttuu. LoadResults()-funktiomme käsittelee vastauksen. Lisää funktioon seuraava rivi: request.onreadystatechange = LoadResults; . Huomaa, että funktion nimen jälkeen ei ole sulkeita.

Laitetaan sitten yhteys. Tätä varten sinun on ensin kerrottava objektille, minne tämä pyyntö lähetetään. Luodaan URL-osoite komentosarjalle, joka laskee tulokset ja liittää sen url-muuttujaan. Oletetaan, että php-skripti country.php on vastuussa tulosten laskemisesta palvelinpuolella. Tällöin URL-osoitteemme näyttää tältä: var url = "maa.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , jossa muuttuja s sisältää hakukenttään syötetyt merkit ja sid saa satunnaisluvun, jotta selain ei tallenna sivua välimuistiin. Lisää tämä rivi KeyPress()-funktion runkoon.

Seuraavaksi sinun on alustettava yhteys käyttämällä pyyntöobjektin open("GET", url, true) -menetelmää. Tällä menetelmällä on kolme parametria. "GET"-parametri määrittää, kuinka tiedot lähetetään palvelimelle. Käytämme GET-menetelmää, koska hakumerkkijonoon syötetyt merkit välitetään palvelimen komentosarjalle URL-osoitteen kautta. Toinen parametri määrittää palvelimen komentosarjan URL-osoitteen. Tallennamme url-osoitteen url-muuttujaan, joten määritämme tämän muuttujan toisessa parametrissa. Kolmannella parametrilla voi olla kaksi arvoa: tosi - asynkroninen tila ja false - synkroninen tila. Sovelluksemme toimii asynkronisessa tilassa, joten määritämme tosi. Kun yhteys on alustettu, sinun on luotava yhteys ja kysyttävä tuloksia. Tätä varten sinun tarvitsee vain kutsua pyyntöobjektin send(null)-funktio. Nolla-parametri osoittaa, että pyyntö ei sisällä tietoja.

Kun olet tehnyt kaikki muutokset, KeyPress(this.value) -funktio näyttää tältä:

Toimintonäppäinpainallus (termi)
{
/*luo uusi pyyntöobjekti*/
request=CreateRequest();
/*jos pyyntöobjektia ei voitu luoda, toiminto suoritetaan loppuun*/
jos(pyyntö==tyhjä)
{
palata;
}
/*muodosta URL*/
var url = "maa.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*määritä pyyntöobjekti yhteyden muodostamiseksi*/
request.onreadystatechange = LoadResults;
request.open("GET", url, tosi);
/*lähetä pyyntö palvelimelle*/
request.send(null);
}

Joten yhteys muodostetaan, pyyntö lähetetään, palvelin käsittelee tiedot ja palauttaa tuloksen. Seuraavaksi sinun on saatava vastaus, käsiteltävä ja näytettävä tulokset verkkosivulla. Kaiken tämän tekee LoadResults()-funktio, jota kutsutaan aina, kun pyynnön valmiustila muuttuu. Katsotaanpa, kuinka tämän toiminnon pitäisi toimia.

Ensin sinun on tarkistettava nykyinen valmiustila. Valmis-tilan tallentaa pyyntöobjektin readyState-ominaisuus. Kun pyyntö on käsitelty, valmiustila on 4. jos request.readyState == 4 , voit käsitellä vastauksen:

Funktio LoadResults()
{


/*käsittele vastaus*/
}
}

Funktio LoadResults()
{
/*Valmiustilan tarkistaminen*/
if (request.readyState == 4)(
/*Pyynnön tilan tarkistaminen*/
jos (pyyntö.tila == 200)(
/*kaikki on hyvin, käsitellään vastausta*/
}
}
}

Jos pyynnön tilan ja tilan tarkistus on suoritettu onnistuneesti, voit aloittaa palvelimelta saatujen tietojen käsittelyn. Voit vastaanottaa tietoja kahdella tavalla: request.responseText - vastaanottaa tietoja tekstin muodossa tai request.responseXML - vastaanottaa tietoja XMLDocument-objektin muodossa. Oletetaan, että palvelimemme lähettää vastauksen pilkuilla eroteltuna tekstiluettelona. Sitten saamme tiedot: var vastaus = request.responseText . Seuraavaksi käsittelemme tiedot ja näytämme ne tasossa, jossa on id="searchresults" .

En mene tietojenkäsittelyn yksityiskohtiin, vaan annan vain toimintokoodin kommentteineen:

Funktio LoadResults()
{
/*Valmiustilan tarkistaminen*/
if (request.readyState == 4)(
/*Pyynnön tilan tarkistaminen*/
jos (pyyntö.tila == 200)(
//Tee hakutulostaso näkyväksi
ShowDiv("hakutulokset");
//tyhjennä tulokset
ClearResults();
//hae tiedot
var vastaus = request.responseText;
//muuntaa tekstijono taulukoksi
var array = vastaus.split(",");
//määrittää taulukon koon
var count = array.length;
//etsi hakutulostaso

//luoda taulukon dokumenttiobjektimallissa
var tbl = document.createElement("taulukko");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
// iteroi kaikki taulukon elementit
for(muut i = 0; i (
var teksti = array[i];
//luo taulukon rivejä ja lisää ne sen runkoon
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//asettaa solujen attribuutit ja toiminnot
tblCell.onmouseover = function())(this.className="mouseOver";);
tblCell.onmouseout = function())(this.className="mouseOut";);
tblCell.setAttribute("border", "0");
tblCell.onclick = function())(Korvaa(this););
tblSolmu = document.createTextSolmu(teksti);
tblCell.appendChild(tblSolmu);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//lisää hänen ruumiinsa taulukkoon
tbl.appendChild(tblbody);
//asettaa taulukko tasoon
div.appendChild(tbl);
}
}
}

Ja pari muuta JavaScript-aputoimintoa tulosten näyttämiseksi näytöllä:

/*tee tulos näkyvä taso*/
funktio ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="näkyvä";
}

/*tee tulosten tasosta näkymätön*/
funktio HideDiv(id)
{
if (document.layers) document.layers.visibility="piilota";
else document.getElementById(id).style.visibility="hidden";
}

/*selkeät tulokset*/
funktio ClearResults()
{
/* Poista olemassa olevat rivit tulostaulukosta
var div = document.getElementById("hakutulokset");
var counter = div.childNodes.length;
for(var i = laskuri-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}

/*Korvaa syöttökentän arvo hiiren napsautuksella valitulla arvolla*/
toiminto Korvaa (tblCell)
{
var inputbox = document.getElementById("maa");
inputbox.value = tblCell.firstChild.nodeArvo;
ClearResults();
HideDiv("hakutulokset");
}

Myös html-tiedostossamme index.html tagien väliin ja lisää seuraavat CSS-säännöt:

.mouseOut( tausta: #ffffff; väri: #0000000; )
.mouseOver( tausta: #ccccff; väri: #0000000; )
pöytä (leveys: 250 pikseliä)

Siinä kaikki. Tässä artikkelissa tarkastelimme Ajax-tekniikan perusteita esimerkin avulla.