AJAX lub Ajax to asynchroniczny JavaScript i XML. Służy do wymiany danych z serwerem i aktualizacji części strony bez przeładowywania całej strony po stronie klienta. Wyświetlanie i zachowanie istniejącej strony internetowej w ogóle nie jest zakłócane podczas wymiany i aktualizacji danych. Ajax jest również uważany za grupę technologii, która ma HTML, CSS, DOM i JavaScript, które są wykorzystywane do oznaczania, stylizowania i umożliwiania użytkownikowi interakcji z informacjami na stronie internetowej. W tym artykule pokażę Ci, jak napisać prosty program w krokach Ajax za pomocą Notepad++. Wymagana jest podstawowa znajomość HTML, DOM, JavaScript oraz lokalnego lub zdalnego serwera WWW. WampServer jest używany w tym artykule do testu.
Kroki
Metoda 1 z 2: Kodowanie
Krok 1. Przygotuj obrazek do pisania programu ajaxowego
Zapisz obrazek w tym samym folderze, w którym zapiszesz swoje pliki html i tekstowe wyświetlające program Ajax. W tym artykule katalog „ProgramInAjax” jest ustawiony w folderze „wamp” w katalogu „www”, w którym zainstalowałeś WampServer.
Krok 2. Otwórz dowolny edytor tekstu
Notepad ++ jest używany jako edytor tekstu w tym artykule.
Krok 3. Utwórz nowy plik w edytorze tekstu
Wpisz następujące polecenie:
Och! Gdzie się podział żółty kwiat?
Możesz wpisać cokolwiek chcesz w tagu HTML tutaj.
Krok 4. Zapisz plik jako dokument tekstowy o nazwie „ajax-data.txt
” Właściwie możesz nazwać plik, jak chcesz, ale upewnij się, że wpisujesz tę samą nazwę pliku do kodowania w tym wierszu:
xmlhttp.open("GET", "ajax-data.txt", prawda);
Jednak tag HTML jest używany do nagłówka, aby wyglądał na większy i bardziej niewidoczny.
Krok 5. Utwórz nowy plik dla strony internetowej
Ten plik jest przeznaczony do pliku HTML do przeglądania programu Ajax w przeglądarce sieci Web.
Krok 6. Skopiuj następujący kod:
Mój pierwszy program Ajax ode mnie Umieść kod Ajax poniżej.Kliknij przycisk poniżej, aby kwiat zniknął
Krok 7. Zapisz plik
Kliknij przycisk zapisu na pasku menu. Otwarte jest okno „Zapisz jako”. Wpisz nazwę swojego dokumentu. W tym artykule nazwa pliku to „indeks”.
Krok 8. Kliknij strzałkę w dół, aby wybrać rozszerzenie pliku
W polu „Zapisz jako typ” kliknij strzałkę w dół, aby wybrać rozszerzenie pliku.
Krok 9. Wybierz plik „Hyper Text Markup Language”
” Upewnij się, że w nawiasie znajduje się „html”. Kliknij Zapisz po wybraniu „html”.
Krok 10. Przetestuj plik HTML w przeglądarce internetowej
Otwórz stronę w przeglądarce internetowej. Przejdź do „Uruchom” na górnym pasku menu. Kliknij go i wybierz "Uruchom w Chrome" lub dowolną przeglądarkę zainstalowaną w twoim systemie. Google Chrome jest używany do testowania w tym artykule. Możesz mieć zainstalowane inne przeglądarki w Notepad ++. Możesz wybrać swoją ulubioną przeglądarkę. Inną opcją, możesz kliknąć ikonę WampServer na paskach zadań u dołu ekranu i wybrać "Localhost". Powinieneś zobaczyć tam swój katalog i kliknąć plik indeksu.
Krok 11. Kliknij przycisk pod obrazkiem, aby przetestować skrypt
Krok 12. Twoja ostateczna strona internetowa
Twoja strona powinna zostać odświeżona o informacje, które wprowadziłeś na początku do pliku tekstowego. Kwiatek i nagłówek należy zastąpić nowym nagłówkiem o nazwie „Oh oh! Gdzie się podział żółty kwiat?
Metoda 2 z 2: Wyjaśnienie kodu
Krok 1. Sekcja ciała
Treść HTML zawiera sekcję „div” i jeden przycisk. Ta sekcja będzie używana do wyświetlania informacji zwróconych z serwera. Przycisk wywołuje funkcję o nazwie „loadXMLDoc()”, jeśli zostanie kliknięty.
Mój pierwszy program Ajax ode mnie Tutaj pojawia się obraz, aby przetestować program Ajax.Kliknij przycisk poniżej, aby kwiat zniknął
Tutaj jest przycisk
Krok 2. Sekcja głowy
Sekcja head pliku HTML zawiera tag skryptu, który zawiera funkcję „loadXMLDoc()”.
Mój pierwszy program Ajax ode mnie Umieść kod Ajax poniżej.
Krok 3. Więcej wyjaśnień
Najważniejszą rzeczą w Ajax jest obiekt XMLHttpRequest. Służy do wymiany danych z serwerem i wszystkie nowoczesne przeglądarki obsługują obiekt.
- Składnia do tworzenia obiektu XMLHttpRequest() to zmienna=new XMLHttpRequest(); ale jednocześnie składnia do tworzenia starych wersji Internet Explorera (IE5 i IE6) korzystających z obiektu ActiveX to zmienna=new ActiveXObject("Microsoft. XMLHTTP");.
- Aby obsłużyć wszystkie nowoczesne przeglądarki, należy sprawdzić, czy przeglądarki obsługują obiekt XMLHttpRequest. Jeśli tak, tworzy obiekt XMLHttpRequest. Jeśli tego nie zrobi, utworzy dla niego obiekt ActiveX.
- Następnie wyśle żądanie do serwera. Zostanie użyta metoda obiektu XMLHttpRequest o nazwie „open()” i „send()”. xmlhttp.open("GET", "ajax_info.txt", prawda); xmlhttp.send();.
Porady
- Inną opcją podglądu wyniku jest otwarcie ulubionej przeglądarki i wpisanie „localhost/ProgramInAjax” w pasku adresu internetowego, aby wyświetlić stronę internetową. Powinieneś być w stanie zobaczyć stronę internetową, jeśli nazwiesz swój plik HTML na „index.html”.
- Podczas pracy częściej zapisuj swój plik html. Jednoczesne naciśnięcie klawiszy Ctrl i S dla użytkowników systemu Windows zaoszczędzi więcej czasu.
- Pamiętaj, aby dodać zapisany plik HTML w tym samym miejscu, w którym znajduje się obraz i plik tekstowy danych.
- Kiedy nazywasz plik, rozróżniana jest wielkość liter podczas dodawania tych nazw do kodu. Na przykład „myImage” różni się od „MyImage” lub „myimage”.
