Ajax scoort behoorlijk hoog op de belangrijkste redenen om jQuery te gebruiken. JQuery lost niet alleen de problemen tussen verschillende browsers op, het maakt de syntaxis ook heel gemakkelijk te gebruiken en te begrijpen.
In deze video proberen we uit te leggen wat Ajax überhaupt is. We kijken naar een formulierelement dat, wanneer het wordt ingediend, een GET- of POST-verzoek doet (zoals bepaald door het method-attribuut) naar de URL die je specificeert (zoals bepaald door het action-attribuut). Dat is gewoon HTML, er gebeurt helemaal geen back-endcode of JavaScript. Maar die inzending zal ervoor zorgen dat de pagina verandert, letterlijk opnieuw wordt geladen op de nieuwe URL, net als op een link klikken.
Ajax stelt ons in staat om dat GET- of POST-verzoek op de achtergrond te doen, zonder de pagina opnieuw te laden. In de kern is dat het hele punt van Ajax. En het is erg krachtig. Het is grotendeels verantwoordelijk voor de reden waarom moderne websites werken en aanvoelen zoals ze zijn.
Ajax stond vroeger voor Asynchrone JavaScript en XML, maar dat wordt tegenwoordig grotendeels genegeerd omdat het niet veel betekent. Vandaar ook de kapitalisatie. U kunt soms ook "XHR" zien, wat een afkorting is van XMLHttpRequest, de native core-technologie van Ajax.
Het verschil tussen GET en POST is in wezen: GET is voor het verkrijgen van informatie en zou niet verantwoordelijk moeten zijn voor het wijzigen van gegevens en POST is specifiek voor het wijzigen van gegevens. Voel je vrij om daar meer over te lezen in deze StackOverflow-thread.
Een GET-verzoek indienen in jQuery is verbazingwekkend eenvoudig:
$.get( "URL", function(data) ( // do something with data )); ));De URL is waar u de gegevens vandaan wilt halen. De tweede parameter is de callback-functie die wordt uitgevoerd wanneer het Ajax-verzoek succesvol was. De belangrijkste parameter daar is de eerste, data, die de informatie bevat die het van het verzoek heeft gekregen.
Ajax-verzoeken kunnen soms mislukken. Een reden voor dat falen kan de browser zelf en zijn beveiligingsbeleid zijn. In de browsers zelf zijn regels ingebouwd over waar inhoud kan worden opgevraagd. Verzoeken kunnen altijd worden ingediend bij hetzelfde domein waar het verzoek vandaan komt. Maar als er een ander domein bij betrokken is, moet dat andere domein dit specifiek toestaan.
Je kunt er alles over lezen op enable-cors.org. CORS staat voor "Cross-Origin Resource Sharing". We bekijken een voorbeeld waarin CORS niet is ingeschakeld en het Ajax-verzoek mislukt. Een standaard en gemakkelijke manier om dit op te lossen, ervan uitgaande dat de server Apache is, is door een header in te stellen die CORS specifiek toestaat via het .htaccess-bestand:
Header set Access-Control-Allow-Origin "*"In de video verplaatsen we het Ajax-verzoek gewoon naar CodePen, die Ajax standaard goed afhandelt.
Makkelijk cheesy:
Zie de Pen fBInl door Chris Coyier (@chriscoyier) op CodePen