Hur man gör en AJAX-förfrågan med jQuery för HTML5 och CSS3-programmering - dummies < < hur man gör en AJAX-förfrågan med jQuery för HTML5 och CSS3-programmering

Det primära syftet med ett AJAX-bibliotek som jQuery är att förenkla AJAX-förfrågningar till HTML5- och CSS3-programmerare. Det är svårt att tro hur lätt det kan vara med jQuery.

Så här lägger du till en textfil med AJAX

Kolla in den här rena koden:

ajax. html $ (dokument). redo (getAJAX); funktion getAJAX () {$ ("# output"). ladda ("hej. txt");}

HTML är mycket ren. Det skapar helt enkelt en tom div-kallad utgång.

Detta exempel använder AJAX, så om det inte fungerar kan du behöva komma ihåg några detaljer om hur AJAX fungerar. Ett program som använder AJAX ska köras via en webbserver, inte bara från en lokal fil. Dessutom ska filen som läses vara på samma server som programmet gör AJAX-förfrågan.

Den här mekanismen () som beskrivs här är lämplig för en grundläggande situation där du vill ladda en vanlig text eller HTML-kod i dina sidor.

Bygga en fattig mans CMS med AJAX

AJAX och jQuery kan vara en väldigt användbar metod att bygga effektiva webbplatser, även utan serverprogrammering. Ofta är en webbplats baserad på en serie mindre element som kan bytas och återanvändas. Du kan använda AJAX för att skapa en ram som gör det enkelt att återanvända och ändra webbinnehåll.

Även om ingenting är allt som är chockerande på sidan från användarens perspektiv, kan en titt på koden visa några överraskningar:

CMS Använda AJAX $ (init); funktion init () {$ ("# rubrik"). ladda ("huvud. html"); $ ("# Menyn"). ladda ("menyn. html"); $ ("# Content1"). ladda ("story1. html"); $ ("# Content2"). ladda ("story2. html"); $ ("# Sidfot"). ladda ("footer. html");}; 
Titta över koden, och du kan se dessa intressanta funktioner:


Sidan har inget innehåll! Alla delarna är tomma. Ingen av texten som visas i skärmbilden finns i det här dokumentet, men allt dras dynamiskt från mindre filer.


Sidan består av tomma namngivna divs. I stället för något särskilt innehåll består sidan av platshållare med ID-nummer.


Det använder jQuery. Biblioteket jQuery används för att enkelt förenkla laddning av data via AJAX-samtal.


Allt innehåll finns i separata filer. Titta igenom katalogen, och du kan se mycket enkla HTML-filer som innehåller små delar av sidan. Till exempel, story1. html ser så här ut:
Bok I - Skapa HTML-stiftelsen

Ljud HTML-fonder
Det handlar om validering
Välja dina verktyg
Hantera information med listor och tabeller
Göra kontakter med länkar
Lägga till bilder
Skapa formulär




Metoden init () körs på dokument.redo . När dokumentet är klart körs sidan init () -metoden.


Metoden init () använder AJAX-samtal för att dynamiskt ladda innehåll. Det är inget mer än en serie jQuery load () metoder.


Detta tillvägagångssätt kan verka som mycket arbete, men det har några mycket intressanta egenskaper:


Om du bygger en stor webbplats med flera sidor vill du vanligtvis utforma det visuella utseendet en gång och återanvända samma generella mall upprepade gånger.


Dessutom har du förmodligen vissa element som kommer att vara konsekventa över flera sidor. Du kan helt enkelt skapa ett standarddokument och kopiera och klistra in det för varje sida, men det här sättet blir rörigt. Vad händer om du har skapat 100 sidor enligt en mall och sedan behöver ändra rubriken? Du måste göra ändringen på 100 olika sidor.


Fördelen med mallen-stil-tillvägagångssättet är kodåteranvändning. Precis som att använda en extern stil kan du multiplicera ett stilark över hundratals dokument. Genom att utforma en mall utan innehåll kan du lagra kodsedlar i mindre filer och återanvända dem. Alla 100 sidor pekar på samma menyfil, så om du vill ändra menyn ändrar du en fil och allt ändras med det.
Så här använder du den här typen av tillvägagångssätt:


Skapa en enda mall för hela din webbplats.
Bygg grundläggande HTML och CSS för att hantera det övergripande utseendet på hela din webbplats. Oroa dig inte om innehåll än. Bara bygga platshållare för alla komponenter på din sida. Var noga med att ge varje element ett ID och skriv CSS för att få saker placerade som du vill.


Lägg till jQuery-support.
Skapa en länk till jQuery-biblioteket och gör en standard init () -metod. Sätt in kod för att hantera att fylla de delar av sidan som alltid kommer att vara konsekventa.


Kopiera mallen.
När du har en känsla av hur mallen fungerar ska du göra en kopia för varje sida på din webbplats.


Anpassa varje sida genom att ändra funktionen init () .
Den enda delen av mallen som ändras är init () -funktionen. Alla dina sidor kommer att vara identiska, förutom att de har anpassade init () funktioner som laddar upp olika innehåll.


Ladda anpassat innehåll i delarna med AJAX.
Använd init () -funktionen för att ladda innehållet i varje div.


Det här är ett bra sätt att hantera innehåll, men det är inte riktigt ett fullblåst innehållshanteringssystem. Även AJAX kan inte låta dig lagra innehåll på webben. Mer komplexa innehållshanteringssystem använder också databaser snarare än filer som hanterar innehåll. Du behöver någon form av programmering på serversidan (som PHP) och vanligtvis en databas (som mySQL) för att hantera denna typ av arbete.