Operacje AJAX
Operacje AJAX
Operacje AJAX to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Wprowadzenie
Dzień dobry,
W tej lekcji nauczymy się komunikować ze zdalnym serwerem za pomocą metod AJAX biblioteki jQuery.
AJAX (Asynchronous Javascript And XML) to technologia umożliwiająca asynchroniczne przesyłanie danych z serwerem bez odświeżania strony internetowej.
Wpływa to pozytywnie na komfort użytkownika, szczególnie dlatego, że dane można przesyłać bez odświeżania strony.
Przykład Ajax
W szczególności najpopularniejsze aplikacje internetowe na świecie, takie jak Facebook, Gmail i Youtube, często korzystają z technologii AJAX.
W rzeczywistości zamiast traktować AJAX jako nową technologię, można postrzegać go jako metodę zapewniającą asynchroniczne przesyłanie danych między serwerem a klientem za pomocą Javascript.
Podajmy przykład funkcji korzystającej z AJAX.
Załóżmy, że oglądali Państwo film na youtube.com i kliknęli przycisk „Lubię to”. W takim przypadku zdarzenie polubienia jest przesyłane do serwerów youtube w tle, zanim strona youtube zostanie odświeżona.
Jest to proces realizowany za pomocą żądania AJAX.
Przykład Ajax
Wykonajmy przykład żądań AJAX.
Poniżej znajduje się kod żądania GET utworzonego za pomocą AJAX do adresu https://api.coddykit.com/api/coddy-test
Zostało ono napisane w Vanilla Javascript i składnia jest nieco skomplikowana, jak można zauważyć.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Ostrzeżenie
Jak wspomnieliśmy wcześniej, jQuery jest biblioteką do modyfikowania DOM, która udostępnia również metody ułatwiające wykonywanie operacji AJAX.
Metoda Ajax
Za pomocą jQuery mamy do dyspozycji dość prostą metodę zarządzania żądaniami AJAX.
Metoda ajax() pozwala łatwo korzystać z metod HTTP powszechnie używanych w świecie internetu, takich jak get, post czy put.
Składnia metody Ajax wygląda następująco.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Wykonajmy przykład
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Przykład AJAX
Żądanie AJAX typu GET
Ulepszmy teraz nasz przykład.
W poniższym przykładzie wysłano żądanie AJAX do adresu URL (https://api.coddykit.com/api/coddy-test)
Jeśli nie określono metody HTTP, domyślnie wykonywane jest żądanie GET.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});metoda get
Metoda $.get() i żądanie Get
Metody $.get() możemy użyć do wysłania żądania HTTP get do naszych serwerów.
Metoda ta jest udostępniana przez jQuery i pozwala wysyłać żądania GET za pomocą krótszego i prostszego kodu niż w Vanilla Javascript.
Wykonajmy przykład i zwróćmy uwagę, jak bardzo skrócony jest kod.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metoda Post
Metoda $.post() i żądanie Post
Metody $.post() możemy użyć do wysłania żądania HTTP typu Post do naszych serwerów.
Wykonajmy przykład i zwróćmy uwagę, jak krótki jest kod.
Żądań typu Post będziemy często używać, szczególnie podczas wysyłania formularzy internetowych do serwera.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Metoda Put
Żądanie Put
Możemy użyć metody $.put() , aby wysłać do naszych serwerów żądanie HTTP Put.
Wykonajmy przykład.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Metoda Delete
Żądanie Delete
Możemy użyć metody $.delete(), aby wysłać do naszych serwerów żądanie HTTP Delete.
Wykonajmy przykład
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Link
Przykłady i szczegółowe informacje o metodach AJAX można znaleźć pod poniższym linkiem.
Gratulacje
Gratulacje 🎉
W tej sekcji poznaliśmy AJAX w jQuery.
Dziękujemy za udział w kursie jQuery dla początkujących 🎉🎉🎉
Można teraz przystąpić do egzaminu i uzyskać certyfikat ukończenia kursu jQuery dla początkujących 🚀🚀🚀
Często zadawane pytania
Czy lekcja „Operacje AJAX” jest bezpłatna?
Tak — pełny tekst „Operacje AJAX” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Co nauczysz się w „Operacje AJAX”?
Operacje AJAX Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Operacje AJAX”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.