Hoe een AJAX-aanvraag doen met jQuery voor HTML5 en CSS3 Programmeren - dummies

Het primaire doel van een AJAX-bibliotheek zoals jQuery is het vereenvoudigen van AJAX-aanvragen voor HTML5- en CSS3-programmeurs. Het is moeilijk te geloven hoe gemakkelijk dit kan zijn met jQuery.

Hoe een tekstbestand opnemen met AJAX

Bekijk deze schone code:

ajax. html $ (document). ready (getAJAX); functie getAJAX () {$ ("# output"). laden ("hallo. txt");}

De HTML is erg schoon. Het maakt eenvoudig een lege div genaamd output.

In dit voorbeeld wordt AJAX gebruikt, dus als het niet werkt, moet u mogelijk enkele details onthouden over hoe AJAX werkt. Een programma dat AJAX gebruikt, moet via een webserver worden uitgevoerd, niet alleen vanuit een lokaal bestand. Ook moet het bestand dat wordt gelezen zich op dezelfde server bevinden als het programma dat het AJAX-verzoek doet.

Het mechanisme load () dat hier wordt beschreven, is geschikt voor een basissituatie waarin u een HTML-codefragment in platte pagina's wilt laden.

Het bouwen van het CMS van een arme man met AJAX

AJAX en jQuery kunnen een zeer nuttige manier zijn om efficiënte websites te bouwen, zelfs zonder server-side programmering. Vaak is een website gebaseerd op een reeks kleinere elementen die kunnen worden geruild en opnieuw kunnen worden gebruikt. U kunt AJAX gebruiken om een ​​raamwerk te maken dat eenvoudig hergebruik en aanpassing van webinhoud mogelijk maakt.

Hoewel niets zo schokkend is aan de pagina vanuit het perspectief van de gebruiker, kan een blik op de code enkele verrassingen laten zien:

CMS met AJAX $ (init); functie init () {$ ("# heading"). laden ("head. html"); $ ("# Menu"). laden ("menu. html"); $ ("# Content1"). laden ("story1. html"); $ ("# Content2"). laden ("story2. html"); $ ("# Footer"). laden ("footer. html");}; 
Kijk over de code en je ziet deze interessante functies:


De pagina heeft geen inhoud! Alle div's zijn leeg. Geen van de tekst in de schermafbeelding is aanwezig in dit document, maar alles wordt dynamisch uit kleinere bestanden gehaald.


De pagina bestaat uit lege benoemde divs. In plaats van een specifieke inhoud bestaat de pagina uit tijdelijke aanduidingen met ID's.


Het maakt gebruik van jQuery. De jQuery-bibliotheek wordt gebruikt om het laden van gegevens via AJAX-aanroepen enorm te vereenvoudigen.


Alle inhoud staat in afzonderlijke bestanden. Kijk door de map en je kunt heel eenvoudige HTML-bestanden zien die kleine delen van de pagina bevatten. Bijvoorbeeld story1. html ziet er zo uit:
Boek I - De HTML-basis maken

Goede HTML-stichtingen
Alles draait om validatie
Uw hulpprogramma's kiezen
Informatie beheren met lijsten en tabellen
Verbindingen leggen met koppelingen
Afbeeldingen toevoegen
Formulieren maken




De init () -methode wordt uitgevoerd op -document.klaar . Wanneer het document gereed is, voert de pagina de methode init () uit.


De methode init () gebruikt AJAX-aanroepen om inhoud dynamisch te laden. Het is niets meer dan een reeks jQuery load () -methoden.


Deze benadering lijkt misschien veel werk, maar het heeft een aantal zeer interessante kenmerken:


Als u een grote site met meerdere pagina's aan het bouwen bent, wilt u meestal het visuele uiterlijk één keer ontwerpen en dezelfde algemene hergebruiken. sjabloon herhaaldelijk.


Ook zult u waarschijnlijk enkele elementen hebben die consistent zijn over meerdere pagina's. U kunt eenvoudig een standaarddocument maken en kopiëren en plakken voor elke pagina, maar deze aanpak wordt rommelig. Wat gebeurt er als u 100 pagina's hebt gemaakt volgens een sjabloon en vervolgens de koptekst moet wijzigen? U moet de wijziging op 100 verschillende pagina's aanbrengen.


Het voordeel van de sjabloonstijlbenadering is codehergebruik. Net als bij het gebruik van een externe stijl kunt u een stijlpagina over honderden documenten vermenigvuldigen. Door een sjabloon zonder inhoud te ontwerpen, kunt u codefragmenten in kleinere bestanden opslaan en deze opnieuw gebruiken. Alle 100 pagina's verwijzen naar hetzelfde menu-bestand, dus als u het menu wilt wijzigen, wijzigt u één bestand en verandert alles ermee.
Zo gebruikt u dit soort aanpak:


Maak één sjabloon voor uw hele site.
Bouw eenvoudige HTML en CSS om het algemene uiterlijk van uw hele site te beheren. Maak je nog geen zorgen over de inhoud. Bouw gewoon tijdelijke aanduidingen voor alle componenten van uw pagina. Zorg ervoor dat je elk element een ID geeft en schrijf de CSS om dingen gepositioneerd te krijgen zoals je wilt.


Voeg jQuery-ondersteuning toe.
Maak een koppeling naar de jQuery-bibliotheek en voer een standaardiniti () -methode uit. Voer code in om het invullen van die delen van de pagina af te handelen die altijd consistent zijn.


Dupliceer de sjabloon.
Maak een kopie voor elke pagina van uw site nadat u een idee hebt hoe de sjabloon zal werken.


Pas elke pagina aan door de init () -functie te wijzigen.
Het enige deel van de sjabloon dat wordt gewijzigd, is de functie init (). Al uw pagina's zijn identiek, behalve dat ze aangepaste init () -functies hebben die verschillende inhoud laden.


Laad aangepaste inhoud in de div's met AJAX.
Gebruik de functie init () om inhoud in elke div te laden.


Dit is een geweldige manier om inhoud te beheren, maar het is geen volledig contentbeheersysteem. Zelfs AJAX kan je niet echt toestaan ​​om content op te slaan op internet. Meer complexe content management-systemen gebruiken ook databases in plaats van bestanden om content af te handelen. Je hebt een soort server-side programmering nodig (zoals PHP) en meestal een database (zoals mySQL) om dit soort werk aan te kunnen.