Jak wykonać wywołanie AJAX za pomocą JavaScript, bez użycia jQuery?
javascript
ajax
nieprzyzwoity
źródło
źródło
Odpowiedzi:
Z JavaScriptem „waniliowym”:
Z jQuery:
źródło
Za pomocą następującego fragmentu kodu możesz łatwo robić podobne rzeczy, takie jak to:
Oto fragment:
źródło
return x.responseText;
- a następnie zwracam każde zajax.send
połączeń.ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
query.join('&').replace(/%20/g, '+')
?Wiem, że to dość stare pytanie, ale w nowszych przeglądarkach dostępne jest teraz ładniejsze API . Ta
fetch()
metoda umożliwia tworzenie żądań internetowych. Na przykład, aby poprosić o json od/get-data
:Zobacz tutaj po więcej szczegółów.
źródło
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
i używaj pobierania jak mistrz.Możesz użyć następującej funkcji:
Możesz wypróbować podobne rozwiązania online na tych linkach:
źródło
GET
, więc możesz po prostu dodać je do żądania, ale aby być bardziej ogólnym, jestem z tobą, naprawdę pomyślałem o zaktualizowaniu odpowiedzi, aby zaakceptować parametry żądania jako parametr funkcji tutaj , a także przekazać metodę (GET
lubPOST
), ale zatrzymało mnie to, że chcę, aby odpowiedź była jak najprostsza, aby ludzie mogli wypróbować ją tak szybko, jak to możliwe. Właściwie nienawidziłem innych odpowiedzi za to, że zbyt długo, bo starają się być perfekcyjni :)Co powiesz na tę wersję w wersji ES6 / ES2015 ?
Funkcja zwraca obietnicę . Oto przykład użycia funkcji i obsługi obietnicy, którą zwraca:
Jeśli potrzebujesz załadować plik json, możesz użyć
JSON.parse()
do konwersji załadowanych danych na obiekt JS.Możesz również zintegrować
req.responseType='json'
się z funkcją, ale niestety nie ma ona obsługi IE , więc trzymałbym sięJSON.parse()
.źródło
XMLHttpRequest
z niego, podejmij asynchroniczną próbę załadowania pliku. Oznacza to, że wykonanie kodu będzie trwało, podczas gdy plik ładuje się w tle. Aby użyć zawartości pliku w skrypcie, potrzebujesz mechanizmu, który informuje skrypt o zakończeniu ładowania pliku lub o niepowodzeniu ładowania. Tu przydają się obietnice . Istnieją inne sposoby rozwiązania tego problemu, ale myślę, że obietnice są najwygodniejsze.źródło
Użyj XMLHttpRequest .
Proste żądanie GET
Proste żądanie POST
Możemy określić, że żądanie powinno być asynchroniczne (prawda), domyślne lub synchroniczne (fałsz) z opcjonalnym trzecim argumentem.
Możemy ustawić nagłówki przed połączeniem
httpRequest.send()
Możemy obsłużyć odpowiedź, ustawiając
httpRequest.onreadystatechange
funkcję przed wywołaniemhttpRequest.send()
źródło
Możesz uzyskać właściwy obiekt zgodnie z przeglądarką za pomocą
Przy odpowiednim obiekcie GET może zostać wyodrębniony w celu:
I POST do:
źródło
Szukałem sposobu na dołączenie obietnic do ajax i wykluczenie jQuery. Jest artykuł na temat HTML5 Rocks, który mówi o obietnicach ES6. (Mógłbyś wypełniać bibliotekę obietnic, taką jak Q ) Możesz użyć fragmentu kodu, który skopiowałem z artykułu.
Uwaga: napisałem również o tym artykuł .
źródło
Mała kombinacja z kilku poniższych przykładów i stworzyła ten prosty kawałek:
LUB jeśli twoje parametry są obiektami - drobne dodatkowe dostosowanie kodu:
Oba powinny być w pełni kompatybilne z przeglądarką + wersją.
źródło
Jeśli nie chcesz dołączać JQuery, wypróbuję kilka lekkich bibliotek AJAX.
Moim ulubionym jest reqwest. Ma tylko 3,4 KB i jest bardzo dobrze zbudowany: https://github.com/ded/Reqwest
Oto przykładowe żądanie GET z reqwest:
Teraz, jeśli chcesz czegoś jeszcze bardziej lekkiego, wypróbuję microAjax w zaledwie 0,4 KB: https://code.google.com/p/microajax/
To jest cały kod tutaj:
A oto przykładowe połączenie:
źródło
Stare, ale spróbuję, może ktoś uzna te informacje za przydatne.
Jest to minimalna ilość kodu potrzebna do wykonania
GET
żądania i pobraniaJSON
sformatowanych danych. Dotyczy to tylko nowoczesnych przeglądarek, takich jak najnowsze wersje Chrome , FF , Safari , Opera i Microsoft Edge .Sprawdź także nowy interfejs Fetch API, który jest opartym na obietnicach zamiennikiem interfejsu API XMLHttpRequest .
źródło
XMLHttpRequest ()
Za pomocą
XMLHttpRequest()
konstruktora można utworzyć nowy obiektXMLHttpRequest
(XHR), który umożliwi interakcję z serwerem przy użyciu standardowych metod żądania HTTP (takich jakGET
iPOST
):sprowadzać()
Możesz także użyć tej
fetch()
metody, aby uzyskać obiekt,Promise
który rozwiązujeResponse
obiekt reprezentujący odpowiedź na twoje żądanie:navigator.sendBeacon ()
Z drugiej strony, jeśli po prostu próbujesz
POST
danych i nie potrzebujesz odpowiedzi z serwera, najkrótszym rozwiązaniem byłoby użycienavigator.sendBeacon()
:źródło
Od youMightNotNeedJquery.com +
JSON.stringify
źródło
Może to pomóc:
źródło
źródło
Mam nadzieję, że to pomoże
Step 1.
Przechowuj odwołanie do obiektu XMLHttpRequestStep 2.
Pobierz obiekt XMLHttpRequestStep 3.
Wykonaj asynchroniczne żądanie HTTP za pomocą obiektu XMLHttpRequestStep 4.
Wykonywany automatycznie po otrzymaniu wiadomości z serweraźródło
w zwykłym JavaScript w przeglądarce:
Lub jeśli chcesz użyć Browserify, aby połączyć swoje moduły za pomocą node.js. Możesz użyć superagenta :
źródło
Oto JSFiffle bez JQuery
http://jsfiddle.net/rimian/jurwre07/
źródło
moje połączenie z ajaxem
w przypadku przerwania poprzednich wniosków
źródło
HTML:
PHP:
źródło
Jest tutaj bardzo dobre rozwiązanie z czystym javascript
źródło