Jquery ir JavaScript bibliotēka, kuras mērķis ir "rakstīt mazāk, darīt vairāk." Jquery ir viegli izveidot savienojumu ar vietni un sākt lietot. Izmantojot jQuery, tas kļūst daudz vieglāk izmantot JavaScript jūsu vietnē.
jQuery novērš visu JavaScript koda buzz, un ļauj jums īstenot šo rindu tikai vienā metodē.
Kas ir AJAX?
Ajax ir asinhronais (I.E. pārlūks, nosūtot pieprasījumu, var darīt kaut ko, piemēram, lai parādītu ziņojumu gaida atbildi, ritiniet lapu utt.) JavaScript un XML. To izmanto, lai izveidotu dinamiskas un ātras tīmekļa lapas. AJAX ļauj mums atjaunināt daļu no tīmekļa lapas, neatjaunojot visu lapu.
Kas par jQuery un AJAX?
Jquery un Ajax kombinācija nodrošina spēcīgu funkcionalitāti. No izmantojot jQuery Un AJAX jūs varat iesniegt pieprasījumu un iegūt informāciju dažādos formātos, tostarp XML, HTML un pat parastā tekstā. Jūs varat izmantot JSON formātu, lai apmainītos ar datiem. AJAX pieprasījuma saņemtie dati, mēs varam izmantot mūsu HTML lapā.
jQuery padara esošo pārlūkprogrammu Ajax API jaudīgāku un vieglāk lietojamu. Izveidojiet AJAX zvanus parastajā veidā, izmantojot JavaScript, mazliet grūti: jo jums ir jāņem vērā, ka dažādām pārlūkprogrammām ir nepieciešamas dažādas pieejas XMLHTTTTPrequest objekta izveidei. Turklāt, sūtot datus, piemēram, no veidlapām, kļūst grūtāk, ja jūs izmantojat parasto JavaScript, lai zvanītu Ajax.
jquery nodrošina vienkāršu un spēcīgu funkcionalitāti, kas paplašina JavaScript Ajax metodes un nodrošina elastīgāku pieeju.
Šajā mazajā rakstā es jums parādīšu kā lietot jQuery un Ajax in vienkāršs PHP. forma. Sāksim ... Lai izmantotu jQuery un Ajax, mums ir vajadzīgi divi faili, pirmajam failam būs HTML / PHP kods, ar kuru tiks apkopoti Ajax vaicājums. Otrajā failā mēs apstrādāsim Ajax vaicājumu un atgriezīsies ar pirmo lapu.
1. solis. Izveidojiet skolu.php failu un ievietojiet šādu kodu tajā:
Iepriekš minētajā kodā mēs iegūstam studenta vārdu un numuru un, izmantojot jQuery un Ajax, nosūtiet tos uz details.php.
| TAVS VĀRDS: | ||
| Roll numurs: | ||
2. solis: Izveidojiet details.php un ievietojiet šādu kodu:
Iepriekš minētajā kodā mēs saņemam studenta adresi, izmantojot secības numuru un tā nosaukumu.
Par šo piemēru jums būs jāizveido skolas datu bāze un studentu tabula. Studentu tabulā ir lauki ar nosaukumiem, secības numuru un adresi.
Es ceru, ka šis raksts būs noderīgs jums.
Post () metode parasti ir paredzēta, lai nosūtītu datus uz serveri (piemēram, no veidlapas).
Ar post metodes kontekstā ir vērts pieminēt jSON. - Teksta formāts, kas balstīts uz JavaScript. To var izmantot gandrīz jebkuru programmēšanas valodu.
jQuery, AJAX pieprasījums pēc metode
jquery.post (URL ,,,,,,)- Pirmais arguments (URL) ir dokumenta URL, kurā pieprasījums tiek nosūtīts;
- Otrais arguments (dati) ir dati, kas nosūtīti uz serveri, kā parasti, kā objekts js;
- Trešais arguments (atzvanīšana (dati, textStatus, JQXHR)) ir F-I sauc pēc servera atbildes. Kā argumenti Šī funkcija Veikt datus, ko serveris nosūta, atbildot uz pieprasījumu un statusu, kā tika veikts pieprasījums.
jSON_DECODE () un JSON_ENCODE ()
Iebildums pHP valoda (No 5.2), JSON atbalsts ir iekļauts kodolā JSON_DECODE () funkciju (dekodē JSON virkni) un JSON_Encode (), kas paši konvertē JSON datu tipus atbilstošajam veidi PHP. un otrādi.
1, "b" \u003d\u003e 2); Echo json_encode ($ ARR); ?\u003eRezultāts
("A": 1, "B": 2, "C": 3, "D": 4, "E": 5)PHP piemēru darbība JSON_DECODE
$ JSON \u003d "(" A ": 1," B ": 2)"; VAR_DUMB (JSON_DECODE ($ JSON, TRUE)); $ ARR \u003d JSON_DECODE ($ JSON, TRUE); Atbalss ""$ ARR [" A "]."
"$ Arr [" B "]."
";
Rezultāts
Masīvs (5) (["A"] \u003d\u003e INT (1) ["B"] \u003d\u003e INT (2)) 1 2AJAX vaicājuma darbības piemērs pēc pasta metodes
Ko mēs darām:
Pārbaudiet par pareizību nosūtīto (pēc pieprasījuma AJAX) datus (datus ievada lietotājs). Ja dati ir pareizi, parādiet ziņu. Pretējā gadījumā laukos izveidojiet sarkanu apgaismojumu. Viss darbojas asinhroni, tas ir, neatjaunojot lapu. tu vari izmantot Šis princips, Piemēram, lai izveidotu komentāru sistēmu, ievietojot komentārus datubāzē.
jQuery.
$ (Dokuments) .ready (funkcija () (VAR darbojas \u003d FALSE; / * Šis karogs novērš vairāku komentāru sūtīšanu: * / $ ("forma"). Iesniegt (funkcija (E) (E.PreventDefault (); ja (darbs) ) Atgriezties FALSE; DARBA \u003d TRUE; $ ("# Iesniegt"). Val ("gaidīt .."); $ ("kļūda"). RemoveClass ("kļūda"); $ .post ("Submit.php", $ (tas) .serialize (), funkcija (MSG) (/ * Sūtīt formas vērtības submit.php: * / Darbs \u003d FALSE; $ ("# Iesniegt"). Val ("sūtīt"); ja (MSG. statuss) // Ja dati ir pareizi, pievienojiet ziņojumu (Console.log (msg.status); $ (msg.html) .hide (). ievietot atpakaļfeore ("forma"). CLIDBEWN ();) citur (//) Ja ir kļūdas, mēs iziet cauri objektam ar objektu // msg.errors un ņem tos uz $ .each lapu (msg.errors, funkcija (k, v) ($ ("#" + k) .Addclass ("#" + k). "Kļūda"); // brīdinājums (k);));)), "JSON");));););Html.
PHP.
// Mēs pieņemam datus, kas nāca Ajax $ ARR \u003d $ _post; $ arr \u003d $ _post; Ja (Filter_var ($ ARR, Filter_validate_Email) && Filter_var ($ ARR, Filter_validate_int)) (ECHO JSON_ENCODE (masīvs ("Statuss" \u003d\u003e 1, "HTML" \u003d\u003e ")Šajā rakstā koda piemēri, kurus es izmantoju, ir nosūtīt aJAX pieprasījumi ap serveri jQuery.. Viņu uzdevumi var būt atšķirīgi, lai jūs varētu izmantot dažādas funkcijas, kas vienkāršo rakstīšanas kodu.
HTML datu pieprasījums, izmantojot slodzes funkciju
Tas ir vienkāršākais Ajax vaicājums, izmantojot jQuery, lai iegūtu HTML datus un ievietotu tos DOM elementā ar ID \u003d "Rezultāts" (elementa saturs tiek aizstāts):
$ ("# Rezultāts"). LOAD ("
Vairāk uzlabotas slodzes versija:
$ ("# Rezultāts"). LOAD ("
Šajā piemērā serveris pārraida arī parametrus un pēc atbildes saņemšanas tas netika pārbaudīts, vai nav kļūdas (piemēram, servera atbilde netika saņemta) un veicot dažādas darbības.
AJAX pieprasa saņemt un publicēt funkcijas
Šīs funkcijas tiek nosūtītas ar AJAX vaicājumu HTTP metodēm un ziņu. Es sniegšu pāris to izmantošanas piemērus.
$ .get ("
Datu pārraide nav nepieciešama, kā arī veikt jebkādas darbības pēc atbildes saņemšanas no servera, t.e. Šajā gadījumā, ja nepieciešams, var noņemt stīgas 3 un 4-6, un tādējādi samazināt kodu.
Servera iegūto datu veidu var norādīt, pievienojot datatipu (skatīt tālāk) - noklusējums tiek automātiski noteikts.
Izmantojot Post ir līdzīga, bet šādā piemērā es izmantoju funkciju zvanu pēc saņemšanas atbildi no servera.
$ .post ("
Faktiski, saņemt un pasta funkcijas ir saīsinātas opcijas AJAX funkciju, kas izskatīs zemāk.
Getjson json dati kļūst
getJson - saīsināts Ajax vaicājuma variants, izmantojot iegūt metodi un saņem datus par JSON. Metode ir ērta, piemēram, lai iegūtu kādu masīvu ar datiem un turpmāko darbu ar to.
$ .GetJson (" Servera pusē programma veido masīvu un pārveido to uz JSON virkni, piemēram, šādi: $ arr \u003d masīvs (); $ ARR \u003d masīvs ("ID" \u003d\u003e 10, "teksts" \u003d\u003e "" testa līnija 1 "); $ ARR \u003d masīvs ("ID" \u003d\u003e 20, "teksts" \u003d\u003e "" testa līnija 2 "); $ ARR \u003d masīvs ("ID" \u003d\u003e 30, "teksts" \u003d\u003e "Testa līnija 3"); Echo json_encode ($ ARR); Līdzīgi STDClass objektus var pārsūtīt no servera, pārveidojot tos uz JSON virkni. Tagad es sniegšu piemēru vienkāršu saņemt vaicājumu funkciju Ajax un saņemt HTML datus. $ .Ajax (URL: " Pieprasījums uz serveri notiek iegūt metodi, jo Parametrs, kas atbild par pieprasījuma veidu, noklusējuma tips ir iegūt. Piemērs, lai izpildītu vaicājuma funkciju AJAX ar pasta datu pārraidi ar metodi un notikumu apstrādi. Zemāk es aprakstīšu papildu iespējaskas visbiežāk tiek piemēroti. $ .Ajax (URL: " Datu nosūtīšana poga:
Piemēram, noklikšķinot uz pogas pogas, vispirms mainās pogas statuss (teksts par to mainās uz "sūtīšanu ...", un tas kļūst aktīvs), kas tiek darīts, izmantojot BEFORESEND parametru. Tad pieprasījums tiek nosūtīts uz vēlamo datu pārsūtīšanu. Pēc tam, kad atbilde ir saņemta no servera, pogas statuss tiek atgriezts tajā pašā (teksta izmaiņas "Sūtīt", kļūst aktīvs). Atbilde tiek iegūta kā JSON dati. Īsi aprakstiet AJAX pieprasījuma nosūtīšanas parametrus, kas visbiežāk var būt noderīgi: Zemāk es sniegšu vēl dažus piemērus, izmantojot Ajax vaicājumus. Paraugs HTML kods:
Vienkāršs Ajax vaicājums, izmantojot jQuery, izmantojot AJAX funkciju
Sarežģītāks AJAX pieprasījuma piemērs, izmantojot jQuery
url
AJAX pieprasījuma adreses nosūtīšana
veids
Nosūtīšanas metode pieprasījums saņemt. vai pastu.
dati.
Dati nosūtīti dati. Tas var būt virkne ar parametriem un to vērtībām par1 \u003d Val1 & Par2 \u003d Val2 & ..., jQuery objekts, piemēram, $ ("ieeja") vai citiem datiem.
datu tips
Datu veids no servera. Var būt HTML, JSON, teksts, skripts un XML.
kešatmiņa.
Caching vaicājumu pārlūks (False - nav kešatmiņa).
async.
Asinhronā vaicājuma izpilde, t.i. Programma turpina izpildīt, gaidot servera atbildi. Ja norādāt nepatiesu, vaicājums tiks izpildīts sinhroni, bet lapa neatbildēs uz kaut ko, kamēr atbilde ir saņemta no servera.
processData.
Konvertējot datus, kas nosūtīti uz URL formātu. Ja ir nepieciešams, lai dati netiktu pārveidoti, instalēt viltus. Piemēram, nosūtot attēlu serverim vai XML datiem.
contentType.
Nosūtīto datu tipa, noklusējuma "lietojumprogramma / x-www-form-urlencoded; charset \u003d UTF-8". Ja norādāt nepatiesu, nosaukums nenosaka veidu, ka tas var būt nepieciešams, piemēram, nosūtot attēlu uz serveri.
bEFORESEND.
Funkcija, kas izpildīta pirms Ajax pieprasījuma nosūtīšanas.
pabeigta.
Funkcija, kas veikta pēc atbildes saņemšanas no servera (jebkura, veiksmīga vai ne).
panākumi.
Funkcija, kas veikta ar veiksmīgu vaicājumu.
kļūda
Funkcija, kas veikta kļūdas gadījumā.
Veidlapas nosūtīšana ar visiem datiem AJAX pieprasījumu, izmantojot jQuery
JavaScript kods:
$ ("# Myform"). Iesniegt (e.preventdefault (E); $ .AJAX ((tips: $ (tas) .attr ("metode"), URL: "
Lai lapa būtu pārstartēta, noklikšķinot uz pogas "Iesniegt", vispirms atcelt standarta pārlūkprogrammas darbības, izmantojot e.preventdefaults () .
Datu parametrā mēs pāriet visus veidlapu laukus, izmantojot $ (tas) .serialize () - Šī funkcija pārvērš visus ievades-s un izvēlētos-s virknē, kas ir piemērota sūtīšanai uz serveri.
Arī šeit izmanto parametru. async: nepatiesa. Tātad, lai, kamēr forma nenotiek uz serveri, kaut ko citu nevarēja nospiest vai izdarīt.
Nosūtot attēlu vai Ajax Query failu, izmantojot jQuery
Faila vai attēla nosūtīšana serverim, neārstējot lapu, bieži notiek. Šajā piemērā 2 mikroshēmu mērogā uzreiz: izvēlieties failu, nospiežot poguko var ierāmēt kā jums patīk un parādīt progresu, pārsūtot failu AJAX pieprasījuma serveris.
hTML kods būs šāds:
#addfile (pozīcija: relatīvais; pārplūdes: slēpta; Platums: 180px; Augstums: 34px;) #load_File (Absolute: Absolute; Tops: 0; Pa kreisi: 0; Platums: 180px; Augstums: 34px; Fonta lielums: 0px; necaurredzamība : 0; Filtrs: Alpha (necaurredzamība: 0);) #Load_File: Hover (kursors: rādītājs;)
Idejas būtība ir tā, ka standarta ievade tiek parādīta pogas augšpusē, lai izvēlētos failu, bet tas ir pilnīgi caurspīdīgs, un tam ir tādas pašas dimensijas kā poga. Tādējādi lietotājs redz pogu pogu, bet, kad kursors noved pie tā, faktiski noved pie ieejas. Attiecīgi, kad viņš nospiež pogu, faktiski nospiež ievades failu izvēli. Lai netiktu mirgot kursoru pēc faila izvēles, fonta lielums ir iestatīts uz 0px.
Tagad JavaScript nosūtiet faila kodu serverim ar progresa displeju:
$ (Funkcija () ($ ("# load_file"). Uz ("mainīt", loadfile);)); Funkcija Loadfile () ($ ("# addfile span"). HTML ("augšupielādēts 0%"); faili \u003d $ ("# load_file"). Faili; VAR FORMA \u003d Jauns Formdata (); Form.append ("augšupielāde"); , Faili); $ .Ajax ((URL: "
Kad fails ir ielādēts serverī, poga tiks parādīta, cik daudz% jau ir pārsūtīta uz serveri. Kad lejupielāde ir pabeigta, pogas nosaukums tiek atgriezts, kā tas bija, un ievades vērtība un fails ir iestatīts tukšs, lai jūs varētu izvēlēties jaunu failu vēlreiz.
PHP servera daļas piemērs (pēc Eugene pieprasījuma):
$ message \u003d ""; Ja (tukšs ($ _ faili ["Augšupielādēt") ["Vārds"]) || $ _Files ["Augšupielādēt"] \u003d\u003d "Nav") ($ Message \u003d "Jūs neesat izvēlējies failu";), ja ($ $ _Files ["augšupielāde"] ["Izmērs"] \u003d\u003d 0 || $ _Files ["Augšupielādēt"] ["Izmērs"]\u003e 9437184) ($ Message \u003d "Faila lielums neatbilst standartiem (ne vairāk kā 9 MB) ";) Citur, ja ($ _files [" augšupielādēt "] [" Tips "]! \u003d" Image / JPEG ") && ($ _Files [" Augšupielādēt "] [" Tips "]! \u003d" Image / PJPEG ") && ($ _Files ["Augšupielādēt"] ["Tips"]! \u003d "Attēls / GIF") && ($ _Files ["Augšupielādēt"] ["Tips"]! \u003d "Attēls / png")) ($ message \u003d "atļauts Lai lejupielādētu tikai attēlus JPG, GIF un PNG. ";) citur, ja (! is_uploaded_file ($ _ faili [" Augšupielādēt ") [" TMP_Name "])) ($ Message \u003d" kaut kas noiet greizi. Mēģiniet lejupielādēt failu vēlreiz. ";) Cits ($ FTYPE \u003d $ _Files [" Augšupielādēt "] [" Type "]; $ fname \u003d" Newname_Image ". ($ FTYPE \u003d\u003d" attēls / GIF "?" GIF ": ($ FTYPE \u003d\u003d" Image / PNG "?" PNG ":" JPG ")); ja (pārvietot_uploaded_file ($ _ faili [" Augšupielādēt ") [" TMP_Name "], $ _server [" Document_root "]." / Files /".$ fname) ) ($ message \u003d "veiksmīgi ielādēts.") Else ($ message \u003d "Kaut kas devās ne, ka uz. Mēģiniet lejupielādēt failu vēlreiz. ";)) Iziet ($ ziņojums);
Informācija par lejupielādēto attēlu tiks iekļauti $ _files ["Augšupielādēt"], jo Skripta fails tika pievienots šādi: Form.Append ("augšupielādēt", failus); Attiecīgi, viss, kas nepieciešams no PHP programmas, ir pārbaudīt, vai fails atbilst paredzamajiem parametriem, pārsūtiet failu uz vēlamo mapi (Piemēram Failu mapē) saskaņā ar šādu nosaukumu (Newname_Image piemērā) un atgrieziet atbildi uz pārlūku, kuru manā piemērā vienkārši tiek parādīts ar lietotāja brīdinājuma (ziņu) komandu;
Situācijas, kurās jūs varat un pat nepieciešams izmantot Ajax vaicājumus, daudz un visas no tām šeit nav izjaukt. Tomēr, ja ir ieteikumi, kādi citi piemēri ir jēga pievienot šeit, rakstiet komentāros.
Es nevaru nosūtīt vienkāršākais pieprasījums Ar servetu, izmantojot jQuery. Bet tajā pašā laikā, ja es nosūtīšu caur formu, viss strādā ar sprādzienu. Zemāk es dodu index.html, no kura es vēlos nosūtīt lietotāja pieteikšanos. Login.js, kurā pieprasījums pats, SerletStore.java pati servlet. Un visa projekta struktūra.
login.js. Vienīgā mazāk darba URL \u003d "http: // localhost: 8080 / testiervlet / post", un tie "/ testiervlet / post", "testservlet / post", "/ post," post "izraisa kļūdu 404.
Funkcija AddNewVoting () (VAR XHR \u003d jauns xmlhttprequest (); VAR BODY \u003d "NAME \u003d" + KOPOUREUROMPONENT ("Vārds") + "un uzvārds \u003d" + EncoSuricomponent ("Uzvārds"); Xhr.open ("Post", " http: // localhost: 8080 / testiervlet / post ", taisnība) xhr.SetrequestHeader (" satura tipa "," lietojumprogramma / x-www-form-urlencoded ") xhr.send (ķermenis);); Funkcija AddnewVoting1 () (VAR Lietotājs \u003d ("FirstName": "Vlad") VAR JSONSTRING \u003d JSON.Sstringify (lietotājs); VAR URL \u003d "http: // localhost: 8080 / testservlet / post"; $ .ax ((URL) : URL, metode: "POST", dati: JSonsting, ContentType: "Application / JSON", kļūda: Funkcija (ziņojums) (ziņojums (ziņojums); Console.Log (JSonObject);), panākumi: funkcija (dati) (var JSONOBJECT \u003d JSON.Parse (dati); Console.Log (JSonObject);), galvenes: ("Pieņemt": "Application / JSON", "Pieņemšana-valoda": "EN", "Cache-Control": "Max- vecums \u003d 3600 "))););
Zvanot otrajai funkcijai, tiek parādīts:
index.html
Servetstore.java.
Importējiet Javax.Servet.ServetException; imports javax.servlet.nnotation.webservlet; Importēt javax.servet.http.httpservlet; importēt javax.servlet.http.httpservletrequest; Importēt javax.servlet.http.httpservletresponse; Importēt java.io.ioxception; Importēt java.io.printwriter; @Webservlet (Name \u003d "Post", Urlpatterns \u003d "/ Post") Publiskā klase Servlet paplašina Httpservlet (@override aizsargāta void dogete (httpservletrequest req, httpservletResponse resp) throws servletException, ioexception (Printwriter Writer \u003d resp.getwriter (); rakstnieks. Drukāt ("Sveiki");) @override Aizsargātais Void Dopost (httpservletrequest Req, httpservletResponse resp) throws servletException, ioException (Super.Dopost (REQ, RESF);))
Projekta struktūra.
Nodarbība, kurā piemēros izskatīs vienkāršu asinhrono AJAX pieprasījumu izveidi serverim. Kā metodi pieprasījumu pārsūtīšanai, mēs izmantosim gan iegūt metodi, gan pasta metodi. Serverī jūs izpildīsiet pieprasījumus, izmantojot PHP skriptus.
Kas ir Ajax asinhronā pieprasījums?
AJAX tehnoloģija galvenokārt tiek izmantota, lai izveidotu asinhrono pieprasījumu uz serveri. Asinhronais vaicājums ir tāds pieprasījums, kas tiek veikts fonā un neliedz lietotājam mijiedarboties ar lapu.
Nosūtot asinhrono pieprasījumu, pārlūkprogramma (lapa) nav "iesaldēta", t.s. Ar to, kā iepriekš, jūs varat strādāt. Bet tad, kā zināt, kad atbilde nāk no servera. Lai to noteiktu, jums ir jāuzrauga Readystate pārlūkprogrammas īpašums (gatavības statuss). Šis īpašums ietver numuru, ar kuru var spriest, kura posma vērtība ir izmeklēšana. Nākamajā tabulā ir redzamas gatavās īpašuma un attiecīgo valstu galvenās vērtības.
Tiem. Izrādās, ka mums ir nepieciešams, lai izsekotu, kad vērtība gatavā īpašuma būs vienāds ar 4. Tas nozīmēs to, ko serveris atbildēja uz nosūtīto. Atlikušās vērtības praksē tiek izmantotas diezgan reti, un dažas pārlūkprogrammas tos nevar atbalstīt.
Lai noteiktu, kādā posmā ir vaicājums, jums ir jāizmanto xmlhtttprequest iepriekšējais objekts. Šis notikums notiek katru reizi, kad mainās gatavās īpašuma vērtība. Līdz ar to šīs notikuma apstrādātājam (unnnament vai nosauktā funkcija) varat reģistrēt darbības, kas pārbaudīs, vai šis īpašums 4 ir vienāds ar un, piemēram, izvades servera reakciju uz lapu.
Izveidojot asinhrono Ajax vaicājumu (iegūt metodi)
Apsveriet asinhrona radīšanu AJAX pieprasījums Piemēram, kas būs pēc lapas lejupielādes, lai uzņemtu lietotāju un parādītu IP adresi.
Lai to izdarītu, jums ir jāizveido 2 faili serverī vienā direktorijā:
- welcome.html - HTML lapa, kas tiks parādīta lietotājam. Tajā pašā lapā ievietojiet skriptu, kas veiks visus nepieciešamos pasākumus Ajax darbam klienta pusē.
- apstrāde.php - PHP fails, kas apstrādās pieprasījumu servera pusē un veido atbildi. Sāksim jaunattīstības veidošanu, izveidojot sveiciena struktūru .html failu
AJAX piemērs
Apsveriet to darbību secību, kas jāveic klienta pusē (JavaScript kodā):
- Metode, ar kuru tiks nosūtīta uz serveri (Get, Post).
- URL, kas apstrādās servera pieprasījumu.
- Pieprasījuma veids: sinhronais (false) vai asinhronais (taisnība).
- Vajadzības gadījumā vārds un parole.
Abonējiet atkārtotu XHR objekta iepriekšējo notikumu un norādiet apstrādātāju kā anonīmu vai nosaukumu funkciju. Pēc tam, izveidojiet kodu šajā funkcijā, kas pārbaudīs atbildes statusu un veiks dažus soļus lapā. Atbilde, kas nāk no servera, vienmēr ir atbildeText īpašumā.
Turklāt ar derīgu Readystate īpašuma numura vērtību 4, varat pārbaudīt statusa īpašuma vērtību. Šis īpašums nosaka vaicājuma statusu. Ja tas ir 200, tad viss ir labi. Pretējā gadījumā radās kļūda (piemēram, 404 - URL netika atrasts).
Mēs nosūtīsim pieprasījumu serverim, izmantojot Send () metodi.
Ja izmantojat iegūt veidu, lai nosūtītu vaicājumu, pēc tam nosūtiet datus parametru Šī metode ne. Tie tiek nosūtīti kā daļa no URL.
Ja izmantojat pasta metodi, lai nosūtītu vaicājumu, tad dati ir jāpārskaita kā parametrs, izmantojot SEND () metodi. Turklāt pirms šīs metodes izsaukšanas, jums ir jāinstalē satura tipa galvene, lai serveris zinātu, kura kodēšana atnāca pie viņa pieprasījuma un varēja to atšifrēt.
Sagatavojiet datus, kas nepieciešami, lai izpildītu pieprasījumu serverī. Ja jums nav nepieciešami dati, lai izpildītu serverī, šo soli var izlaist.
Izveidojiet mainīgo, kas satur XHR objekta piemēru (XMLHTTTPREQUEST).
Konfigurējiet pieprasījumu, izmantojot atvērto () metodi.
Ir norādīti šādi parametri:
Skriptu elementu saturs:
// 2. Izveidojiet pieprasījumu var pieprasīt \u003d jaunu xmlhttprequest (); // 3. pieprasījuma iestatīšana. Pieprasiet vaicājumu ("iegūt", "apstrāde.php", taisnība); 4. Abonējiet iepriekšējo readyStechange notikumu un apstrādājot to, izmantojot anonīmu funkciju pieprasījumu 4) && (pieprasījums.Status \u003d\u003d 200)) (Piemēram, izņemiet XHR objektu konsolei.log pārlūkprogrammas konsolei; // un atbilde (teksts), kas nāca no servera brīdinājuma konsolē.Log logs (pieprasījums )))); // 5. pieprasījuma nosūtīšana pieprasījumam. Send () serveris;
Rezultātā Welcome.html fails būs šāds kods:
AJAX piemērs
Uz servera (izmantojot PHP):
- Mēs saņemam datus. Ja dati tiek nosūtīti cauri Get metodi, tad no globālās masīva $ _get ["Vārds"]. Un, ja dati tiek pārraidīti, izmantojot pasta metodi, tad no globālās masīva $ _post ["Vārds"].
- Izmantojot šos datus, izpildiet dažas darbības serverī. Kā rezultātā mēs saņemam kādu atbildi. Atsaukt to ar atbalsu.
Izveidojot asinhrono Ajax vaicājumu (pēc metode)
Mainīt iepriekš minēto piemēru. Tagad Ajax vaicājums serverim tiks veikta pēc pogas nospiešanas. Viņš saņems vārdu, kas ievadījusi lietotājam ievades elementā un nosūta to caur servera pasta metodi. Pēc atbildes saņemšanas no servera, nomainiet tos par DIV elementa saturu lapā.
AJAX piemērs
