AJAX (en förkortning för Asynchronous JavaScript och XML) är en teknik för att interagera med en server utan att ladda om sidan. Eftersom du inte behöver uppdatera hela sidan varje gång, ökar hastigheten på sajten och dess användarvänlighet.
Teknikens historiaMånga av de teknologier som används i AJAX har funnits sedan 1990-talet. Sålunda använde Internet Explorer 3 1996 HTML IFRAME-elementet, och 1998 Microsoft företag föreslog Remote Scripting-metoden.
Själva termen AJAX användes först av Jesse James Garrett den 18 februari 2005 i artikeln "Ajax: A New Approach to Web Applications." Dess författare är en av grundarna och chefen för Adaptive Path. I sin artikel beskrev han principen för att utveckla webbapplikationer, som användes på den tiden i Google kartor och Gmail. Enligt honom var detta ett "grundläggande genombrott i de möjligheter som finns tillgängliga i webbapplikationer."
Samtidigt förklarade Garrett vad AJAX är, gav ett namn åt detta tillvägagångssätt och uppmärksammade direkt den framväxande trenden. Allt detta gjorde det möjligt att föra utvecklingen av webbapplikationer till en fundamental nivå ny nivå. Nu kan vi på vår display se resultaten av "bakgrunds"-utbytet av data mellan webbläsaren och servern.
Genom att sidan fungerar kan du direkt se att detta är en AJAX-sajt. Tidigare var användaren tvungen att klicka på knappar och följa länkar för att bekräfta sina handlingar. Och nu reagerar sidan själv på datainmatning på rätt sätt. Som ett resultat minskar tiden för att kommunicera med webbplatsen märkbart. Användaren kommunicerar med en responsiv webbapplikation. För hans normal drift Allt du behöver är en webbläsare som stöder JavaScript och en internetanslutning.
En korrekt konfigurerad webbapplikation som använder denna teknik kommer att fungera på samma sätt som ett vanligt program på en dator.
Hur AJAX fungerarFörstå grundprincipen AJAX fungerar Bilden nedan hjälper till:
Tekniken kan delas in i fyra huvudsteg:
För att utbyta data på sidan skapas ett XMLHttpRequest-objekt som kommer att fungera som en mellanhand mellan webbläsaren och servern. Förfrågningar kan skickas i en av två typer - GET och POST. I det första fallet görs begäran till ett dokument på servern och webbadressen till webbplatsen skickas till det som ett argument. För att förhindra att begäran avbryts kan du använda JavaScript Escape-funktionen. För stora volymer data används POST-funktionen.
Serverdelen bearbetar inkommande data och skapar utifrån den ny information som kommer att skickas till klienten.
AJAX använder asynkron dataöverföring. Detta tillvägagångssätt tillåter användaren att göra olika åtgärder under "bakgrunds"-utbytet av information med servern. Användaren meddelas om pågående processer så att han inte tror att sajten är frusen eller att någon form av fel har inträffat.
Servern använder vanlig text, XML och JSON som svar. I det första fallet kan resultatet omedelbart visas på sidan. När ett XML-dokument tas emot konverteras det vanligtvis till HTML och visas på skärmen. Om svaret kommer in JSON-format, bör klienten exekvera den mottagna koden. Efter detta kommer ett JavaScript-objekt att genereras.
Fördelar med AJAX-teknikAtt minska trafiken. Mängden data när man arbetar med webbapplikationer minskar avsevärt. Detta beror på att du inte behöver ladda ner hela sidan, det räcker med att bara ta emot den ändrade delen eller uppsättningen av data. JavaScript ändrar sedan innehållet på sidan i webbläsaren.
Minska belastningen på servern. Korrekt användning av AJAX gör att du kan minska belastningen på servern avsevärt. Till exempel kan du använda en mall för att skapa permanenta webbplatselement: logotyp, meny etc. Dessutom för att tillfredsställa specifik begäran du behöver inte uppdatera hela sidan. Till exempel när användaren röstar på en webbplats väljer användaren önskat objekt, trycker på en knapp, informationen skickas till servern, varefter ett svar tas emot. Under hela denna tid uppdateras inte sidan.
Öka hastigheten på tjänsten. Eftersom endast innehållsdelen laddas ser användaren resultatet av sina handlingar mycket snabbare.
Brett utbud av möjligheter. Användningen av AJAX är inte begränsad till formulär. Vid till exempel registrering på vissa tjänster anger användaren en inloggning – och efter ett ögonblick får han information om huruvida han är ledig eller inte. Även vid introduktion Sök fråga Google erbjuder flera frågealternativ efter varje bokstav eller ord. Detta förbättrar avsevärt bekvämligheten att arbeta med webbplatser.
Nackdelar med AJAXJavaScript måste vara aktiverat. Webbsidor som skapats med AJAX-teknik kan inte fungera normalt när de är inaktiverade JavaScript-stöd. Du kan inte placera bokmärken på dem, och sökmotorer kan inte alltid indexera dem.
Oförmåga att integrera med webbläsarverktyg. När sidor genereras dynamiskt visar webbläsaren dem inte i webbhistoriken, så "Tillbaka"-knappen hjälper dig inte att gå till föregående steg i arbetet. Detta problem kan dock lösas genom speciella manus. Det finns inte heller något sätt att sätta ett bokmärke på det önskade materialet.
Försämrad säkerhet. En anmärkningsvärd nackdel med AJAX är också dess säkerhetsluckor, eftersom källkoden kan läsas av vem som helst i en webbläsare.
Oförmåga att bestämma antalet träffar. Mekanismen för dynamisk laddning av innehåll förvränger statistikdata märkbart. Faktum är att i det här fallet, när användaren går igenom olika sidor, utförs inte operationen att ladda om dem. Och en vanlig räknare registrerar inte övergången. För stora projekt leder en sådan artificiell minskning av antalet visningar till en betydande inkomstminskning.
Problem med innehållsindexering av sökrobotar. Ofta innehållet som läses in på sidor på ett dynamiskt sätt, visar sig vara otillgänglig för robotar. Därför rekommenderar experter att använda dynamisk laddning för strikt definierade delar av innehåll. Vart i dåligt inflytande AJAX på SEO kan minimeras.
AJAX-indexering av sökmotorerSom nämnts ovan är AJAX-sidor dåligt indexerade. Därför rekommenderar experter att ge webbplatsen möjligheten att ta emot dynamiskt laddad information direkt från länkar. Detta teknisk lösning kommer att ge en möjlighet korrekt visning webbplatser för de användare som av någon anledning inte använder JavaScript.
När du skapar webbplatser att arbeta med dynamiskt innehåll Det är värt att kontrollera att sökrobotar inte bara korrekt bestämmer innehållet på sidor, utan också känner igen reglerna för webbplatsnavigering och använder dem i processen att organisera den mottagna informationen.
Att minimera Negativ påverkan AJAX för SEO, webbplatsen kan optimeras enligt följande:
Till exempel måste länken http://www.site.ru/#uslugi konverteras till http://www.site.ru/#!uslugi.
Webbplatser som använder AJAX-teknik kan ha ett sämre rykte sökmotorer i jämförelse med liknande resurser utan dess användning. Bland huvudorsakerna:
- sannolikheten att sökrobotar inte tar hänsyn till allt innehåll;
- onyttig adressfält(alla sidor har samma adress);
- Roboten kan se sidinnehåll som inte är det som visas för användaren.
Dessa negativa aspekter kan undvikas om du använder AJAX för dess avsedda syfte - för dynamisk interaktion med servern. En del av en artikel med nyckelord ställs till exempel inte in dynamiskt i början av sidan.
Dynamiska sidor kan cachelagras och renderas som statiska sidor. För AJAX-samtal är det bättre att använda ett klassiskt ankare snarare än onClick-händelsen.
Således kommer korrekt användning av AJAX att öka hastigheten på webbplatsen och dess bekvämlighet för användarna, utan att offra sökmotorernas vänliga attityd.
AJAX står för Asynchronous Javascript And XML, vilket betyder Asynchronous JavaScript och XML. AJAX låter dig uppdatera HTML-sidadata utan att ladda om den helt. Dessutom gör tekniken att du kan arbeta med internetsidor asynkront. Det vill säga, medan JavaScript interagerar med webbservern kan användaren fortsätta att arbeta med webbsidan.
Ett exempel på att använda AJAX-teknik är Googles förslag. Google arbete Det som föreslås är att medan du anger ett ord eller en fras för att söka, kommer JavaScript åt databasen Googles data och ber henne om de 10 mest populära frågor, som börjar med samma bokstäver. Och visar sedan den här listan utan att ladda om sidan.
För att överväga principerna för driften av AJAX-teknik kommer vi att implementera en mekanism som liknar Google Suggest på vår webbplats. Låt oss säga att vi har en researrangörswebbplats. Webbplatsen har ett sökfält för förslag efter landsnamn. Låt oss lägga till en rullgardinslista till det här fältet med autokomplettering baserat på de angivna bokstäverna. Låt oss börja lösa det här problemet. Jag ska genast säga att för att implementera denna uppgift behöver du kunskap om HTML och lite JavaScript (du behöver inte vara expert). PHP kommer att användas som serverspråk.
Låt oss först skapa ett sökformulär. För att göra detta, skapa en fil index.html på din webbserver, öppna den med valfri textredigerare och ange följande HTML-kod.
Sök efter erbjudanden.
Semester till havs
Sök efter erbjudanden:
I denna lista skapade vi ett sökformulär med ett textinmatningsfält och en skicka-knapp, och skapade ett div-lager för att visa resultaten. En ajax.js-fil bifogas också till denna sida, som kommer att innehålla JavaScript-funktioner.
Därefter kommer vi att skriva JavaScript-funktioner som skickar förfrågningar till servern och uppdaterar sidan. För att inte behöva överbelasta HTML-dokumentet helt behöver vi Ajax-teknik. Så låt oss börja. Skapa en ajax.js-fil, placera den i samma mapp som index.html och öppna den i en textredigerare.
Först måste du skapa ett objekt som skickar förfrågningar till servern och tar emot svar. I olika webbläsare detta objekt skapas på olika sätt. Vi kommer att skriva universell funktion, som borde fungera i olika webbläsare. Lägg till följande i filen ajax.js JavaScript-kod.
/*variabel för att lagra förfrågningsobjektet*/
var begäran;
/*funktion för att skapa ett förfrågningsobjekt*/
funktion CreateRequest()
{
var request=null;
Prova
{
//skapa ett förfrågningsobjekt för Firefox, Opera, Safari
request = new XMLHttpRequest();
}
fånga (e)
{
//skapa ett begäranobjekt för Internet Explorer
Prova
( request=new ActiveXObject("Msxml2.XMLHTTP");
}
fånga (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
returbegäran;
}
Du måste visa en resultatlista varje gång du ändrar sökfältet. För att göra detta kommer vi att använda en JavaScript-händelsehanterare. Vi kommer att upptäcka ändringar vid varje tangentbordshändelse. För att göra detta lägger du till attributet onkeyup="KeyPress(this.value)" på raden där ett sökfält med namnet land skapas i vår HTML-kod för filen index.html:
Det vill säga när någon tangent trycks ned kommer JavaScript KeyPress()-funktionen att anropas, till vilken tecknen som anges i söksträngen skickas som en parameter. Funktionen KeyPress() måste utföra följande uppgifter:
- Skapa nytt objekt begära genom att anropa CreateRequest()-funktionen;
- Generera webbadressen du behöver ansluta till för att få resultat;
- Konfigurera ett begäranobjekt för att upprätta en anslutning till servern;
- Skicka en förfrågan till servern.
Låt oss börja skapa KeyPress()-funktionen. För att skapa ett nytt förfrågningsobjekt behöver vi helt enkelt tilldela förfrågningsvariabeln värdet som returneras av den tidigare skapade CreateRequest()-funktionen. Och för att vara på den säkra sidan, låt oss kontrollera begäranvariabeln. Om det är NULL, kunde begäran objektet inte skapas. Så här kommer JavaScript-koden för att lösa det här problemet att se ut:
Funktion KeyPress(term) (
request=CreateRequest();
if(request==null)
{
lämna tillbaka;
}
}
Därefter måste du tala om för förfrågningsobjektet vilken JavaScript-funktion som kommer att behandla serversvaret. För att göra detta måste du tilldela egenskapen onreadystatechange namnet på motsvarande funktion. Denna fastighet talar om för webbläsaren vilken funktion som ska köras när begärans redo-läge ändras. Vår LoadResults() funktion kommer att bearbeta svaret. Lägg till följande rad i funktionen: request.onreadystatechange = LoadResults; . Observera att det inte finns några parenteser efter funktionsnamnet.
Låt oss sedan ställa in anslutningen. För att göra detta måste du först tala om för objektet vart den här begäran ska skickas. Låt oss skapa URL-adressen till skriptet som beräknar resultaten och tilldela den till URL-variabeln. Låt oss säga att php-skriptet country.php kommer att ansvara för att beräkna resultaten på serversidan. Då kommer vår URL att se ut så här: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , där variabeln s innehåller de tecken som anges i sökfältet, och sid tilldelas slumpmässigt nummer för att förhindra att webbläsaren cachelagrar sidan. Lägg till den här raden i huvuddelen av KeyPress()-funktionen.
Därefter måste du initiera anslutningen med hjälp av open("GET", url, true) metoden för begäranobjektet. Denna metod har tre parametrar. Parametern "GET" anger hur data ska skickas till servern. Vi använder metoden GET eftersom tecknen som skrivs in i söksträngen skickas till serverskriptet via URL:en. Den andra parametern anger URL:en för serverskriptet. Vi lagrar url-adressen i url-variabeln, så vi specificerar denna variabel i den andra parametern. Den tredje parametern kan ha två värden: true - asynkront läge och false - synkront läge. Vår applikation kommer att fungera i asynkront läge, så vi anger true . Efter att ha initierat anslutningen måste du skapa anslutningen och fråga efter resultaten. För att göra detta behöver du helt enkelt anropa send(null)-funktionen på förfrågningsobjektet. Null-parametern indikerar att begäran inte innehåller några data.
När du har gjort alla ändringar kommer KeyPress(this.value)-funktionen att se ut så här:
Funktion Tangenttryck (term)
{
/*skapa ett nytt förfrågningsobjekt*/
request=CreateRequest();
/*om det inte var möjligt att skapa ett förfrågningsobjekt, slutför vi exekveringen av funktionen*/
if(request==null)
{
lämna tillbaka;
}
/*bilda webbadressen*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*ställ in ett begäranobjekt för att upprätta en anslutning*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/*skicka en begäran till servern*/
request.send(null);
}
Så anslutningen upprättas, begäran skickas, servern bearbetar data och returnerar resultatet. Därefter måste du få ett svar, bearbeta och visa resultaten på en webbsida. Allt detta kommer att göras av funktionen LoadResults() som kommer att anropas när statusen för beredskapsförfrågan ändras. Låt oss titta på hur den här funktionen ska fungera.
Först måste du kontrollera Nuvarande tillstånd beredskap. Ready-statusen lagras av begäranobjektets readyState-egenskap. När begäran har behandlats är redo-statusen 4. Dvs. om request.readyState == 4 kan du bearbeta svaret:
Funktion LoadResults()
{
/*bearbeta svaret*/
}
}
Funktion LoadResults()
{
/*Kontrollerar beredskapsstatus*/
if (request.readyState == 4)(
/*Kontrollera förfrågans status*/
if (request.status == 200)(
/*allt är bra, bearbetar svaret*/
}
}
}
Om kontrollen av status och status för begäran har slutförts framgångsrikt kan du börja bearbeta data som tas emot från servern. Du kan ta emot data på två sätt: request.responseText - ta emot data i form av text, eller request.responseXML - ta emot data i form av ett XMLDocument-objekt. Låt oss säga att vår server skickar ett svar i formuläret textlista länder separerade med kommatecken. Då får vi data: var answer = request.responseText . Därefter bearbetar vi data och visar dem i ett lager med id="searchresults" .
Jag kommer inte att gå in på detaljer om databehandling, utan kommer helt enkelt att ge funktionskoden med kommentarer:
Funktion LoadResults()
{
/*Kontrollerar beredskapsstatus*/
if (request.readyState == 4)(
/*Kontrollera förfrågans status*/
if (request.status == 200)(
// gör sökresultatlagret synligt
ShowDiv("sökresultat");
//rensa resultaten
ClearResults();
//hämta data
var svar = request.responseText;
//konvertera en textsträng till en array
var array = answer.split(",");
//bestäm storleken på arrayen
var count = array.length;
//hitta sökresultatlagret
//skapa en tabell i objektmodell dokumentera
var tbl = document.createElement("tabell");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
// iterera genom alla element i arrayen
för(var i = 0; i (
var text = array[i];
//skapa tabellrader och lägg till dem i sin kropp
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//ställ in attribut och funktioner för celler
tblCell.onmouseover = function())(this.className="mouseOver";);
tblCell.onmouseout = function())(this.className="mouseOut";););
tblCell.setAttribute("kant", "0");
tblCell.onclick = function())(Ersätt(detta););
tblNode = document.createTextNode(text);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//lägg till hennes kropp på bordet
tbl.appendChild(tblbody);
//placera tabellen i lagret
div.appendChild(tbl);
}
}
}
Och ytterligare ett par JavaScript-hjälparfunktioner för att visa resultat på skärmen:
/*gör lagret med resultaten synligt*/
funktion ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="visible";
}
/*gör lagret med resultatet osynligt*/
funktion HideDiv(id)
{
if (document.layers) document.layers.visibility="hide";
else document.getElementById(id).style.visibility="hidden";
}
/*tydliga resultat*/
funktion ClearResults()
{
/* Ta bort befintliga rader från resultattabellen
var div = document.getElementById("searchresults");
var räknare = div.childNodes.length;
for(var i = räknare-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Ersätt värdet i inmatningsfältet med värdet som valts med musklick*/
funktion Ersätt(tblCell)
{
var inputbox = document.getElementById("country");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv("sökresultat");
}
Även i vår html-fil index.html mellan taggarna och lägg till följande CSS-regler:
.mouseOut( bakgrund: #ffffff; färg: #0000000; )
.mouseOver( bakgrund: #ccccff; färg: #0000000; )
tabell (bredd:250px)
Det är allt. I den här artikeln tittade vi på grunderna i Ajax-teknik med ett exempel.
Från författaren: den här artikelserien är utformad för att introducera front-end-designers och nybörjarutvecklare till AJAX-tekniken, den huvudsakliga front-end-tekniken. I den första lektionen kommer vi att beröra grunderna i AJAX, börja lära oss olika detaljer om denna teknik, lära oss vad det är, hur det fungerar och vad dess begränsningar är.
Låt oss börja! Observera: detta förutsätter att du redan känner till grundläggande front-end-teknologier som HTML och CSS.
Vad är AJAX?AJAX står för Asynchronous JavaScript och XML. AJAX hänvisar till mer än en teknik, och den är inte ny. Det är faktiskt en grupp tekniker (HTML, CSS, Javascript, XML, etc.) som är knutna samman för att skapa moderna webbapplikationer.
MED använder AJAX klienten (webbläsaren) kommunicerar med servern och begär data från den. Det mottagna svaret bearbetas och ändringar görs på sidan utan att den laddas om helt. Låt oss titta på AJAX akronym:
"Asynkron" betyder att när klienten begär data från servern så fryser inte webbläsaren förrän den får ett svar. Tvärtom kan användaren navigera genom sidorna. När servern har returnerat svaret, bakgrund svaret börjar bearbetas av motsvarande funktioner.
"JavaScript" är ett programmeringsspråk som används för att skapa ett AJAX-begäranobjekt, analysera det svaret och uppdatera sidans DOM.
Klienten använder XMLHttpRequest eller XHR API för att skicka en begäran till servern. API ( mjukvarugränssnitt) är en uppsättning metoder som definierar reglerna för kommunikation mellan två berörda parter. Däremot kan data som kommer från en AJAX-förfrågan vara i vilket format som helst, inte bara XML.
Hur AJAX fungerarFör att förstå den grundläggande arbetsprincipen, låt oss ta en titt på bilden nedan:
Bilden beskriver ett standard AJAX-skript:
Användaren vill se fler artiklar, och han eller hon klickar på önskad knapp. Denna händelse utlöser AJAX-anropet.
Begäran skickas till servern. Olika uppgifter kan skickas med begäran. Begäran kan skickas till en statisk fil (till exempel exempel.php) som lagras på servern. Du kan också köra dynamiska skript (functions.php), i varje skede av vilka kommunikation kommer att ske med databasen (eller annat system) för att hämta nödvändig information.
Databasen skickar tillbaka de begärda artiklarna till servern. Och servern skickar dem till webbläsaren.
JavaScript analyserar svaret och uppdaterar en del av DOM (sidstruktur). I vårt exempel kommer endast sidofältet att uppdateras. Resten av sidan förblir oförändrad.
Med detta i åtanke kommer du att förstå varför AJAX är en så viktig teknik inom modernt internet. Genom att utveckla applikationer som kör AJAX kan vi kontrollera stora mängder data som laddas ner från servern.
Liveexempel med AJAXAJAX finns överallt nu. För att övertyga dig om detta kommer vi kort att titta på flera populära sajter som utnyttjar fullt ut denna teknik.
Låt oss först titta på hur Facebook och Twitter fungerar. När du rullar ner på sidan laddas AJAX nytt innehåll. Även om du gillar eller ogillar frågor och svar på Stack Overflow, igen fungerar AJAX. Så fort du skriver något i sökfältet på Google eller Youtube utlöses flera AJAX-förfrågningar.
Om vi vill kan vi dessutom spåra dessa förfrågningar. Till exempel, i Chrome-konsolen kan detta göras genom att klicka Högerklicka musen och aktivera funktionen Log XMLHttpRequests.
Hur man skapar en förfråganVi har redan sagt ovan att XMLHttpRequest API används för att skapa en begäran. Dessutom har jQuery, det mest populära JS-biblioteket, olika Ajax-funktioner och -metoder. I en serie artiklar ska vi titta på olika exempel i ren JS och JQuery för att skicka förfrågningar till servern.
Begäran hanteringData som hämtas från servern kan lagras i olika format. XML, JSON, JSONP, vanlig text och HTML.
XMLXML (Extensible Markup Language) är ett av de mest populära formaten för att utbyta data mellan applikationer. Formatet liknar HTML och använder taggar som struktur. Det finns dock inga färdiga taggar i XML, vi sätter dem själva. Exempel på struktur nedan:
Mike Mathew Australian Engelska Spanska Franska Ryska
< person > < name >Mikrofon< / name > < surname >Mathew< / surname > < nationality >australiensisk< / nationality > < languages > < language >engelsk< / language > < language >spanska< / language > < language >franska< / language > < language >ryska< / language > < / languages > < / person > |
Nätverket är fullt webbredaktörer, som du kan skapa XML-dokument med. Min favorit är: XMLGrid.net. I den här editorn ser vårt exempel ut så här:
JSON (JavaScript Object Notation) är ett annat populärt datautbyteformat. I JSON skulle exemplet ovan se ut så här:
( "namn" : "Mike", "efternamn" : "Mathew", "nationalitet" : "australisk", "språk" : ["engelska", "spanska", "franska", "ryska"] )
"name" : "Mike" , JSON Editor OnlineI JSN-editorn kommer vårt exempel att se ut så här:
Innan du börjar använda AJAX måste du känna till begränsningarna. Vi kommer bara att överväga två problem. Felet visas när begäran refererar till en lokal fil. I det här exemplet ville vi komma åt data från lokal fil(Demo.json), som inte lagras på servern. För att lösa det här problemet kan du installera en lokal server och lagra filer där. Andra problemet: Felet visas när data från begäran lagras på en annan domän än vår sida (felet är känt som domänbegränsningsregeln). I vårt exempel lagras data på lokal server, och sidan lagras på Codepen-servern. Lyckligtvis kan dessa fel lösas. Ett sätt är CORS från W3C. Men denna mekanism kräver att ändringar görs i konfigurationen av filer på servern. Till exempel beskriver den här sidan hur du konfigurerar Apache-server. Ett annat sätt är JSONP (JSON med stoppning). SlutsatsDenna recension gav dig en uppfattning om vad AJAX är, var du kan ha stött på det tidigare och vilka potentiella problem som finns. Vi har också granskat de mest populära formaten för datautbyte. I nästa artikel kommer vi att titta på ett fungerande exempel. Vi ses! |
Nuförtiden sker en mycket aktiv utveckling (och till och med användning) av ny teknik på Internet. En sådan teknik är AJAX.
Vad är AJAX?AJAX är en akronym som står för Asynchronous Javascript och XML. Det är faktiskt inte AJAX ny teknologi eftersom både Javascript och XML har funnits ganska länge nu länge sedan, och AJAX är en syntes av de angivna teknologierna. AJAX förknippas oftast med termen Web 2.0 och bjuds ut som den senaste webbapplikationen.
När du använder AJAX behöver du inte uppdatera hela sidan varje gång, eftersom endast en specifik del av den uppdateras. Detta är mycket bekvämare, eftersom du inte behöver vänta länge och mer ekonomiskt, eftersom inte alla har obegränsat internet. Det är sant att i det här fallet måste utvecklaren se till att användaren är medveten om vad som händer på sidan. Detta kan implementeras med hjälp av laddningsindikatorer och textmeddelanden som indikerar att data utbyts med servern. Du måste också förstå att inte alla webbläsare stöder AJAX (äldre versioner av webbläsare och text webbläsare). Dessutom kan Javascript inaktiveras av användaren. Därför ska man inte missbruka användningen av teknik och ta till alternativa metoder presentation av information på hemsidan.
Låt oss sammanfatta fördelarna med AJAX:
- Möjlighet att skapa ett bekvämt webbgränssnitt
- Aktiv användarinteraktion
- Enkel användning
AJAX använder två metoder för att arbeta med en webbsida: att ändra webbsidan utan att ladda om den, och att dynamiskt kontakta servern. Det andra kan göras på flera sätt, särskilt XMLHttpRequest, som vi kommer att prata om, och med hjälp av hidden frame-tekniken.
DatautbyteFör att utbyta data måste ett XMLHttpRequest-objekt skapas på sidan, vilket är en slags mellanhand mellan användarens webbläsare och servern (fig. 1). Med hjälp av XMLHttpRequest kan du skicka en förfrågan till servern och även få ett svar i form av olika typer av data.
Det finns två sätt att utbyta data med servern. Den första metoden är en GET-förfrågan. I denna begäran kommer du åt ett dokument på servern och skickar argumenten genom själva URL:en. I det här fallet skulle det på klientsidan vara logiskt att använda Javascript escape-funktionen så att vissa data inte avbryter begäran.
Klientdelen, skriven i Javascript, måste tillhandahålla nödvändig funktionalitet för säkert utbyte med servern och tillhandahålla metoder för att utbyta data på något av ovanstående sätt. Serverdelen måste bearbeta indata och utifrån den generera ny information (till exempel arbeta med en databas) och skicka tillbaka den till klienten. För att till exempel begära information från servern kan du använda en vanlig GET-förfrågan som skickar flera små parametrar och för att uppdatera information eller lägga till ny information Du måste använda en POST-begäran, eftersom den tillåter dig att överföra stora mängder data.
Som redan nämnts använder AJAX asynkron dataöverföring. Detta innebär att medan data överförs kan användaren utföra andra nödvändiga åtgärder. Vid denna tidpunkt bör användaren meddelas att någon form av datautbyte äger rum, annars kommer användaren att tro att något fel har hänt och kan lämna webbplatsen, eller återkalla funktionen som han tror är "fryst". Indikering under datautbyte webbapplikation 2.0 spelar en mycket viktig roll: besökare kanske ännu inte är vana vid detta sätt att uppdatera sidan.
Svaret från servern kan inte bara vara XML, som namnet på tekniken antyder. Förutom XML kan du få svaret i vanlig text, eller JSON (Javascript Object Notation). Om svaret mottogs i enkel text, kan det omedelbart visas i en behållare på sidan. När man får ett svar i form av XML bearbetas det mottagna XML-dokumentet vanligtvis på klientsidan och data konverteras till (X)HTML. När man tar emot ett svar i JSON-format behöver klienten bara exekvera den mottagna koden (Javascripts evalfunktion) för att få ett fullfjädrat Javascript-objekt. Men här måste du vara försiktig och ta hänsyn till det faktum att användning av denna teknik kan överföras skadlig kod, därför bör den kontrolleras och bearbetas noggrant innan koden som tas emot från servern körs. Det finns en sådan praxis som en "ledig" begäran, där inget svar tas emot från servern, bara data på serversidan ändras.
I olika webbläsare har detta objekt olika egenskaper, men i allmänhet är det samma.
Metoder XMLHttpRequest-objektObservera att metodnamnen är skrivna i samma Camel-stil som andra Javascript-funktioner. Var försiktig när du använder dem.
abort() - avbryter den aktuella begäran till servern.
getAllResponseHeaders() - hämta alla svarsrubriker från servern.
getResponseHeader("header_name") - hämta den angivna rubriken.
open("request_type","URL","asynkron","användarnamn","lösenord") - initierar en förfrågan till servern, specificerar förfrågningsmetoden. Begäranstyp och URL är obligatoriska parametrar. Det tredje argumentet är ett booleskt värde. Vanligtvis anges alltid true eller inte alls (standard är sant). Det fjärde och femte argumentet används för autentisering (det är mycket osäkert att lagra autentiseringsdata i ett skript, eftersom skriptet kan ses av alla användare).
send("content") - skicka en HTTP-förfrågan till servern och få ett svar.
setRequestHeader("header_name","value") — ställ in förfrågans huvudvärden.
Egenskaper för XMLHttpRequest-objektetonreadystatechange är en av de viktigaste egenskaperna hos XMLHttpRequest-objektet. Med den här egenskapen specificeras en hanterare som anropas varje gång ett objekts status ändras.
readyState är ett tal som indikerar objektets status.
responseText — representation av serversvaret som vanlig text (sträng).
responseXML är ett DOM-kompatibelt dokumentobjekt som tas emot från servern.
status — status för svaret från servern.
statusText — textrepresentation av statusen för svaret från servern.
Du bör ta en närmare titt på egenskapen readyState:
- 0 — Objektet är inte initierat.
- 1 - Objektet laddar data.
- 2 — Objektet har laddat sina data.
- 3 - Objektet är inte helt laddat, men kan interageras med av användaren.
- 4 — Objektet är helt initialiserat; ett svar mottogs från servern.
Det är baserat på objektets beredskapsläge att du kan ge besökaren information om vilket stadium datautbytet med servern befinner sig i och eventuellt meddela honom om detta visuellt.
Skapa ett XMLHttpRequest-objektSom nämnts ovan är det en unik process att skapa detta objekt för varje webbläsartyp.
Till exempel, för att skapa ett objekt i Gecko-kompatibla webbläsare, Konqueror och Safari, måste du använda följande uttryck:
var Request = new XMLHttpRequest();
Och för Internet Explorer används följande:
var Request = new ActiveXObject("Microsoft.XMLHTTP");
var Request = new ActiveXObject("Msxml2.XMLHTTP");
Nu, för att uppnå kompatibilitet över webbläsare, måste du kombinera alla funktioner till en:
function CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-kompatibla webbläsare, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); catch (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("Kan inte skapa XMLHttpRequest"); ) returnera Request;
Efter allt detta kan du skapa det här objektet och inte oroa dig för prestanda på populära webbläsare. Men du kan skapa ett objekt på olika platser. Om du skapar det globalt, kommer vid en viss tidpunkt endast en begäran till servern att vara möjlig. Du kan skapa ett objekt varje gång en förfrågan görs till servern (detta kommer nästan helt att lösa problemet).
Begäran till servernAlgoritmen för serverbegäran ser ut så här:
- Kontrollerar förekomsten av XMLHttpRequest.
- Initierar en anslutning till servern.
- Skickar en förfrågan till servern.
- Behandling av mottagna uppgifter.
För att skapa en begäran till servern kommer vi att skapa en liten funktion som kombinerar funktionerna för GET- och POST-förfrågningar i funktionalitet.
/* Funktion för att skicka en begäran till en fil på servern r_method - begäran typ: GET eller POST r_path - sökväg till filen r_args - argument som a=1&b=2&c=3... r_handler - funktion som hanterar svaret från server */ function SendRequest(r_method, r_path, r_args, r_handler) ( //Create a request var Request = CreateRequest(); //Kontrollera att begäran finns igen om (!Request) ( return; ) //Tilldela en anpassad hanterare Request.onreadystatechange = function() ( // Om datautbytet är slutfört if (Request.readyState == 4) ( //Passera kontrollen till användarhanteraren r_handler(Request); ) ) //Kontrollera om det är nödvändigt att gör en GET-förfrågan om (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" r_method.toLowerCase() == "post") ( //Om detta är POST- request //Ange rubriken Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Skicka begäran Request.send(r_args); ) else ( //Om detta är en GET-förfrågan //Skicka en nollförfrågan Request.send(null); ) )
Att skapa en förfrågan har blivit mycket lättare. Låt oss till exempel skriva en funktion som tar emot innehållet i en fil på servern och matar ut den till en behållare.
function ReadFile(filnamn, container) ( //Skapa en hanterarfunktion var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Skicka begäran SendRequest("GET",filename," ", Hanterare);
Så här sker interaktion med servern.
Bearbetar svaretI det föregående exemplet gjorde vi en begäran funktion till servern. Men det är i grunden osäkert, eftersom vi inte bearbetar objektets tillstånd och tillståndet för svaret från servern.
Låt oss lägga till vår kod så att den kan visa ett visuellt meddelande om laddningsprocessen.
Request.onreadystatechange = function() ( //Om datautbytet är slutfört if (Request.readyState == 4) ( //Pass kontrollen till användarhanteraren r_handler(Request); ) else ( //Meddela användaren om nedladdningen )) ...
Som du redan vet låter XMLHttpRequest-objektet dig veta statusen för svaret från servern. Låt oss ta vara på denna möjlighet.
Request.onreadystatechange = function() ( //Om datautbytet är slutfört if (Request.readyState == 4) ( if (Request.status == 200) ( //Passera kontrollen till användarhanteraren r_handler(Request); ) else ( // Vi meddelar användaren om felet som uppstod) ) else ( //Meddela användaren om nedladdningen ) ) ...
ServersvarsalternativDu kan ta emot flera typer av data från servern:
Om du får vanlig text kan du omedelbart skicka den till behållaren, det vill säga till utgången. När du tar emot data som XML måste du bearbeta data med DOM-funktioner och presentera resultatet med HTML.
JSON är Javascript-objektnotation. Med dess hjälp kan du representera ett objekt som en sträng (här kan du ge en analogi med serialiseringsfunktionen). När du tar emot JSON-data måste du köra den för att få en komplett Javascript-objekt och utför nödvändiga operationer med den. Var medveten om att sådan dataöverföring och exekvering inte är säker. Man måste hålla koll på vad som kommer in för utförande.
AJAX: Var ska man börja
Den här artikeln täcker de grundläggande principerna för AJAX och ger två enkla exempel använder denna teknik.
1 Vad är AJAX?
2 Steg 1 - Hur man skickar en HTTP-förfrågan
3 Steg 2 - Bearbeta HTTP-svaret
4 Steg 3 - Enkelt exempel
5 Steg 4 - Arbeta med XML-svaret
Vad är AJAX?
Ajax står för Asynchronous JavaScript och XML. Tekniken är baserad på användningen av ett icke-standardiserat XMLHttpRequest()-objekt, vilket är nödvändigt för att interagera med skript på serversidan. Ett objekt kan både skicka och ta emot information i olika format inklusive XML, HTML och till och med textfiler. Det mest attraktiva med Ajax är dess asynkrona funktionsprincip. Med denna teknik kan du interagera med servern utan att behöva ladda om sidan. Detta gör att sidans innehåll kan uppdateras delvis, beroende på användarens åtgärder.
Två funktioner vi ska titta på:
* Skicka förfrågningar till servern utan att ladda om sidan
* Arbeta med XML-dokument
Steg 1 - Hur man skickar en HTTP-förfrågan
För att skicka en HTTP-förfrågan till en server med JavaScript behöver du en instans av en klass som tillåter dig att göra detta. En sådan klass introducerades först i Internet Explorer som ett ActiveX-objekt kallat XMLHTTP. Senare introducerade Mozilla, Safari och andra webbläsare klassen XMLHttpRequest, som stödde originalets metoder och egenskaper ActiveX-objekt från Microsoft.
Som ett resultat kan du göra följande för att skapa ett webbläsarobjekt av den obligatoriska klassen:
if (window.XMLHttpRequest) ( // Mozilla, Safari, ...
}
(För tydlighetens skull är koden ovan lite förenklad. Ett mer praktiskt exempel kommer att behandlas i steg 3 i den här artikeln)
Vissa versioner av vissa Mozilla-webbläsare kommer inte att fungera korrekt om serversvaret inte innehåller XML-huvudet av mime-typ. För att lösa detta problem kan du använda samtal ytterligare metoder för att åsidosätta rubriken som tas emot från servern om den skiljer sig från text/xml.
http_request = new XMLHttpRequest();
Därefter måste du bestämma vad du ska göra efter att ha fått serverns svar. Vid det här laget måste du tala om för objektet vilken JavaScript-funktion som kommer att hantera svaret. Detta görs genom att ställa in onreadystatechange-egenskapen till namnet på JavaScript-funktionen du tänker använda:
Observera att det inte finns några parenteser eller parametrar efter funktionsnamnet eftersom du helt enkelt tilldelar en referens till funktionen istället för att anropa den. Dessutom, istället för att ange ett funktionsnamn, kan du använda JavaScripts förmåga att deklarera funktioner i farten (kallade "anonyma funktioner") och ange åtgärder som omedelbart kommer att bearbeta svaret:
http_request.onreadystatechange = function())(
// lite kod
};
http_request.open("GET", "http://www.example.org/some.file", true);
http_request.send(null);
* Den första parametern till funktionsanropet open() är HTTP-förfrågningsmetoden (GET, POST, HEAD eller vilken metod du vill använda). Använd metoder i enlighet med HTTP-standarder; Annars kanske vissa webbläsare (som Firefox) inte behandlar begäran. Information om giltiga HTTP-förfrågningar finns på W3C-specifikationens URL
* Den andra parametern är webbadressen till den begärda sidan. Av säkerhetsskäl kan du inte begära sidor från tredjepartsdomäner. Se till att du använder samma domännamn på alla sidor, annars får du ett "access denied"-fel när du anropar open()-funktionen. Ett typiskt misstag när du går in på webbplatsen via site.ru är att skicka in förfrågningar till www.site.ru.
* Den tredje parametern indikerar om begäran är asynkron. Om TRUE kommer körningen av JavaScript att fortsätta i väntan på att servern ska svara. Detta är teknikens asynkrona natur.
Send()-metodens parameter kan vara vilken data du vill skicka till servern. Data måste formas till en frågesträng:
namn=värde&annatnamn=annat värde&så=på
Observera att om du vill skicka data med POST-metoden måste du ändra MIME-typen för begäran med följande rad:
http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Annars kommer servern att ignorera data som skickas med POST-metoden.
Steg 2 - Bearbeta HTTP-svaret
När du skickade in begäran angav du namnet på JavaScript-funktionen som hanterar svaret.
http_request.onreadystatechange = nameOfTheFunction;
Låt oss se vad den här funktionen ska göra. Först måste funktionen kontrollera status för begäran. Om värdet på statusvariabeln är 4 betyder det att svaret från servern har tagits emot och kan bearbetas.
if (http_request.readyState == 4) (
// allt är ok, svar mottaget
) annat (
// fortfarande inte redo
}
Den kompletta listan över readyState-kodvärden är som följer:
* 0 (oinitierad)
* 1 (laddar)
* 2 (laddat)
* 3 (interaktiv)
* 4 (komplett)
Nästa sak att kontrollera är statusen för HTTP-svaret. Alla möjliga koder kan ses på W3C:s webbplats. För våra ändamål är vi bara intresserade av svarskoden 200 OK.
if (http_request.status == 200) (
// fantastiskt!
) annat (
// det var problem med begäran,
// till exempel kan svaret vara 404 (hittades inte)
// eller 500 ( Internt fel server)
}
Nu, efter att ha kontrollerat statusen för begäran och statusen för HTTP-svaret, kan du göra vad du vill med den data som tas emot från servern. Det finns två sätt att komma åt data:
* http_request.responseText – returnerar serversvaret som en textsträng.
* http_request.responseXML – returnerar serversvaret som ett XMLDocument-objekt, som du kan gå igenom med JavaScript DOM-funktioner
Steg 3 - Enkelt exempel
Låt oss slå ihop allt och göra ett enkelt exempel på HTTP-förfrågan. Vår JavaScript kommer att fråga HTML-dokument test.html, som innehåller texten "Jag är ett test." och visar innehållet i filen i en dialogruta.
funktion makeRequest(url) (
var http_request = false;
if (window.XMLHttpRequest) ( // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) (
http_request.overrideMimeType("text/xml");
// Läs nedan om denna rad
}
) else if (window.ActiveXObject) ( // IE
Prova (
http_request = new ActiveXObject("Msxml2.XMLHTTP");
) fånga (e) (
Prova (
http_request = new ActiveXObject("Microsoft.XMLHTTP");
) fånga (e) ()
}
}
om (!http_request) (
alert("Misslyckades: (Kan inte instansiera XMLHTTP-klassen ");
returnera falskt;
}
http_request.onreadystatechange = function() ( alertContents(http_request); );
http_request.open("GET", url, true);
http_request.send(null);
}
function alertContents(http_request) (
) annat (
}
}
}
Gör en förfrågan
I det här exemplet:
* Användaren klickar på länken "Gör en begäran" i webbläsaren;
* Detta anropar makeRequest()-funktionen med parametern test.html - namnet på HTML-filen;
* En begäran skickas, varefter (onreadystatechange) exekvering överförs till alertContents();
* alertContents() kontrollerar om svaret har mottagits och om allt är ok, varefter innehållet i filen test.html visas i dialogrutan.
Du kan prova exemplet i aktion och testfil du kan se .
Obs: String http_request.overrideMimeType("text/xml"); kommer att orsaka fel i JavaScript-konsol i Firefox 1.5 eller senare, som beskrivs i https://bugzilla.mozilla.org/show_bug.cgi?id=311724, om sidan som anropas med XMLHttpRequest inte är giltig XML (om det till exempel är vanlig text). I själva verket är detta korrekt beteende.
Obs 2: Om du skickar en begäran inte till en statisk XML-fil, utan till ett skript på serversidan som returnerar XML, måste du ställa in några svarsrubriker om du planerar att få din sida att fungera i andra Internet Explorer än Mozilla. Om du inte ställer in Content-Type: application/xml-huvudet kommer IE att rapportera ett JavaScript-fel, "Object Expected", efter raden där du försöker komma åt XML-element. Om du inte ställer in Cache-Control: no-cache-huvudet, cachelagrar webbläsaren svaret och skickar aldrig om begäran, vilket gör felsökning ganska roligt.
Note 3: Om variabeln http_request används globalt, kan konkurrerande funktioner som anropar makeRequest() konkurrera med varandra, vilket orsakar tävlingsförhållanden. Att deklarera http_request-variabeln lokalt i funktionen och skicka den till alertContent() förhindrar tävlingsförhållanden.
Obs 4: När en återuppringningsfunktion binds till onreadystatechange kan inga argument anges. Av denna anledning fungerar inte följande kod:
http_request.onreadystatechange = alertContents(http_request); // (fungerar inte)
För att lyckas registrera en funktion måste du alltså skicka argument till den indirekt genom en anonym funktion eller genom att använda http_request som en global variabel. Här är ett exempel:
http_request.onreadystatechange = function() ( alertContents(http_request); ); //1 (samtidig begäran)
http_request.onreadystatechange = alertContents; //2 (global variabel)
Den första metoden låter dig göra flera förfrågningar samtidigt, och den andra används när variabeln http_request är global.
Note 5: I händelse av ett kommunikationsfel (till exempel om servern kraschar) kommer ett undantag att skapas när man försöker komma åt variabeln .status för metoden onreadystatechange. Se till att om...då är insvept i ett försök...fångst. (Se https://bugzilla.mozilla.org/show_bug.cgi?id=238559).
function alertContents(http_request) (
Prova (
if (http_request.readyState == 4) (
if (http_request.status == 200) (
alert(http_request.responseText);
) annat (
alert("Det var ett problem med din förfrågan.");
}
}
}
fånga (e) (
alert("Ett undantag inträffade: " + e.description);
}
}
Steg 4 - Arbeta med XML-svaret
I det föregående exemplet, efter att svaret på HTTP-förfrågan tagits emot, använde vi responseText för det begärda objektet, som innehöll data från test.html-filen. Låt oss nu försöka använda egenskapen responseXML.
Först och främst, låt oss skapa rätt XML-dokument som vi kommer att fråga efter. Dokumentet (test.xml) innehåller följande:
< ?xml version="1.0" ?>
Jag är ett test.
I skriptet behöver vi bara ersätta frågesträngen med:
...
onclick="makeRequest("test.xml")">
...
var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);
För att lära dig mer om DOM-metoder, ta en titt
