Joten, ystävät. Tämä on HTML-lomakkeiden oppimista käsittelevän osion viimeinen video.
Viimeisellä videotunnilla tarkastelimme eroja datan lähettämisen GET- ja POST-menetelmien välillä. Ja loimme tiedoston, joka on suunniteltu käsittelemään tietoja HTML-lomakkeesta. Ja saadaksemme lopuksi lomakkeiden tutkimisen päätökseen, meidän on vain opittava keräämään ja lähettämään tietoja lomakkeesta.
Tässä videossa puhumme lomaketietojen käsittelijästä, joka on juuri sitä, mitä tarvitaan tietojen keräämiseen lomakekentistä ja sen jälkeen käsittelemiseen. Tässä videossa opimme paitsi keräämään tietoja kentiltä, myös lähettämään niitä sähköpostitse. Tietojenkäsittelyssä ja vastaavissa ei ole erityispiirteitä. Käytämme yksinkertaisesti yksinkertaisinta vaihtoehtoa tietojen keräämiseen ja lähettämiseen. Lähetämme tiedot sähköpostiin, jonka ilmoitamme käsittelijässä. Tässä kannattaa muistaa, että käsittelijä on php-muotoinen tiedosto. Ja koska opiskelemme HTML:ää, puhumme PHP:stä hyvin lyhyesti. Ja harkitse vain tiettyä esimerkkiä tietojen lähettämisestä sähköpostitse.
Lomakkeen käsittelijä.
Kuten edellä mainitsin, tämä on PHP-muodossa oleva tiedosto, joka eri funktioiden, muuttujien ja globaalien taulukoiden avulla pystyy keräämään tietoja lomakkeesta ja lähettämään sen postilaatikkoomme. Tarkastellaan lomakkeenkäsittelijän yksinkertaisinta ja alkeellisinta versiota. Se ei tee mitään kenttätarkistusta tai muuta vastaavaa. Ainoa asia, jonka tarkistamme tällä videotunnilla, on, lähetettiinkö lomaketiedot sisältävä kirje sähköpostiimme vai menikö jotain pieleen.
Tietojen lähettäminen sähköpostitse.
Tietojenkäsittelylaite on melko pieni PHP-koodi, joka vastaanottaa kaikki tiedot lomakekentistä, käsittelee sen ja lähettää sen meille sähköpostitse.
Lomaketietojen lähettämiseen sähköpostiin käytämme postitoimintoa. Toiminnon avulla voimme määrittää sähköpostin, johon kaikki tiedot lähetetään, kirjeen aiheen ja itse viestin, joka koostuu lomakkeelta kerätyistä tiedoista.
Yksinkertaisesti sanottuna. Se on tässä videooppitunnissa. Katsotaan, miten sivustolle luodaan palautelomake ja saadaan se toimimaan. Ja kun vierailija haluaa kirjoittaa meille jotain, saamme hänen viestin sähköpostitse. Kaikki on oikeastaan aika yksinkertaista. Käy vain HTML-lomakkeiden oppimista käsittelevä osio läpi ja katso tämä video selvittääksesi, kuinka tämä kaikki tehdään verkkosivustollasi.
Videotunti: Lomakkeiden käsittelijä. Tietojen lähettäminen sähköpostitse.
HTML-hakemisto ja muut materiaalit voidaan ja pitää ladata!
Seuraavassa opetusvideossa aloitamme uuden osion taulukoiden luomisesta HTML-kielellä. Ja me selvitetään
Tietojen siirron järjestämiseksi palvelimelle lomakkeella tulee ottaa käyttöön HTML-lomake, johon sivuston vierailijat syöttävät tietonsa ja PHP-koodinsa, jonka tarkoituksena on vastaanottaa ja käsitellä vastaanotetut tiedot palvelimella.
HTML-tietojen lähetyslomake
Sivulla oleva lomake muodostuu tunnisteista
, jonka sisään sijoitetaan tunnisteet tekstitietojen syöttökentille, tunnisteet erikoiskomponenteille (esimerkiksi yhdistelmälaatikko), valintakentän ja tiedoston lataamisen tunnisteet.* HTML5:lle on myös mahdollista sijoittaa lomakekenttätageja ei lomaketunnisteiden sisään, vaan mihin tahansa sivun kohtaan. Tässä tapauksessa jokaiselle tällaiselle kenttään on määritettävä "form"-attribuutti määrittääksesi, minkä lähetyslomakkeen kanssa sen tulee olla vuorovaikutuksessa.
Joten yksinkertaisin lähetyslomake voi sisältää seuraavan koodin:
Lomakeelementit ja niiden parametrit:
action="myform.php"– "action"-attribuutti määrittää, mikä php-tiedosto käsittelee lähetetyt tiedot. Tässä esimerkissä tiedot lähetetään tiedostoon "myform.php", joka sijaitsee samassa hakemistossa kuin lomakesivu. Jos tätä attribuuttia ei ole erikseen määritetty, lomakkeen tiedot lähetetään itse lomakkeen sivuosoitteeseen.
method="post"– menetelmäparametri määrittää tiedonsiirtotavan POST tai GET. Lisätietoja tästä on artikkelissa "POST- ja GET-menetelmien erot". Jos et määritä attribuuttia nimenomaisesti, GET-menetelmää käytetään oletuksena.
Teksti "Arvo A:" Ja "Arvo B:" lisätty vain lomakkeen suunnittelun ja selkeyden vuoksi käyttäjälle. Tätä ei tarvitse lisätä tiedon siirtämiseksi, mutta jotta käyttäjälle tulisi selväksi, mitä syöttää, se kannattaa ilmoittaa.
Tunnisteet käytetään muodostamaan erilaisia lomakeohjauselementtejä.
type="teksti"– "type"-attribuutti määrittää kentän tyypin. Määritetyn tyypin mukaan sekä elementin ulkonäkö että sen tarkoitus muuttuvat. "text"-attribuutin arvo osoittaa, että elementti näytetään selaimessa yksirivisenä tekstikenttänä, johon käyttäjä voi syöttää merkkijonon.
name="data1"– “name”-attribuutti ilmaisee nimen tai pikemminkin palvelimen vastaanottaman taulukon tietojen indeksin. Tämä on pakollinen parametri, jonka avulla PHP-käsittelijä voi sitten käyttää välitettyä arvoa. Nimi voidaan valita mielivaltaisesti, mutta se on kätevämpää, kun tällä arvolla on jokin selkeä merkitys.
type="lähetä"– tunniste tällä parametrin "type" arvolla näytetään sivulla painikkeena. Itse asiassa voit tehdä ilman painiketta lomakkeessa. Jos lomakkeessa on esimerkiksi tekstikenttiä, lähetys voidaan tehdä painamalla näppäimistön "Enter"-näppäintä. Mutta napin käyttö tekee lomakkeesta ymmärrettävämmän.
value="Lähetä" !}– tässä tapauksessa (type="submit") se määrittää vain painikkeen etiketin. Esimerkiksi type="textille" tämä on teksti, joka näkyy tekstikentässä.
Tämän seurauksena sivulla tämä koodi näyttää suunnilleen tältä:
Napsauttamalla painiketta tiedot lähetetään määritetylle sivulle ja jos se on olemassa ja toimii oikein, tiedot käsitellään.
HTML-lomakkeella lähetettyjen tietojen käsittely PHP:ssä
Kuvatulla tavalla lähetetyt tiedot sijoitetaan superglobaaleihin taulukoihin $_POST, $_GET ja $_REQUEST. $_POST tai $_GET sisältävät tietoja sen lähetystavasta riippuen. $_REQUEST sisältää millä tahansa määritetyllä menetelmällä lähetetyt tiedot.
$_POST, $_GET ja $_REQUEST ovat assosiatiivisia taulukoita, joiden indeksikentät ovat samat tunnisteiden "name"-attribuuttien kanssa . Vastaavasti voidaksesi käsitellä myform.php-tiedoston tietoja, voit määrittää tällaisen taulukon elementtien arvot muuttujille määrittämällä kentän nimen indeksiksi:
// GET-menetelmälle
$a = $_GET[ "data1" ];
$b = $_GET[ "data2" ];
// POST-menetelmälle
$a = $_POST[ "data1" ];
$b = $_POST[ "data2" ];
// mille tahansa menetelmälle
$a = $_PYYNTÖ[ "data1" ];
$b = $_PYYNTÖ[ "data2" ];
Lomakekenttien täyttymisen tarkistaminen
Joskus tietoja vastaanotettaessa on tarkistettava, onko käyttäjä lähettänyt tyhjän lomakkeen. Voit käyttää tyhjää toimintoa tähän.
if (tyhjä ($_REQUEST["data1" ])) (
kaiku "Kenttä ei ole täytetty";
} muu(
kaiku "Kenttä on täytetty";
$a = $_PYYNTÖ[ "data1" ];
}
Yleensä tämä ratkaisu riittää. Jos sinun on syötettävä tekstiä, on selvää, onko se syötetty vai ei. Jos käyttäjä kuitenkin syöttää tarkoituksella nollan laskentaa varten, tyhjä funktio näyttää, että arvoa ei ole. Siksi tällaisissa tilanteissa on parempi käyttää isset-toimintoa. Se tarkistaa nimenomaisesti, onko arvo annettu vai ei.
if (isset ($_REQUEST["data1" ])) (
kaiku "Kenttä on täytetty";
$a = $_PYYNTÖ[ "data1" ];
} muu(
kaiku "Kenttä ei ole täytetty";
}
Laboratoriotyöt 1. HTTP-protokolla. Menetelmät GET, POST. HTML-lomakkeet.
Teoreettinen osa
HTTP-pyynnön elinkaari
- Selain avaa yhteyden palvelimen kanssa
- Selain lähettää palvelimelle pyynnön vastaanottaa sivu
- Palvelin luo vastauksen (useimmiten HTML-koodin) selaimelle ja sulkee yhteyden
- Selain käsittelee HTML-koodin ja näyttää sivun
Kiinnitä huomiota korostettuihin rohkea. Jo ennen kuin näet pyydetyn sivun näytöllä, yhteys palvelimeen on suljettu ja se on unohtanut sinut. Ja kun annat eri (tai saman) osoitteen tai napsautat linkkiä tai napsautat HTML-lomakepainiketta, sama kuvio toistuu uudelleen.
Tämän tyyppistä työtä kutsutaan "asiakas-palvelin". Asiakas tässä tapauksessa on selain.
Yhteys verkkopalvelimeen kestää siis vain muutaman sekunnin (tai sekunnin murto-osan) - tämä on aika linkin (tai muun tyyppisen pyynnön) napsautuksen ja sivun näyttämisen alkamisen välillä. Useimmat selaimet näyttävät jonkinlaisen ilmaisimen yhteyden aikana, esimerkiksi MS Internet Explorer näyttää animaation oikeassa yläkulmassa.
Päästäksemme ikuisesti eroon HTTP:n käsityksestä "mustana laatikkona" "teeskellään" telnetiä käyttävänä selaimena:
- Aloitetaan telnet ya.ru 80
- Syötetään seuraava pääteikkunaan (jos syöttöä ei näy, ei hätää):
GET / HTTP/1.0[paina Enter tästä]
Isäntä: ya.ru[paina Enter kahdesti]
Enter-näppäimen painaminen vastaa yleensä merkkien yhdistelmää CR + LF, joka on merkitty \r\n. Tätä merkintää käytetään alla.
Sivun http://ya.ru/ HTML-koodi kulkee näytön poikki. Kuten näette, ei mitään monimutkaista.
Nykyisen sivun lähdekoodia voi tarkastella lähes millä tahansa selaimella valitsemalla valikosta "Näytä|lähde".
Kuvat, kehykset - kaikki nämä ovat lisäpyyntöjä, täsmälleen samat. Itse asiassa, mistä kuvat tulevat selainikkunassa: HTML-koodia jäsennettäessä (käsitellessä) selain törmää tunnisteeseen https://i0.wp.com/ 
.
Yrittää:
Telnet www.google.ru 80
GET /php/php5ru.png HTTP/1.0\r\n
Isäntä: ya.ru\r\n\r\n
Se, mitä näet, jos tarkastelet tätä png-tiedostoa tekstieditorissa, vilkkuu ruudulla.
I-2. HTML-lomakkeet. Menetelmät tietojen lähettämiseksi palvelimelle
Olet todennäköisesti jo törmännyt HTML-lomakkeisiin:
- Kirjoita nimesi:
Kun tallennat tämän koodin HTML-tiedostoon ja katselet sitä suosikkiselaimellasi, näet tutun HTML-lomakkeen:
Kirjoita nimesi:
Tarkastellaanpa tarkemmin tässä lyhyessä esimerkissä käytettyjä tunnisteita.
Tag , jolla on parillinen lopputunniste, itse asiassa asettaa lomakkeen. Sen attribuutit ovat molemmat valinnaisia:
- toimintaa- määrittää URL-osoitteen (koko tai suhteellinen), johon lähetetty muodossa. Lomakkeen lähettäminen on sama pyyntö palvelimelle kuin kaikki muutkin (kuten jo edellä kuvailin).
Jos tätä määritettä ei ole määritetty, useimmat selaimet (tarkemmin sanottuna kaikki tuntemani selaimet) lähettävät lomakkeen nykyiseen asiakirjaan, eli "itseensä". Tämä on kätevä lyhennelmä, mutta HTML-standardin mukaan action-attribuutti vaaditaan.
- menetelmä - tapa lomakkeen lähettäminen. Niitä on kaksi.
- SAADA- lomaketietojen lähettäminen osoiteriville.
Olet ehkä huomannut useilla verkkosivustoilla URL-osoitteen lopussa olevan "?" ja seuraavat tiedot muodossa parametri=arvo. Tässä "parametri" vastaa merkitys attribuutti nimi lomakeelementit (katso alta tietoja tagista ), ja "arvo" - määritteen sisältö arvo(se sisältää esimerkiksi käyttäjän syötteen saman tunnisteen tekstikenttään ).
Kokeile esimerkiksi etsiä jotain Yandexistä ja kiinnitä huomiota selaimen osoitepalkkiin. Tämä on GET-menetelmä. - LÄHETTÄÄ- lomakkeen tiedot lähetetään pyynnön elin. Jos tämä ei ole täysin selvää (tai täysin epäselvää), älä huoli, palaamme tähän asiaan pian.
Jos attribuutti menetelmä ei määritetty - "GET" tarkoittaa.
Tag -sarjat muotoelementti määritteen määrittelemä tyyppi :
- Merkitys "teksti" määrittää yksirivisen tekstinsyöttökentän
- Merkitys "lähetä" määrittää painikkeen, jonka painaminen aiheuttaa lähettäminen lomakkeet palvelimelle
Muut arvot ovat mahdollisia (ja - ei ole ainoa tunniste, joka määrittää lomakeelementin), mutta tarkastelemme niitä seuraavissa luvuissa.
Mitä sitten tapahtuu, kun napsautamme "OK"?
- Selain tarkastelee lomakkeen sisältämiä elementtejä ja muodostaa niistä nimi- ja arvoattribuutit lomaketiedot. Oletetaan, että nimi on syötetty Vasja. Tässä tapauksessa lomaketiedot ovat name=Vasya&okbutton=OK
- Selain muodostaa yhteyden palvelimeen, lähettää palvelimelle pyynnön attribuutissa määritetystä asiakirjasta toimintaa tag
- Palvelin analysoi vastaanotetun pyynnön, muodostaa vastauksen, lähettää sen selaimelle ja katkaisee yhteyden
- Selain näyttää palvelimelta vastaanotetun asiakirjan
Saman pyynnön lähettäminen manuaalisesti (telnetillä) näyttää tältä (olettaen, että sivuston verkkotunnus on www.example.com):
telnet www.example.com 80
GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n
Isäntä: www.example.com\r\n
\r\n
Kuten olet luultavasti jo arvannut, lähetyspainikkeen napsauttaminen lomakkeessa, jossa on "GET"-lähetysmenetelmä, on sama kuin vastaavan URL-osoitteen kirjoittaminen (kysymysmerkki ja lomaketiedot lopussa) selaimen osoitepalkkiin: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK
Itse asiassa GET-menetelmää käytetään aina, kun pyydät asiakirjaa palvelimelta syöttämällä sen URL-osoitteen tai napsauttamalla linkkiä. Käytettäessä
Toiminto- ja metodimääritteiden käyttäminen.
Ja tässä on HTML-koodi, joka lisää lomakkeeseen kolme syöttöelementtiä - tekstikentän, lähetyspainikkeen ja valintaruudun.
Valintaruutu on kääritty etikettitunnisteeseen, joten voit muuttaa arvoa napsauttamalla sekä itse valintaruutua että otsikkoa.
Tämä HTML-koodi tarjoaa jonkin verran automaattista toimintaa.
****
Luo erityisen painikkeen, jota napsautettaessa lomaketiedot lähetetään. Toiminnon ja menetelmän attribuuttien perusteella painike luo pyynnön ja lähettää sen palvelimelle määritettyyn URL-osoitteeseen.
**nimi=q** **nimi="sivustohaku"**
määrittää tekstikentän nimen ja valintaruudun nimen.
Lomakkeen elementeille, joille on määritetty nimi, ne tarjoavat tiedot kyseiselle lomakkeelle. Tässä esimerkissä tekstikentän antama arvo on arvo q, ja valintaruutu tarjoaa arvon sivustohaku, molemmat parametrit ovat osa kelvollista Google-kyselyn URL-osoitetta. Kun käyttäjä napsauttaa painiketta, nimi ja vastaava arvo lisätään haun URL-osoitteeseen. Tässä on esimerkkipyyntö:
Http://www.google.com/search?q=Cookbook&sitesearch=dartlang.org
Tämä esimerkki luotiin kokonaan ilman Dart- tai Javascript-koodia. Koska se on hyvin yksinkertainen, se voi käyttää HTML:n normaalia toimintaa: julkisesti saatavilla olevia ja helposti muodostettavia URL-osoitteita sekä tavallista GET-pyyntöä. Suuren tietomäärän sisältävien lomakkeiden tai erikoispalvelimen kanssa kommunikoivien verkkosovellusten lomake on yleensä käsiteltävä ohjelmallisesti.
Seuraava esimerkki näyttää monimutkaisemman lomakkeen, joka lähettää tiedot ohjelmallisesti palvelimelle POST-pyynnön avulla.
Esimerkki slambookista erityisesti
Tämä osa sisältää kaksi ohjelmaa perusesimerkkinä.
Ensimmäinen on tavallinen palvelinohjelma nimeltä slambookserver, joka kuuntelee paikallisen tietokoneen porttia 4040 ja käsittelee POST- ja OPTIONS-pyynnöt generoimalla viestejä ja lähettämällä vahvistuksen asiakkaalle. Palvelin käyttää CORS-otsikoita, jotta sovellus voi käyttää muilta palvelimilta lähetettyjä pyyntöjä.
Toinen on asiakasohjelma nimeltä slambook, joka tarjoaa lomakkeen, johon käyttäjä voi syöttää tietoja. Tämä ohjelma käyttää polymeeriä kaksoissidontaan syöteelementtien ja Dart-muuttujien välillä. Kun käyttäjä napsauttaa painiketta, Dart-koodi muuntaa tiedot JSON-merkkijonoksi, lähettää OPTIONS-pyynnön palvelimen luvan saamiseksi ja lähettää sitten POST-pyynnön tietojen lähettämiseksi. Kun pyyntö palvelimelta vastaanotetaan, se näytetään asiakkaalle.
Seuraava kaavio näyttää palvelimen ja asiakkaan välisen viestinnän järjestyksen tässä esimerkissä.
Kokeile sitä! Syötä kaikki tiedot ja napsauta painiketta Lähetä.
Versio Huomautus. Slambook-sovellus on yhteensopiva polymer.dart 0.9:n kanssa.
Pyyntö palauttaa viestin "Ei palvelinta", koska et ole käynnistänyt palvelinta koneellasi. Korjataan tämä.
Palvelimen käynnistäminen
Pääpalvelinohjelman slambookserver.dart lähdekoodi voidaan ladata opetusohjelman esimerkeistä
Suorita palvelinohjelma komentoriviltä
% dart slambookserver.dart Kuuntele GET ja POST osoitteessa http://127.0.0.1:4040
Nyt voit yrittää uudelleen lähettää tiedot yllä olevasta slambook-sovelluksesta.
Kommentti: Jos jokin muu ohjelma käyttää jo porttia 4040, palvelin palauttaa virheilmoituksen ja lopettaa suorituksen. Tämän sivun ohjelma odottaa slambookserverin olevan paikallisessa koneessa, portissa 4040. Jotta sovellus toimisi, sinun on lopetettava toinen prosessi ja käynnistettävä slambookserver uudelleen. Tai voit muuttaa portin numeroa palvelimessa ja asiakasohjelmassa. Vältä 3030:n käyttöä, koska Dart Editor käyttää sitä. Suorita sitten asiakas ja palvelin paikallisella koneellasi.
Tämän opetusohjelman loppuosassa selitetään palvelin- ja asiakaskoodi.
Asiakaspuolelta saat tietoa:
Lähetetään lomaketietoja
Nollaa lomake
Polymeerin käyttö lomaketietojen sitomiseen
Tämän osion palvelinosassa puhutaan seuraavista asioista:
CORS-otsikot
Käsitellään OPTIONS-pyyntöä
POST-pyyntöjen käsittely
Lähetetään lomaketietoja
Ensinnäkin katsotaan kuinka tiedot lähetetään palvelimelle.
Muista, että esimerkki search_form perustui action- ja method-attribuuttien käyttöön määrittämään lomakkeen lähetystarkoitus ja -tapa. Muista myös, että esimerkki search_form perustuu erityisen lähetyspainikkeen automaattiseen toimintaan. Toisaalta slambook-esimerkki liittyy suoraan lähetysprosessiin:
Ensinnäkin lomakkeessa ei ole määritelty toimintaa tai menetelmää
Toiseksi lähetyspainikkeessa on napsautuskäsittelijä Dartissa
Kolmanneksi napsautusten käsittelijä ohittaa lähetyspainikkeen automaattisen toiminnan
Lopuksi lomaketiedot lähetetään palvelimelle Dart-kirjastojen avulla
Slambook-esimerkin muotoa edustaa mukautettu elementti tute-slambook-lomake, jota edustaa seuraava HTML-koodi:
Huomaa toiminto- ja metodimääritteiden puuttuminen. Sen sijaan lähetyspainikkeen toiminta määritellään Dartin painikkeen napsautuskäsittelijässä. Alla on HTML-koodi, joka luo lähetyspainikkeen ja sitoo sen Dart-käsittelijään.
Ja itse submitForm()-painikkeen napsautuskäsittelijän koodi:
Katsotaanpa jokaista käsittelijän koodin elementtiä
Peruuta vakiokäsittelijä
Tämä on tapahtuma ilman attribuutteja toimintaa Ja menetelmä Lähetä-painike sisältää automaattisen toiminnan, jota ei tarvita slambook-esimerkissä. Siksi käsittelijäkoodin ensimmäinen rivi kutsuu e.preventDefault()-funktiota ohittamaan painikkeen oletuskäytön.
Void submitForm(Event e) (e.preventDefault(); //Älä tee oletuslähetystä. … )
POST-pyynnön määrittäminen ja lähettäminen
Seuraava koodinpätkä luo objektin HttpRequest. Tämä koodi käyttää uutta HttpRequest-objektin luomiseen, jota käytetään POST-pyynnön määrittämiseen ja lähettämiseen. HttpRequest-luokassa on vastaava getString()-funktio, jotta voit käyttää ja lähettää tavallisia GET-pyyntöjä URL-osoitteisiin.
Seuraava rivi tarjoaa HttpRequest-objektille takaisinsoittotoiminnon onData, jota kutsutaan, kun palvelimelta saadaan vastaus. Tarkastelemme onData()-funktion määrittelyn yksityiskohtia myöhemmin.
Tärkeää: Sinun on rekisteröitävä takaisinsoittotoiminto ennen pyynnön lähettämistä!
Pyyntö = uusi HttpRequest(); request.onReadyStateChange.listen(onData); var url = "http://127.0.0.1:4040"; request.open("POST", url); request.send(slambookAsJsonData());
Lopuksi funktio lähettää lomaketiedot palvelimelle JSON-merkkijonona. Joskus tiedot lähetetään osissa. Mutta tämä esimerkki on tarpeeksi pieni, jotta tiedot lähetetään kerralla. Tämä pyyntö on asynkroninen, joten send() -menetelmä valmistuu heti, kun pyyntö on lähetetty.
Odotetaan vastausta palvelimelta
HttpRequest-objekti kommunikoi palvelimen kanssa. Voit saada valtion kentän avulla readyState HttpRequest-objekti. Valmis-tilassa voi olla viisi eri arvoa: lähettämätön, avoin, otsikot vastaanotettu, ladataan ja valmis. Kun valmiustila muuttuu, HttpRequest herättää tapahtuman ja onData()-takaisinsoittotoiminto kutsutaan.
Muistetaanpa koodirivi, johon tapahtumakäsittelijä on rekisteröity on ReadyStateChange:
Request.onReadyStateChange.listen(onData);
Ainoa vaadittu argumentti listen()-menetelmälle on takaisinsoittofunktio allekirjoituksella: void onData(T). Listen()-menetelmällä voit myös määrittää kolme lisäargumenttia, kuten virhekäsittelijän.
Alla on takaisinsoittotoiminto onData():
Void onData(_) ( if (request.readyState == HttpRequest.DONE && request.status == 200) ( // Tiedot tallennettu OK. serverResponse = "Palvelin Sez: " + request.responseText; ) else if (request.readyState == HttpRequest.DONE && request.status == 0) ( // Tila on 0...todennäköisesti palvelin ei ole käynnissä. serverResponse = "Ei palvelinta"; ) )
Ensimmäinen asia, jonka koodi näyttää, on, suoritettiinko pyyntö onnistuneesti. Jos kyllä, niin vastauksen sisältö sijoitetaan nimetylle riville serverResponse, joka on sidottu slambook-sovelluksen textarea-elementin arvoon. Kun riviä muutetaan, käyttöliittymä päivittyy automaattisesti ja käyttäjälle näytetään viesti.
Jos pyyntö suoritetaan virheellisesti, ohjelma tulostaa serverResponse virheviesti, joka näytetään käyttäjälle.
Lomaketietojen nollaaminen
Nollauspainike on erityinen HTML-syöttöelementti, joka oletusarvoisesti tyhjentää kyseiseen lomakkeeseen syötetyt arvot. Sen sijaan haluamme painikkeen palauttavan lomakearvot niiden alkuperäisiin arvoihin. Siksi nollauspainikkeen napsautuskäsittelijän on ohitettava automaattinen toiminta ja täytettävä tiedot erikseen.
Void resetForm(Event e) ( e.preventDefault(); suosikkiAsiat["kissanpennut"] = false; suosikkiThings["sadepisarat"] = epätosi; suosikkiThings["kintaat"] = epätosi; suosikkiThings["vedet"] = false; theData ["firstName"] = "" theData["favoriteColor"] = "#FFFFFF"] = "2013-01-01"; 0"; theData["catOrDog"] = "kissa"; theData["musiikki"] = 0; theData["zombit"] = epätosi; serverResponse = "Tietojen nollaus."; )
Taustaohjelman luominen ja portin kuuntelu
Katsotaanpa nyt palvelinosaa, jota kutsutaan nimellä slambookserver, se palauttaa HTTP-vastauksen slambook-asiakassovelluksesta lähetettyyn pyyntöön. Palvelinpuolen koodi perustuu artikkeliin [Using Dart to create JSON Web services (#)
Palvelin kuuntelee paikallisen koneen porttia 4040 ja käsittelee vain pyynnöt, kuten POST ja OPTIONS. Molemmat pyynnöt käyttävät CORS-otsikoita pääsyn sallimiseen. POST-pyynnöissä palvelin palauttaa lyhyen vahvistusviestin, joka sisältää pyynnöstä saamansa JSON-tiedot.
Katsotaanpa koodia.
Slambookserver-sovelluksen main()-funktio on esitetty kokonaisuudessaan alla. HttpServer-luokan avulla slambookserver-sovellus alkaa kuunnella paikallisen koneen porttia 4040 kutsuttuaan huipputason funktiota sitoa()
Lopullinen HOST = "127.0.0.1"; lopullinen PORTTI = 4040; void main() ( HttpServer.bind(HOST, PORT).then(gotMessage, onError: printError); )
Bind()-funktio palauttaa tulevaisuuden, jota voidaan käyttää tulevaisuuden arvon saamiseksi (lisätietoa tulee hetkessä). then()-funktio rekisteröi kaksi takaisinsoittofunktiota tulevaisuudeksi. Ensimmäinen funktio, gotMessage(), kutsutaan, kun tulevaisuus vastaanottaa arvoja. Toinen tulostusvirhe Soitetaan, kun yhteysyritys epäonnistuu. Virhe voi tapahtua esimerkiksi, jos toinen ohjelma jo kuuntelee samaa porttia.
Suodata pyynnöt ja kutsu muita menetelmiä käsitelläksesi kunkin tyyppisiä toimintopyyntöjä sain Viestiä() alla.
Void gotMessage(_server) ( _server.listen((HttpRequest request) ( switch (request.method) ( case "POST": handlePost(request); break; case "OPTIONS": handleOptions(request); break; oletus: oletusHandler( request); ) ), onError: printError // Kuunteleminen epäonnistui.
Jos haluat käsitellä muuntyyppisiä pyyntöjä, kuten GET, voit yksinkertaisesti lisätä arvoja tapaus Esimerkiksi tapaus "GET".
Hieman tulevaisuudesta.
Katsotaanpa futuureja hieman ennen kuin tarkastelemme koodia POST- ja OPTIONS-pyyntöjen käsittelyä varten.
Tulevaisuus edustaa tapaa saada arvo jonkin aikaa tulevaisuudessa. Käytät futuureja estääksesi ohjelmaa lukkiutumasta, kun se odottaa tietoja, esimerkiksi jos arvon antamiseen tarvitaan pitkä laskenta tai jos arvo on luettava tai haettava I/O:n avulla.
Kun kutsutaan tulevaisuuden palauttavaa funktiota, tapahtuu kaksi asiaa
Funktio on jonossa suoritusta varten ja se palauttaa välittömästi epätäydellisen futuuriobjektin.
Myöhemmin, kun arvo on vastaanotettu, futuuriobjekti poistuu vastaanotetulla arvolla tai virheellä.
Käytä menetelmää saadaksesi tulevaisuuden palauttaman arvon sitten() rekisteröidäksesi takaisinsoitto.
Tässä esimerkissä sekä asiakas- että palvelinpuoli käyttävät futuureja pyyntöjen lähettämiseen ja vastaavien vastausten vastaanottamiseen. Asiakas-palvelinohjelmat käyttävät lähes aina futuureja viestintään ja muun tyyppisiin asynkronisiin I/O:ihin.
OPTIONS-pyyntöjen käsittely
Luokan käyttäminen HttpRequest, slambook-asiakassovellus lähettää pyyntöjä, kun käyttäjä napsauttaa "lähetä" -painiketta. Näit koodin aiemmin tässä artikkelissa.
Jos asiakas ja palvelin ovat eri alkuperää, mikä on yleistä sovelluksissa, esitarkastuspyyntö lähetetään ennen POST-testiä. Alustavan pyynnön on ensin sisällettävä OPTIONS-pyyntö, jotta voidaan määrittää, mitkä pyynnöt ovat yleisesti sallittuja. HttpRequest-luokka käsittelee automaattisesti esitarkastuksen OPTIONS-pyynnöt. Sinun ei enää tarvitse kirjoittaa asiakaspuolen koodia tätä varten.
Palvelin vastaanottaa alustavan OPTIONS-pyynnön ennen pääpyynnön vastaanottamista. Tässä on koodi slambookserver-sovellukselle, joka käsittelee OPTIONS-pyyntöjä.
Void handleOptions(HttpRequest req) ( HttpResponse res = req.response; addCorsHeaders(res); print("$(req.method): $(req.uri.path)"); res.statusCode = HttpStatus.NO_CONTENT; res. lähellä();
Tämä koodi tekee seuraavaa:
Saa HttpResponse-objektin, joka huolehtii siitä, että palvelin lähettää vastauksen asiakkaalle
Lisää CORS-otsikot kulunvalvontaan
Tulostaa viestin konsoliin
Signaalit siitä, että vastauksella ei ole sisältöä
Täyttää asiakkaalle lähetettävän vastauksen.
Kun asiakas vastaanottaa pyynnön, CORS-otsikko ilmoittaa, että POST-pyynnöt hyväksytään.
CORS-otsikoiden määrittäminen
Palvelinsovellus käyttää seuraavaa toimintoa lisätäkseen OPTIONS- ja POST-pyyntöjen otsikot CORS-vastaukseen. Funktio lisää kolme otsikkoa palvelimen vastaukseen Access-Control(jotka sisältyvät HttpResponseen).
Void addCorsHeaders(HttpResponse res) ( res.headers.add("Access-Control-Allow-Origin", "*, "); res.headers.add("Access-Control-Allow-Methods", "POST, OPTIONS" ); res.headers.add("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
CORS-otsikon kaksi ensimmäistä riviä sallivat POST- ja OPTIONS-pyynnöt mistä tahansa lähteestä. Kolmas määrittää pyyntöjen tyypin POST ja OPTIONS, jonka palvelin sallii hyväksyä pyyntöjä vain tietyillä otsikoilla.
Käsitellään POST-pyyntöjä
Tässä on toiminto, joka käsittelee asiakkaan POST-pyyntöjä.
Void handlePost(HttpRequest req) ( HttpResponse res = req.response; print("$(req.method): $(req.uri.path)"); addCorsHeaders(res); req.listen((List)
Aivan kuten OPTIONS-pyyntö, slambookserver vastaanottaa HTTP-vastausobjektin pyynnöstä, tulostaa viestin konsoliin ja lisää CORS-otsikot vastaukseen.
Seuraavaksi tämä koodi kuuntelee tietoja asiakkaan POST-pyynnöstä. Jos Kaikki tiedot ovat valmiita, takaisinsoittotoiminto kutsutaan. Tämä funktio on kirjoitettu samaan paikkaan. Funktion argumentti on luettelo numeroista, joka sisältää kaikki tiedot. Jokaista numeroa edustaa koodi, joka voidaan esittää UTF-16-merkkinä. Mutta sinun ei tarvitse huolehtia siitä, koska voit vain kutsua menetelmää String.fromCharCodes muuntaaksesi tavalliseksi merkkijonoksi.
HttpResponse-objekti hallitsee tietovirtoja, joita palvelin voi käyttää tietojen lähettämiseen takaisin asiakkaalle. Takaisinsoittotoiminnon sisällä slambookserver kirjoittaa viestit ja lähdetiedot merkkijonona tähän streamiin. Kehittyneemmät palvelimet tekevät jotain näillä tiedoilla, kuten tallentavat ne palvelimelle, käsittelevät niitä tai ehkä jopa nostavat rahaa pankkitililtäsi.
Kun virta suljetaan, HttpResponse-objekti lähettää tietoja asiakkaalle.
Slambook-malliasiakas-palvelinsovellus voi toimia lähtökohtana omalle asiakaspalvelinsovelluksellesi tai esimerkkinä omien sovellusten rakentamisesta.
Tässä on esimerkki siitä, mitä asiakasosan pitäisi tehdä.
Käytä lomakkeita kerätäksesi käyttäjätietoja.
Aseta lomakkeillesi syöttökentät yksittäisiä tietokohteita varten.
Käytä Polymeria palautetta varten pitääksesi lomaketiedot synkronoituna Dart-koodin kanssa.
Lähetä tiedot suoraan (toiminto- ja menetelmälomakkeen ominaisuudet)
Tai ohjelmallisesti (ohittaa Dart-lähetyspainikkeen koodin oletuskäytön)
Luo vastausobjekti palvelimelle HttpRequest-objektista.
Tämä on palvelimen tehtävä.
Käytä HttpServeriä palvelimen määrittämiseen ja portin kuuntelemiseen.
Käsittele vastaukset.
Käytä CORS-otsikoita salliaksesi kaikki pyynnöt.
Vastaus pyyntöön käyttää HttpResponsea.
Käsittele tietoja asynkronisesti futuureja käyttämällä.
Käytä streameja tietojen kirjoittamiseen vastaukseen.
Nämä resurssit perustuvat enimmäkseen Dart-kirjastoihin, jotka tarjoavat tukea kirjoitusasiakkaille ja palvelimille. Huomaa, että HttpRequest-luokkaa on kaksi: yksi dart:html(asiakkaille) ja toinen dart:io(palvelimille).
| Resurssi | Kirjasto | Kuvaus |
|---|---|---|
| HttpRequest | dart:html | HTTP-pyynnön asiakaspuoli |
| HttpRequest | dart:io | HTTP-pyyntöpalvelimen puolella |
| HttpServer | dart:io | Palvelinosa käsittelee HTTP-viestintää palvelimen kanssa |
| HttpResponse | dart:io | Palvelinosa, joka huolehtii vastausten lähettämisestä pyyntöön |
| Streamit | dart:async | Tiedonkulku |
| Tulevaisuus | dart:async | Tapa vastaanottaa tietoja asynkronisesti |
| JSON | dart:convert | Oletus-JSON-muunnosilmoitus |
| Polymeeri | Polymeeri | Malliin liittyvät mukautetut elementit |
Kaksisuuntainen tiedonsidonta polymeerillä
Slambook-esimerkissä käytetään Polymeria palautteena, syöteelementin arvoa Dart-muuttujilla. Jos käyttäjä muuttaa syöteelementin arvoa, siihen liittyvä muuttuja Dart-koodissa muuttuu automaattisesti. Tai jos arvo muuttuu Dart-koodissa, siihen liittyvä mukautettu elementtiobjekti päivitetään automaattisesti. Artikkelissa Mukautettujen elementtien määrittäminen sisältää lisätietoja tietojen sitomisesta ja polymeeristä.
Tässä esimerkissä käytetään myös tapahtumakäsittelijän ilmoitusta syöteelementtien funktioiden sieppaamiseen ja käsittelyyn.
Slambook-esimerkin avulla voit nähdä, kuinka kaksisuuntaista tiedonsidontaa käytetään eri syöttöelementeissä, mukaan lukien uudet HTML5-elementit. Tässä taulukossa on yhteenveto kaikista kaksisuuntaisista määritteistä, joita voit käyttää Polymerin kanssa:
Attribuuttien käyttö arvo missä tahansa syöttöelementissä
Attribuutti arvo toimii kaikilla syöteelementeillä ja liittää arvon Dart-merkkijonoon. Tämä esimerkki käyttää arvo valintaruutuun, tekstinsyöttöruutuun, värivalitsimeen, päivämäärävalitsimeen ja aluevalitsimeen.
(Huomaa, että jokin koodi ympärillä, esim
Dart-koodin sanakirja nimeltä theData sisältää lomaketietoja. Sanakirjan objektikoodi on korostettu käyttämällä @havaittavissa ja puhelut havaittavissa() sitomista varten.
Sanakirja sisältää avain/arvo-parit jokaiselle syöttöelementille, jossa avain on merkkijono. Asiaan liittyvien elementtien arvot arvo ovat jousia. HTML viittaa sanakirjaelementteihin käyttämällä niiden nimiä (tunnisteita) Dartissa. Esimerkiksi värivalitsimen arvo liittyy theData['suosikkiväri'].
Pudotusvalikosta valitun hakemiston käyttäminen
Elementti
Käyttö tarkistettu valintaruuduissa
Voit käyttää attribuuttia tarkistettu Dart-looginen muuttuja erillisellä valintaruudulla. Tässä jokainen valintaruutu on liitetty erilliseen Boolen muuttujaan.
Itse lomake on yleensä tarkoitettu vastaanottamaan käyttäjältä tietoa lähetettäväksi sen edelleen palvelimelle, jossa käsittelijäohjelma vastaanottaa lomaketiedot. Tällainen ohjelma voidaan kirjoittaa millä tahansa palvelinpuolen ohjelmointikielellä, kuten PHP, Perl jne. Ohjelman osoite ilmoitetaan tagin action-attribuutissa
Tässä esimerkissä name-attribuutin (login ja salasana) osoittamat lomaketiedot välitetään tiedostoon /example/handler.php. Jos action-attribuuttia ei ole määritetty, siirto tapahtuu nykyisen sivun osoitteeseen.
Siirto palvelimelle tapahtuu kahdella eri menetelmällä: GET ja POST, menetelmän määrittämiseksi tagissa