Iesākumam ar AJAX

Šī rokasgrāmata sniedz fona informāciju par Ajax, un pēc tam ārzemju tiesības un kļūst jums sākās ar piemēriem.

JavaScript ir bijusi galvenais izmantošanas XMLHttpRequest objektiem labs gadu skaits, tagad, bet tikai nesen, tomēr tas sāksies, lai iegūtu dažus "slava". Daudzi no ruckus ir saistīts ar daudziem Advanced Web pieteikumu ņemot Web izstrādātājiem, ka uzskata, ka drool un vēlas savā vietā, lai tiem pašiem precīzu Advanced prasības / funkcijas. Bet daži tā arī ir saistīts ar grupu personu AdaptivePath, kas ir nosaukti šo pieteikumu Ajax

Ajax Beginners: Kas visā pasaulē ir Ajax?

Īsumā? Nu Ajax ir šķīdums uz Web saskarnes.

Biežāk, interneta lietotājs nonāk daži dati vai padara vienkāršu izvēli, un klikšķu pogu pabeigta šī izvēle vai datu ierakstu un nosūta datu ar serveri. Serveris, steidzīgi ievēro datus un nosūta atpakaļ visu jauno interneta lapu. Kam ir pārlādēt lapu katru reizi, kad vēlaties kaut ko darīt ir ļoti kaitinošas, atdalošs un tas ir ļoti daudz laika, lai lietotājam. XMLHttpRequest rodas pārlūku servera mijiedarbību, lai aiz ainas, lai lietotājs var tikai glabāt uz rotaļājoties ar tās pašas lapas, pat elementi lapā ir runā ar serveri!

Ar JavaScript mēs esam vienmēr ir spējīgs servera puses skriptu bez kaut kas notiek pārlūku, izmantojot dažus klasisko triku mūsu piedurknēm.

Caching formā datus uz failu ar JavaScript serverī, ir laba, bet tas parasti neatgriežas visu noderīgo informāciju, JavaScript, kas aicina tā, lai to efektivitāti ir ļoti ierobežots. Ajax, tomēr var saņemt pilnu paku datu atpakaļ no skriptu tā zvani. Tādēļ, "XML" nosaukuma daļas - kas patiešām ir vienkārši tur sagaida no veida, veida, piemēram, "Java" daļa, JavaScript, jo, atpakaļ datus var teksta vai jebkas, kas jums patīk, ja XML nav jūsu izvēle.

Tas vien paver tik daudz aizraujošas iespējas. Katrs formā iesniegšanas, katra JavaScript notikums, un neatkarīgi cits pieteikums, tagad var mijiedarboties ar servera puses datubāzēm un apstrādes jaudas! Datu izguve, paroles autentifikāciju, attēlu paaudzes - Jums tikai nosaukums tam, Ajax var aktivizēt to.

Radīt Ajax praksē

Vienīgais, kas ierobežo Ajax uzlabotas Web programmu ir jūsu iztēle un pārlūka atbalstu. Mozilla balstītas pārlūkiem var darīt to, Safari, un jaunākiem versijas Internet Explorer un Opera 8, bet ne Opera 7. Tas ir labāk slotā alternatīvā veidā, kā to izdarīt lietas tiem lietotājiem, kuri nav tik asprātīga, kā jūs ceram, lai tos. Arī Internet Explorer nav lietas nedaudz savādāk (vairums noteikti) no visiem pārējiem pārlūkiem, tāpēc tas ir diezgan būtiski, lai darbu kodu, lai "apnicīgs 80% no iedzīvotājiem, kas balstās uz Explorer.

Tagad ar aizraujošu daļa! Pieņemsim radīt vienkārša programma, kas var pieņemt ievades no lietotāja, caurlaides, lai daži PHP uz servera, kas pārbauda tā pret datubāzē, un atgriež rezultātu pārlūku lietots. Mēs uzņemt to trīs daļās.

Pirmkārt, mums ir nepieciešams HTML formā. Kā jūs "var redzēt turpmāk:

 <html> 
  <head> 
   <title> pārskatu </ nosaukums> 
   <script type='text/javascript' src='xhr.js'> </ script> </ galvas> <body> <form action="fallbackpage.php" method="post"> 
   <p> Sveiki, studentu.  Lūdzu, ievadiet savu eseju šeit: <textarea name="essay" id="essay"> 
   </ Textarea> <ievades veids = "iesniedz" name = "iesniedz" vērtība = "Iesniegt" onclick = "atgriešanās 
   pakāpes (this.form.essay.value); "> 
   </ p> 
   </ form> 
   </ body> 
   </ html

xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Piezīme: lietotājiem bez pienācīgas atbalstu mūsu skriptu (ko sauc xhr.js), formu būs tikai vienkārši iesniegt atkāpšanās lapu fallbackpage.php. Ok, tas ir, ja JavaScript ir, un mēs jāņem tas lēni.

  funkciju pakāpes (eseju) (

Pirmā lieta, mums ir jādara tikai tas sāktu objekts. Ir divi veidi, mums ir darīt, dažādiem pārlūkiem.

  / / Mozilla versija 
      ja (window.XMLHttpRequest) ( 
          xhr = jaunā XMLHttpRequest (); 
      ) 
      / / IE versija 
      cits ja (window.ActiveXObject) ( 
          xhr = jaunā ActiveXObject ( "Microsoft.XMLHTTP"); 
      )

Mēs tad izvairīties no lietotāja ievadierīces, lai to URL droša:

      eseja = encodeURIComponent (eseju);

un izmantot atvērtā metode objekts atvērt jaunu savienojumu ar PHP skriptu:

      xhr.open ( "pēc", "grade.php");

Metode nepieciešami divi argumenti: pirmkārt, HTTP metodi (GET vai POST); otro, URL skriptu. Ātra HTTP galvenes apgalvo, skriptu par to, ko tas saņem un pēc tam sūtīt metode atspoguļo faktisko pieprasījumu:

   xhr.setRequestHeader ( 
        "Content-Type", 
        "pieteikuma / x-www-form-urlencoded; charset = UTF-8 '); xhr.send (eseju);

Šis pēdējais solis nav nepieciešams GET pieprasījumus, kas paredz, ka visi dati var būt ietverti vaicājumā virkni URL.

Saņemtu gala rezultāti

Mēs esam beidzot gatava, lai redzētu, vai HTTP pieprasījuma mēs, kas strādā. readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. Ar readyState īpašuma skaitu no nulles laikā pieprasījumu, un rāda, 4, kad serveris lapa ir ielādes veiksmīgi.

  Xhr.onreadystatechange = funkcija () ( 
        ja (xhr.readyState == 4) (

responseText property, which contains a string. Ja patiešām faktisko pieprasījuma strādāja, tad mēs varam iegūt produkcijas servera puses skriptu, ko meklēšanu ar responseText īpašumu, kas satur virkni. responseXML property, which can hold a full document object of XML data, is an option also accessible. Par vairāk sarežģīts servera skriptu produkciju, kas responseXML īpašuma, kas var turēt pilnu dokumenta mērķis XML datus, ir iespēja arī pieejama.

  Pakāpes = xhr.responseText; 
        trauksmes ( "Nicas eseju. Jūsu marka ir" + pakāpes); 
      ) 
      atgriezties viltus; 
   )

Noslēgumā, trešā komponents sastāv no PHP skriptu, kas pamatā dzīvību uz servera un jāgaida pacietīgi par javascript, lai varētu pāriet tā daži sulīgs datiem, lai tā varētu zelt. Šis piemērs izmanto dažas PHP, bet jebkurā valodā, kas jums patīk - Ruby, Perl, C, ASP - var risināt Jūsu vajadzībām, kā tas ir labi. grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Pamatā šim piemēram skriptu ir fiziska valodas funkciju sauc grade_essay (), kas kategorijās skolēnu esejas no 1 līdz 100, bet es redact, ka daļu, lai saglabātu vietu.

   <? PHP 
   funkciju grade_essay ($ eseju) ( 
        atgriezties strlen ($ eseju); 
   ) 
   $ eseju = urldecode (eksplodēt (failu ( "php: / / ievades'))); 
   $ pakāpes = grade_essay ($ eseju); 
   echo $ pakāpes; 
  ?>

php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. PHP: / / ievades grabs Post datus, kas tiek likts uz virkni, dekodēt un nodots gudrā šķirošanas algoritmu. Algoritmu atgriež ciparu kategorijā. echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Visbeidzot, mēs tikai izejas pakāpes ar ECHO - parasti, tas displeja pārlūku, bet kopš PHP skriptu darbojas "aiz ainas, ka" stīgu rezultāts ir vienkārši atpakaļ JavaScript, ka sauc par to. text/xml . Ja Jums ir jābūt strukturētiem datiem, XML dokuments būtu izejas ar atbalss paziņojumu tikai pašā veidā, bet saturs tipa izejas lapu pamatā ir jābūt norādītam, text / xml.

Ko lietotājs uzskata, ka tas ir: viņa / viņš veidiem, to eseju uz teksta apgabalā, kas pārlūku, klikšķu Iesniegt un momenti brīdinājumu kastē NOP līdz pat dod viņam gala pakāpes par eseju. Invisibly, esejas ir nosūtīts uz servera, lasīt un izvērtē komanda PHP elves, un neizbēgami atjaunojās ar pakāpes, kas ne reizi, kam ir pārlādēt lapu. Lietotājs var modificēt viņas eseju un atkārtoti tā nepārtraukti.

Un tas ir vispārējo būtības gandrīz burvju XMLHttpRequest objekts! Šis piemērs ir diezgan vienkāršs un taisni uz priekšu, bet izmantošanai objekts var būt ļoti, multi gudrs.

Lai iegūtu papildu iedvesmu un lielu piemēru ģeniāls Ajax pieteikumu varat momentāni vadīt prom no SimpleHelp.Net un apmeklēt iGoogle , Pageflakes , Netflix un Netvibes .