Prototyp - szybki przewodnik

Co to jest prototyp?

Prototype to framework JavaScript, który ma na celu ułatwienie tworzenia dynamicznych aplikacji internetowych. Prototyp został opracowany przez Sama Stephensona.

Prototype to biblioteka JavaScript, która umożliwia manipulowanie DOM w bardzo łatwy i przyjemny sposób, który jest również bezpieczny (cross-browser).

Biblioteki Scriptaculous i inne, takie jak Rico, są oparte na podstawach Prototype, aby tworzyć widżety i inne elementy dla użytkowników końcowych.

Prototype -

Rozszerza elementy DOM i typy wbudowane o przydatne metody.
Posiada wbudowaną obsługę OOP w stylu klasowym, w tym dziedziczenie.
Posiada zaawansowane wsparcie dla zarządzania wydarzeniami.
Posiada potężne funkcje Ajax.
Nie jest kompletną platformą do tworzenia aplikacji.
Nie zapewnia widżetów ani pełnego zestawu standardowych algorytmów ani systemów we / wy.

Jak zainstalować prototyp?

Prototyp jest rozpowszechniany jako pojedynczy plik o nazwie prototype.js. Wykonaj poniższe kroki, aby skonfigurować bibliotekę prototypów -

Przejdź do strony pobierania (http://prototypejs.org/download/), aby pobrać najnowszą wersję w wygodnym pakiecie.
Teraz umieść plik prototype.js w katalogu swojej witryny, np. / Javascript.

Jesteś teraz gotowy do używania potężnego frameworka Prototype na swoich stronach internetowych.

Jak korzystać z biblioteki prototypów?

Teraz możesz dołączyć skrypt Prototype w następujący sposób -

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

Przykład

Oto prosty przykład pokazujący, jak możesz użyć funkcji $ () Prototype, aby pobrać elementy DOM w swoim JavaScript -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

Wynik

Dlaczego ten samouczek?

Bardzo dobra dokumentacja dla Prototype Framework jest dostępna na prototypejs.org, więc dlaczego warto odwołać się do tego samouczka!

Odpowiedź jest taka, że w tym samouczku zebraliśmy wszystkie najczęściej używane funkcje. Po drugie, wyjaśniliśmy wszystkie przydatne metody wraz z odpowiednimi przykładami, które nie są dostępne na oficjalnej stronie.

Jeśli jesteś zaawansowanym użytkownikiem Prototype Framework, możesz bezpośrednio przejść do oficjalnej strony internetowej, w przeciwnym razie ten samouczek może być dla Ciebie dobrym początkiem i możesz go używać jako podręcznika.

Przyjrzyjmy się teraz, co Prototype może zrobić specjalnie dla nas, aby opracować dynamiczną aplikację internetową.

Obsługa wielu przeglądarek

Podczas programowania w języku JavaScript wymagane jest inne podejście do różnych przeglądarek internetowych. Prototype Library została napisana w taki sposób, że rozwiązuje wszystkie problemy ze zgodnością i umożliwia bezproblemowe programowanie w różnych przeglądarkach.

Model obiektu dokumentu

Prototype zapewnia metody pomocnicze, które zmniejszają obciążenie programowania DOM. Używając Prototype, możesz bardzo łatwo manipulować DOM.

Formularze HTML

Dzięki Ajax, inne mechanizmy wprowadzania danych, takie jak przeciągnij i upuść, mogą być używane jako część konwersacji między przeglądarką a serwerem. Przy konwencjonalnym programowaniu w języku JavaScript trudno jest przechwycić te dane wejściowe i przekazać je do serwera. Prototype udostępnia zestaw narzędzi do pracy z formularzami HTML.

Zdarzenia JavaScript

Prototype zapewnia doskonałą obsługę wielu przeglądarek podczas kodowania zdarzeń, a także rozszerza obiekt Function, aby ułatwić pracę z obsługą zdarzeń.

Ajax Utilities

Najważniejszą cechą Prototype jest wsparcie dla Ajax. Wszystkie główne przeglądarki obsługują wersję obiektu XMLHttpRequest, która umożliwia Ajax jako komponent ActiveX lub natywny obiekt JavaScript.

Jednak XMLHttpRequest eksponuje protokół HTTP na bardzo niskim poziomie, co daje programiście dużą moc, ale także wymaga od niej pisania dużej ilości kodu, aby robić proste rzeczy.

Prototype używa własnego systemu dziedziczenia obiektów, aby zapewnić hierarchię obiektów pomocniczych Ajax, z bardziej ogólnymi klasami bazowymi, które są podklasy przez bardziej skoncentrowane pomocniki, które pozwalają na kodowanie najpopularniejszych typów żądań Ajax w jednej linii.

Biblioteka Prototype zawiera wiele predefiniowanych obiektów i funkcji narzędziowych. Możesz używać tych funkcji i obiektów bezpośrednio w programowaniu JavaScript.

Metody te są jednym z kamieni węgielnych wydajnego kodowania JavaScript opartego na prototypach. Poświęć trochę czasu na ich przestudiowanie, aby zaznajomić się z metodami.

W tym rozdziale opisano wszystkie przydatne metody wraz z przykładami.

S.No.	Metoda i opis
1.	$ () Jeśli podano ciąg znaków, zwraca element w dokumencie o zgodnym identyfikatorze; w przeciwnym razie zwraca przekazany element.
2.	$$ () Pobiera dowolną liczbę selektorów CSS (ciągów znaków) i zwraca tablicę kolejności dokumentów zawierającą rozszerzone elementy DOM, które pasują do dowolnego z nich.
3.	$ A () Konwertuje pojedynczy otrzymany argument na obiekt Array.
4.	$ F () Zwraca wartość kontrolki formularza. To jest wygodny alias Form.Element.getValue.
5.	$ H () Konwertuje obiekty na wyliczalne obiekty Hash, które przypominają tablice asocjacyjne.
6.	$ R () Tworzy nowy obiekt ObjectRange.
7.	$ w () Dzieli ciąg na tablicę, traktując wszystkie białe znaki jako ograniczniki.
8.	Spróbuj tych Akceptuje dowolną liczbę funkcji i zwraca wynik pierwszej, która nie zgłasza błędu.

document.getElementsByClassName

Ta metoda pobiera (i rozszerza) wszystkie elementy, które mają nazwę klasy CSS ClassName .

Jednak ta metoda jest przestarzała w najnowszych wersjach Prototype.

Obiekt Element zapewnia różne funkcje użytkowe do manipulowania elementami w DOM.

Oto lista wszystkich funkcji narzędziowych wraz z przykładami. Wszystkie zdefiniowane tutaj metody są automatycznie dodawane do każdego elementu, do którego można uzyskać dostęp za pomocą funkcji $ ().

Tak więc pisząc Element.show ('firstDiv'); to to samo, co napisanie $ ('firstDiv'). show ();

Metoda elementów prototypowych

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	absolutyzować() Zamienia element w element pozycjonowany absolutnie bez zmiany jego pozycji w układzie strony.
2.	addClassName () Dodaje podaną nazwę klasy CSS do nazw klas elementu.
3.	addMethods () Umożliwia mieszanie własnych metod do obiektu Element, których możesz później użyć jako metod rozszerzonych elementów.
4.	sąsiadujący() Znajduje wszystkie elementy podrzędne bieżącego elementu, które pasują do podanych selektorów.
5.	przodkowie () Zbiera wszystkich przodków elementu i zwraca je jako tablicę elementów rozszerzonych.
6.	childElements () Zbiera wszystkie elementy podrzędne elementu i zwraca je jako tablicę elementów rozszerzonych.
7.	classNames() Przestarzałe. Zwraca nowe wystąpienie ClassNames, obiektu Enumerable używanego do odczytywania i zapisywania nazw klas CSS elementu.
8.	cleanWhitespace () Usuwa wszystkie węzły tekstowe elementu, które zawierają tylko spacje. Zwraca element.
9.	clonePosition () Klonuje pozycję i / lub wymiary źródła na element zgodnie z definicją opcjonalnych opcji argumentów.
10.	cumulativeOffset () Zwraca przesunięcia elementu z lewego górnego rogu dokumentu.
11.	cumulativeScrollOffset () Oblicza skumulowane przesunięcie przewijania elementu w zagnieżdżonych kontenerach przewijania.
12.	descendantOf () Sprawdza, czy element jest potomkiem przodka.
13.	potomków() Zbiera wszystkie elementy potomne elementu i zwraca je jako tablicę elementów rozszerzonych.
14.	na dół() Zwraca pierwszy element podrzędny elementu, który jest zgodny z cssRule. Jeśli nie podano reguły cssRule, uwzględniane są wszystkie elementy podrzędne. Jeśli żaden element podrzędny nie spełnia tych kryteriów, zwracany jest undefined.
15.	pusty() Sprawdza, czy element jest pusty (tj. Zawiera tylko spacje).
16.	poszerzać() Rozszerza element o wszystkie metody zawarte w Element.Methods i Element.Methods.Simulated.
17.	ogień() Uruchamia zdarzenie niestandardowe, którego celem jest bieżący element.
18.	firstDescendant () Zwraca pierwsze dziecko, które jest elementem. Jest to przeciwieństwo właściwości firstChild DOM, która zwraca dowolny węzeł.
19.	getDimensions () Znajduje obliczoną szerokość i wysokość elementu i zwraca je jako pary klucz / wartość obiektu.
20.	getElementsByClassName Przestarzałe. Pobiera wszystkie elementy potomne elementu, które mają klasę CSS className i zwraca je jako tablicę elementów rozszerzonych. Użyj $$ ().
21.	getElementsBySelector Przestarzałe. Pobiera dowolną liczbę selektorów CSS (ciągów znaków) i zwraca tablicę rozszerzonych elementów potomnych elementu, które pasują do dowolnego z nich. Użyj $$ ().
22.	getHeight () Znajduje i zwraca obliczoną wysokość elementu.
23.	getOffsetParent () Zwraca najbliższy przodek elementu. Jeśli nie zostanie znaleziony, zwracany jest element body.
24.	getStyle () Zwraca podaną wartość właściwości CSS elementu. Właściwość można określić w postaci CSS lub kamelizowanej.
25.	getWidth () Znajduje i zwraca obliczoną szerokość elementu.
26.	hasClassName () Sprawdza, czy element ma podaną nazwę klasy CSS.
27.	ukryć() Ukrywa i zwraca element.
28.	zidentyfikować() Zwraca atrybut id elementu, jeśli istnieje, lub ustawia i zwraca unikalny, wygenerowany automatycznie identyfikator.
29.	immediateDescendants() Przestarzałe. Zbiera wszystkie bezpośrednie elementy potomne elementu (tj. Dzieci) i zwraca je jako tablicę elementów rozszerzonych. Proszę użyć childElements ().
30.	wstawić() Wstawia zawartość przed, po, na górze lub na dole elementu.
31.	sprawdzać() Zwraca zorientowaną na debugowanie reprezentację ciągu elementu.
32.	makeClipping () Symuluje słabo obsługiwaną właściwość klipu CSS, ustawiając wartość przepełnienia elementu na „ukryty”. Zwraca element.
33.	makePositioned () Pozwala na łatwe tworzenie bloku zawierającego CSS poprzez ustawienie pozycji CSS elementu na „względne”, jeśli jego początkowa pozycja jest „statyczna” lub nieokreślona. Zwraca element.
34.	mecz() Sprawdza, czy element pasuje do podanego selektora CSS.
35.	Kolejny() Zwraca następujący element równorzędny elementu, który pasuje do podanej reguły cssRule.
36.	nextSiblings () Zbiera wszystkie następne elementy rodzeństwa elementu i zwraca je jako tablicę elementów rozszerzonych.
37.	przestrzegać() Rejestruje procedurę obsługi zdarzeń w elemencie i zwraca element.
38.	positionedOffset () Zwraca przesunięcie elementu względem jego najbliższego przodka.
39.	poprzedni () Zwraca poprzedni element równorzędny elementu, który pasuje do podanej reguły cssRule.
40.	previousSiblings () Zbiera wszystkie poprzednie elementy rodzeństwa i zwraca je jako tablicę elementów rozszerzonych.
41.	readAttribute () Zwraca wartość atrybutu elementu lub null, jeśli atrybut nie został określony.
42.	recursivelyCollect () Rekurencyjnie zbiera elementy, których relacja jest określona przez właściwość.
43.	relatywizować () Zmienia element w element pozycjonowany względnie bez zmiany jego pozycji w układzie strony.
44.	usunąć () Całkowicie usuwa element z dokumentu i zwraca go.
45.	removeClassName () Usuwa nazwę klasy CSS elementu i zwraca element.
46.	zastąpić () Zastępuje element treścią argumentu html i zwraca usunięty element.
47.	scrollTo () Przewija okno, tak aby element pojawił się u góry rzutni. Zwraca element.
48.	Wybierz() Pobiera dowolną liczbę selektorów CSS (ciągów znaków) i zwraca tablicę rozszerzonych elementów potomnych elementu, który pasuje do dowolnego z nich.
49.	setOpacity () Ustawia przezroczystość wizualną elementu podczas obchodzenia się z niespójnościami w różnych przeglądarkach.
50.	setStyle () Modyfikuje właściwości stylu CSS elementu.
51.	pokazać() Wyświetla i zwraca element.
52.	rodzeństwo() Zbiera wszystkie elementy rodzeństwa elementu i zwraca je jako tablicę elementów rozszerzonych.
53.	stopObserving () Wyrejestrowuje procedurę obsługi i zwraca element.
54.	przełącznik() Przełącza widoczność elementu.
55.	toggleClassName () Przełącza nazwę klasy CSS elementu i zwraca element.
56.	undoClipping () Ustawia właściwość CSS przepełnienia elementu z powrotem na wartość, którą miała przed zastosowaniem elementu Element.makeClipping (). Zwraca element.
57.	undoPositioned () Ustawia element z powrotem do stanu, w jakim był przed zastosowaniem do niego elementu Element.makePositioned. Zwraca element.
58.	w górę() Zwraca pierwszego przodka elementu, który pasuje do podanej reguły cssRule.
59.	aktualizacja() Zastępuje zawartość elementu podanym argumentem newContent i zwraca element.
60.	viewportOffset () Zwraca współrzędne X / Y elementu względem rzutni.
61.	widoczny() Zwraca wartość logiczną wskazującą, czy element jest widoczny.
62.	owinąć() Zawija element wewnątrz innego, a następnie zwraca opakowanie.
63.	writeAttribute () Dodaje, określa lub usuwa atrybuty przekazane jako skrót lub para nazwa / wartość.

Prototype rozszerza natywne numery JavaScript, aby zapewnić -

Zgodność z ObjectRange, poprzez Number # succ.
Pętle numeryczne w stylu Ruby z liczbą # razy.
Proste metody narzędziowe, takie jak Number # toColorPart i Number # toPaddedString.

Oto lista wszystkich funkcji wraz z przykładami dotyczącymi liczb.

Metoda numeracji prototypu

NOTE - Upewnij się, że masz wersję prototype.js 1.6.

S.No.	Metoda i opis
1.	abs () Zwraca wartość bezwzględną liczby.
2.	stropować() Zwraca najmniejszą liczbę całkowitą większą lub równą podanej liczbie.
3.	podłoga() Zwraca największą liczbę całkowitą mniejszą lub równą tej liczbie.
4.	okrągły() Zaokrągla liczbę do najbliższej liczby całkowitej.
5.	succ () Zwraca następcę bieżącej liczby, zgodnie z definicją current + 1. Służy do zapewnienia zgodności liczb z ObjectRange.
6.	czasy() Hermetyzuje regularną pętlę [0..n] w stylu Rubiego.
7.	toColorPart () Tworzy dwucyfrową szesnastkową reprezentację liczby (dlatego zakłada się, że należy do zakresu [0..255]). Przydatne do tworzenia ciągów kolorów CSS.
8.	toJSON () Zwraca ciąg JSON.
9.	toPaddedString () Konwertuje liczbę na ciąg z zerami, tak aby długość ciągu była co najmniej równa długości.

Prototype rozszerza obiekt String o szereg użytecznych metod, od prostych po złożone.

Oto lista wszystkich funkcji wraz z przykładami dotyczącymi String.

Prototypowe metody łańcuchów

NOTE - Upewnij się, że masz wersję prototype.js 1.6.

S.No.	Metoda i opis
1.	pusty() Sprawdza, czy ciąg jest „pusty”, co oznacza, że jest pusty lub zawiera tylko spacje.
2.	camelize () Konwertuje ciąg oddzielony myślnikami na odpowiednik camelCase. Na przykład „foo-bar” zostanie przekonwertowany na „fooBar”.
3.	skapitalizować() Zamienia pierwszą literę ciągu na wielką literę i zamienia wszystkie pozostałe na małe litery.
4.	dasherize () Zastępuje każde wystąpienie znaku podkreślenia („_”) myślnikiem („-”).
5.	pusty() Sprawdza, czy ciąg jest pusty.
6.	kończy się () Sprawdza, czy ciąg kończy się podciągiem.
7.	escapeHTML () Konwertuje znaki specjalne HTML na ich odpowiedniki encji.
8.	evalJSON () Ocenia kod JSON w ciągu i zwraca wynikowy obiekt.
9.	evalScripts () Ocenia zawartość dowolnego bloku skryptu obecnego w ciągu. Zwraca tablicę zawierającą wartość zwracaną przez każdy skrypt.
10.	extractScripts () Wyodrębnia zawartość dowolnego bloku skryptu obecnego w ciągu i zwraca ją jako tablicę ciągów.
11.	gsub () Zwraca ciąg, w którym każde wystąpienie danego wzorca zostało zastąpione zwykłym ciągiem, wartością zwróconą funkcji lub ciągiem szablonu.
12.	zawierać() Sprawdza, czy ciąg zawiera podciąg.
13.	sprawdzać() Zwraca wersję ciągu zorientowaną na debugowanie.
14.	interpolować() Traktuje ciąg jako szablon i wypełnia go właściwościami obiektu.
15.	isJSON () Sprawdza, czy ciąg jest prawidłowym formatem JSON, używając wyrażeń regularnych. Ta metoda zabezpieczeń jest wywoływana wewnętrznie.
16.	parseQuery () Analizuje ciąg zapytania podobny do identyfikatora URI i zwraca obiekt złożony z par parametr / wartość.
17.	skanowanie() Pozwala na iterację po każdym wystąpieniu danego wzorca.
18.	zaczynać z() Sprawdza, czy ciąg zaczyna się od podłańcucha.
19.	rozebrać się() Usuwa wszystkie początkowe i końcowe spacje z ciągu.
20.	stripScripts () Usuwa ciąg wszystkiego, co wygląda jak blok skryptu HTML.
21.	stripTags () Usuwa ciąg dowolnego tagu HTML.
22.	pod() Zwraca ciąg znaków, w którym pierwsze zliczane wystąpienia wzorca zostały zastąpione zwykłym ciągiem znaków, wartością zwróconą funkcji lub ciągiem szablonu.
23.	succ () Używany wewnętrznie przez ObjectRange. Konwertuje ostatni znak ciągu na następujący znak alfabetu Unicode.
24.	czasy() Łączy liczbę ciągów znaków.
25.	toArray () Dzieli ciąg znak po znaku i zwraca tablicę z wynikiem.
26.	toJSON () Zwraca ciąg JSON.
27.	toQueryParams () Analizuje ciąg zapytania podobny do identyfikatora URI i zwraca obiekt złożony z par parametr / wartość.
28.	ścięty() Obcina ciąg do podanej długości i dodaje do niego przyrostek (wskazujący, że jest to tylko fragment).
29.	podkreślać() Konwertuje kamelizowany ciąg na serię słów oddzielonych podkreśleniem („_”).
30.	unescapeHTML () Usuwa znaczniki i konwertuje formy encji specjalnych znaków HTML do ich normalnej postaci.
31.	unfilterJSON () Usuwa ograniczniki komentarzy wokół odpowiedzi Ajax JSON lub JavaScript. Ta metoda zabezpieczeń jest wywoływana wewnętrznie.

Prototype rozszerza wszystkie natywne tablice JavaScript za pomocą kilku potężnych metod.

Odbywa się to na dwa sposoby -

Miesza się w module Enumerable, który już zawiera mnóstwo metod.
Dodaje kilka dodatkowych metod, które są udokumentowane w tej sekcji.

Korzystanie z iteratorów

Jedną z ważnych funkcji zapewnianych przez Prototype jest to, że możesz używać iteratora java, podobnie jak w JavaScript. Zobacz różnicę poniżej -

Tradycyjny sposób pisania a for pętla -

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

Teraz, jeśli używasz Prototype, możesz zamienić powyższy kod w następujący sposób -

myArray.each(function(item) {
   // Your code working on item here...
});

Oto lista wszystkich funkcji wraz z przykładami dotyczącymi Array.

Prototypowe metody tablicowe

NOTE - Upewnij się, że masz wersję prototype.js 1.6.

S.No.	Metoda i opis
1.	jasny() Czyści tablicę (czyni ją pustą).
2.	klon () Zwraca duplikat tablicy, pozostawiając oryginalną tablicę nienaruszoną.
3.	kompaktowy() Zwraca nową wersję tablicy, bez wartości null / undefined.
4.	każdy() Iteruje po tablicy w rosnącej kolejności indeksów liczbowych.
5.	pierwszy() Zwraca pierwszy element w tablicy lub wartość undefined, jeśli tablica jest pusta.
6.	spłaszczyć() Zwraca „płaską” (jednowymiarową) wersję tablicy.
7.	od() Klonuje istniejącą tablicę lub tworzy nową z kolekcji przypominającej tablicę.
8.	indeks() Zwraca pozycję pierwszego wystąpienia argumentu w tablicy.
9.	sprawdzać() Zwraca zorientowaną na debugowanie reprezentację ciągu tablicy.
10.	ostatni, ubiegły, zeszły() Zwraca ostatni element tablicy lub wartość undefined, jeśli tablica jest pusta.
11.	zmniejszyć() Redukuje tablice: tablice jednoelementowe są zamieniane w ich unikalny element, podczas gdy tablice wieloelementowe są zwracane nietknięte.
12.	odwrócić() Zwraca odwróconą wersję tablicy. Domyślnie bezpośrednio odwraca oryginał. Jeśli inline ma wartość false, używa klonu oryginalnej tablicy.
13.	rozmiar() Zwraca rozmiar tablicy.
14.	toArray () To jest po prostu lokalna optymalizacja mieszanej tablicy toArray z Enumerable.
15.	toJSON () Zwraca ciąg JSON.
16.	uniq () Tworzy wersję tablicy bez duplikatów. Jeśli nie zostaną znalezione żadne duplikaty, zwracana jest oryginalna tablica.
17.	bez() Tworzy nową wersję tablicy, która nie zawiera żadnej z określonych wartości.

Hash można traktować jako tablicę asocjacyjną wiążącą unikalne klucze z wartościami. Jedyną różnicą jest to, że możesz użyć dowolnego ciągu jako indeksu, zamiast po prostu używać liczby jako indeksu.

Tworzenie skrótu

Istnieją dwa sposoby tworzenia instancji Hash -

Użyj słowa kluczowego JavaScript new .
Korzystanie z funkcji Prototype Utility $ h .

Aby utworzyć pusty hash, należy również wywołać dowolną z metod konstruktora bez argumentów.

Poniżej znajduje się przykład pokazujący, jak tworzyć hash, ustawiać wartości i pobierać wartości w prosty sposób -

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype zapewnia szeroką gamę metod łatwej oceny Hash. Ten samouczek szczegółowo objaśni każdą metodę z odpowiednimi przykładami.

Oto pełna lista wszystkich metod związanych z Hash.

Prototypowe metody haszowania

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	klon () Zwraca klon skrótu.
2.	każdy() Iteruje po parach nazwa / wartość w skrócie.
3.	dostać() Zwraca wartość właściwości klucza skrótu.
4.	sprawdzać() Zwraca ciąg znaków reprezentujący skrót zorientowany na debugowanie.
5.	Klucze() Zapewnia tablicę kluczy (czyli nazw właściwości) dla skrótu.
6.	łączyć() Łączy obiekt z hashem i zwraca wynik tego scalenia.
7.	usunąć() Usuwa klucze z skrótu i zwraca ich wartości. Ta metoda została wycofana w wersji 1.6.
8.	zestaw() Ustawia właściwość klucza skrótu na wartość i zwraca wartość.
9.	toJSON () Zwraca ciąg JSON.
10.	sprzeciwiać się() Zwraca sklonowany obiekt waniliowy.
11.	toQueryString () Zamienia skrót w reprezentację ciągu zapytania zakodowanego w postaci adresu URL.
12.	nieoprawny() Usuwa właściwość klucza skrótu i zwraca jego wartość.
13.	aktualizacja() Aktualizuje skrót za pomocą par klucz / wartość obiektu. Oryginalny hash zostanie zmodyfikowany.
14.	wartości () Zbiera wartości skrótu i zwraca je w tablicy.

Object jest używany przez Prototype jako przestrzeń nazw i do wywoływania powiązanej funkcji przy użyciu obiektu Object . Jest to używane na dwa następujące sposoby -

Jeśli jesteś prostym programistą, możesz użyć istniejących funkcji, takich jak inspekcja lub klonowanie .
Jeśli jesteś osobą, która chce tworzyć własne obiekty, takie jak Prototype, lub eksplorować obiekty tak, jakby były one hashami, zwróci się do rozszerzenia , kluczy i wartości .

Prototypowe metody obiektów

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	klon () Klonuje przekazany obiekt przy użyciu płytkiej kopii (kopiuje wszystkie właściwości oryginału do wyniku).
2.	poszerzać() Kopiuje wszystkie właściwości ze źródła do obiektu docelowego.
3.	sprawdzać() Zwraca zorientowaną na debugowanie reprezentację obiektu w postaci ciągu.
4.	isArray () Zwraca wartość true, jeśli obj jest tablicą, w przeciwnym razie zwraca wartość false.
5.	isElement () Zwraca wartość true, jeśli obj jest węzłem DOM typu 1, w przeciwnym razie zwraca wartość false.
6.	isFunction () Zwraca wartość true, jeśli obj jest typu function, w przeciwnym razie zwraca wartość false.
7.	isHash () Zwraca wartość true, jeśli obj jest instancją klasy Hash, w przeciwnym razie zwraca wartość false.
8.	isNumber () Zwraca wartość true, jeśli obj jest typu number, w przeciwnym razie zwraca wartość false.
9.	isString () Zwraca wartość true, jeśli obj jest typu string, w przeciwnym razie zwraca wartość false.
10.	isUndefined () Zwraca wartość true, jeśli obj jest typu undefined, w przeciwnym razie zwraca wartość false.
11.	Klucze() Traktuje dowolny obiekt jako Hash i pobiera listę nazw jego właściwości.
12.	toHTML () Zwraca wartość zwracaną przez metodę obj toHTML, jeśli istnieje, w przeciwnym razie uruchamia obj przez String.interpret.
13.	toJSON () Zwraca ciąg JSON.
14.	toQueryString () Zamienia obiekt w reprezentację ciągu zapytania zakodowanego w postaci adresu URL.
15.	wartości () Traktuje dowolny obiekt jako Hash i pobiera listę jego wartości właściwości.

Szablony służą do formatowania grupy podobnych obiektów i do tworzenia sformatowanych danych wyjściowych dla tych obiektów.

Prototype udostępnia klasę Template , która ma dwie metody -

Template()- Jest to metoda konstruktora, która służy do tworzenia obiektu szablonu i wywoływania metody assessment () w celu zastosowania szablonu.
evaluate() - Ta metoda służy do zastosowania szablonu w celu sformatowania obiektu.

Utworzenie sformatowanego pliku wyjściowego obejmuje trzy kroki.

Create a template- Wiąże się to z utworzeniem wstępnie sformatowanego tekstu. Ten tekst zawiera sformatowaną zawartość wraz z#{fieldName}wartości. Te#{fieldName}wartości zostaną zastąpione wartościami rzeczywistymi, gdy metoda assessment () zostanie wywołana z wartościami rzeczywistymi.
Defining actual values- Wiąże się to z tworzeniem rzeczywistych wartości w postaci kluczy i wartości. Te klucze zostaną zmapowane w szablonie i zostaną zastąpione odpowiednimi wartościami.
Mapping Keys and replacing Values- To jest ostatni krok, w którym zostanie wywołana metoda assessment () , a wszystkie klucze dostępne w sformatowanym obiekcie zostaną zastąpione zdefiniowanymi wartościami.

Przykład 1

Krok 1

Utwórz szablon.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

Krok 2

Przygotuj nasz zestaw wartości, które zostaną przekazane w powyższym obiekcie, aby uzyskać sformatowane wyjście.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

Krok 3

Ostatnim krokiem jest wypełnienie wszystkich wartości w szablonie i uzyskanie końcowego wyniku w następujący sposób -

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

Więc połączmy wszystkie te trzy kroki razem -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

To da następujący wynik -

Wynik

Klasa Enumerable zapewnia duży zestaw przydatnych metod do wyliczeń. Wyliczenia to obiekty, które działają jako zbiór wartości.

Metody wyliczania są najczęściej używane do wyliczania tablic i skrótów . Istnieją inne obiekty, jak ObjectRange i różne obiekty związane z DOM lub AJAX, w których można używać metod wyliczania.

Parametr kontekstu

Każda metoda Enumerable, która przyjmuje iterator, przyjmuje również obiekt kontekstu jako następny (opcjonalny) parametr. Obiekt kontekstu jest tym, z czym będzie powiązany iterator, więc plikthis słowo kluczowe wewnątrz będzie wskazywało na obiekt.

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

To da następujący wynik -

Wynik

{ foo: 0, bar: 1, baz: 2}

Efektywne korzystanie z niego

Jeśli chcesz wywołać tę samą metodę na wszystkich elementach, skorzystaj z metody invoke () .
Jeśli chcesz pobrać tę samą właściwość dla wszystkich elementów, użyj metody pluck () .
Metody findAll / select pobierają wszystkie elementy, które pasują do danego predykatu. I odwrotnie, metoda throw () pobiera wszystkie elementy, które nie pasują do predykatu. W konkretnym przypadku, gdy potrzebujesz obu zestawów, możesz uniknąć podwójnego zapętlenia: po prostu użyj metody partition () .

Oto pełna lista wszystkich metod związanych z Enumerable.

Prototypowe wyliczalne metody

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	wszystko() Określa, czy wszystkie elementy są logiczne równoważne true, bezpośrednio lub poprzez obliczenia przez podany iterator.
2.	każdy() Określa, czy co najmniej jeden element jest logiczny równoważny z true, bezpośrednio lub przez obliczenia przez podany iterator.
3.	zbierać() Zwraca wyniki zastosowania iteratora do każdego elementu. Aliasowany jako map ().
4.	wykryć() Znajduje pierwszy element, dla którego iterator zwraca wartość true. Aliasowane przez metodę find ().
5.	każdy() Pozwala na iterację wszystkich elementów w sposób ogólny, a następnie zwraca Enumerable, umożliwiając w ten sposób wywoływanie łańcuchowe.
6.	eachSlice () Grupuje elementy w porcje na podstawie podanego rozmiaru, przy czym ostatnia porcja może być mniejsza.
7.	wpisy () Alias dla bardziej ogólnej metody toArray.
8.	odnaleźć() Znajduje pierwszy element, dla którego iterator zwraca wartość true. Wygodny alias do wykrywania ().
9.	Znajdź wszystko() Zwraca wszystkie elementy, dla których iterator zwrócił wartość true. Z aliasami select ().
10.	grep () Zwraca wszystkie elementy zgodne z filtrem. Jeśli podano iterator, jest on używany do tworzenia zwracanej wartości dla każdego wybranego elementu.
11.	inGroupsOf () Grupuje elementy w porcje o stałym rozmiarze, używając określonej wartości, aby wypełnić ostatnią porcję, jeśli to konieczne.
12.	zawierać() Określa, czy dany obiekt znajduje się w Enumerable, czy nie, na podstawie operatora porównania ==. Alias jako członek ().
13.	wstrzykiwać() Przyrostowo buduje wartość wyniku na podstawie kolejnych wyników iteratora.
14.	odwołać się() Optymalizacja pod kątem wspólnego przypadku użycia each () lub collect (): wywołanie tej samej metody z tymi samymi potencjalnymi argumentami dla wszystkich elementów.
15.	mapa() Zwraca wyniki zastosowania iteratora do każdego elementu. Wygodny alias do metody collect ().
16.	max () Zwraca maksymalną wartość elementu (lub obliczenia oparte na elementach) lub wartość undefined, jeśli wyliczenie jest puste. Elementy są porównywane bezpośrednio lub najpierw przez zastosowanie iteratora i porównanie zwracanych wartości.
17.	członek() Określa, czy dany obiekt znajduje się w Enumerable, czy nie, na podstawie operatora porównania ==. Wygodny alias funkcji include ().
18.	min () Zwraca minimalny element (lub obliczenia oparte na elementach) lub undefined, jeśli wyliczenie jest puste. Elementy są porównywane bezpośrednio lub najpierw przez zastosowanie iteratora i porównanie zwracanych wartości.
19.	przegroda() Dzieli elementy na dwie grupy: te uważane za prawdziwe i uważane za fałszywe.
20.	podroby() Optymalizacja pod kątem typowego zastosowania metody collect (): pobieranie tej samej właściwości dla wszystkich elementów. Zwraca wartości właściwości.
21.	odrzucać() Zwraca wszystkie elementy, dla których iterator zwrócił false.
22.	Wybierz() Alias metody findAll ().
23.	rozmiar() Zwraca rozmiar wyliczenia.
24.	Sortuj według() Zapewnia niestandardowo posortowany widok elementów na podstawie kryteriów obliczonych dla każdego elementu przez iterator.
25.	toArray () Zwraca reprezentację wyliczenia w postaci tablicy. Z aliasami jako wpisy ().
26.	zamek błyskawiczny() Zapinane razem (pomyśl o suwaku w spodniach) 2 + sekwencje, zapewniając szereg krotek. Każda krotka zawiera jedną wartość na oryginalną sekwencję.

Zarządzanie zdarzeniami to jedno z największych wyzwań przy wykonywaniu skryptów w różnych przeglądarkach. Każda przeglądarka ma inne podejście do obsługi naciśnięć klawiszy.

Prototype Framework rozwiązuje wszystkie problemy ze zgodnością z różnymi przeglądarkami i pozwala uniknąć wszelkich problemów związanych z zarządzaniem zdarzeniami.

Prototype Framework zapewnia przestrzeń nazw zdarzeń , która jest pełna metod, które przyjmują bieżący obiekt zdarzenia jako argument i szczęśliwie generują żądane informacje we wszystkich głównych przeglądarkach.

Przestrzeń nazw zdarzeń zawiera również znormalizowaną listę kodów kluczy, których można używać ze zdarzeniami związanymi z klawiaturą. W przestrzeni nazw zdefiniowano następujące stałe -

S.No.	Kluczowa stała i opis
1.	KEY_BACKSPACE Reprezentuj klawisz spacji.
2.	KEY_TAB Reprezentuj klawisz tabulacji.
3.	KEY_RETURN Reprezentują klucz powrotu.
4.	KEY_ESC Reprezentuj klawisz esc.
5.	KEY_LEFT Reprezentują lewy klawisz.
6.	KEY_UP Reprezentuj klucz.
7.	KEY_RIGHT Reprezentują właściwy klucz.
8.	KEY_DOWN Reprezentuj klawisz dolny.
9.	KEY_DELETE Reprezentują klawisz usuwania.
10.	KEY_HOME Reprezentuj klucz domowy.
11.	KEY_END Reprezentują klawisz zakończenia.
12.	KEY_PAGEUP Reprezentuj klawisz w górę.
13.	KEY_PAGEDOWN Reprezentuj klawisz strony w dół.

Jak obsługiwać zdarzenia

Zanim zaczniemy, zobaczmy przykład użycia metody zdarzenia. Ten przykład pokazuje, jak przechwycić element DOM, na którym wystąpiło zdarzenie.

Przykład

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Wynik

Oto pełna lista wszystkich metod związanych z Event. Funkcje, z których najprawdopodobniej będziesz często korzystać, to obserwacja , element i zatrzymywanie .

Prototypowe metody zdarzeń

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	element() Zwraca element DOM, w którym wystąpiło zdarzenie.
2.	poszerzać() Rozszerza zdarzenie o wszystkie metody zawarte w Event.Methods.
3.	findElement () Zwraca pierwszy element DOM o podanej nazwie tagu w górę od tego, na którym nastąpiło zdarzenie.
4.	isLeftClick () Określa, czy zdarzenie myszy związane z przyciskiem dotyczyło „lewego” (właściwie głównego) przycisku.
5.	przestrzegać() Rejestruje procedurę obsługi zdarzeń w elemencie DOM.
6.	pointerX () Zwraca bezwzględne położenie poziome zdarzenia myszy.
7.	pointerY () Zwraca bezwzględne położenie w pionie dla zdarzenia myszy.
8.	zatrzymać() Zatrzymuje propagację zdarzenia i zapobiega w końcu wywołaniu jego domyślnej akcji.
9.	stopObserving () Wyrejestrowuje procedurę obsługi zdarzeń.
10.	unloadCache () Wyrejestrowuje wszystkie programy obsługi zdarzeń zarejestrowane za pomocą programu follow. Automatycznie połączone dla Ciebie. Niedostępne od 1.6.

Prototype zapewnia łatwy sposób zarządzania formularzami HTML. Prototype's Form to przestrzeń nazw i moduł dla wszystkich rzeczy związanych z formularzami, wypełniony dobrymi manipulacjami formami i serializacją.

Chociaż zawiera metody zajmujące się formularzami jako całością, jego podmoduł Form.Element zajmuje się określonymi kontrolkami formularzy.

Oto pełna lista wszystkich metod związanych z Form Element.

Metody formularza prototypowego

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	wyłączyć() Wyłącza cały formularz. Kontrolki formularza będą widoczne, ale nie będzie można ich edytować.
2.	włączyć() Włącza całkowicie lub częściowo wyłączony formularz.
3.	findFirstElement () Znajduje pierwszą nieukrytą, nieaktywną kontrolkę formularza.
4.	focusFirstElement () Nadaje fokus klawiaturze do pierwszego elementu formularza.
5.	getElements () Zwraca kolekcję wszystkich kontrolek formularza w formularzu.
6.	getInputs () Zwraca kolekcję wszystkich elementów INPUT w formularzu. Użyj opcjonalnych argumentów typu i nazwy, aby ograniczyć wyszukiwanie tych atrybutów.
7.	żądanie() Wygodna metoda serializacji i przesyłania formularza za pośrednictwem Ajax.Request na adres URL atrybutu akcji formularza. Parametr options jest przekazywany do instancji Ajax.Request, co pozwala na przesłonięcie metody HTTP i określenie dodatkowych parametrów.
8.	Resetowanie() Resetuje formularz do wartości domyślnych.
9.	serialize () Serializuj dane formularza do łańcucha odpowiedniego dla żądań Ajax (zachowanie domyślne) lub, jeśli opcja getHash ma wartość true, do skrótu obiektu, w którym klucze są nazwami formantów, a wartości są danymi.
10.	serializeElements () Serializuj tablicę elementów formularza do łańcucha odpowiedniego dla żądań Ajax (zachowanie domyślne) lub, jeśli opcja getHash ma wartość true, hash obiektu, gdzie klucze są nazwami formantów, a wartości są danymi.

Wprowadzenie do JSON

JSON (JavaScript Object Notation) to lekki format wymiany danych.

JSON jest łatwy do czytania i pisania dla ludzi.
JSON jest łatwy do analizowania i generowania przez maszyny.
JSON jest oparty na podzbiorze języka programowania JavaScript.
JSON jest szczególnie używany przez interfejsy API w całej sieci i jest szybką alternatywą dla XML w żądaniach Ajax.
JSON to format tekstowy, który jest całkowicie niezależny od języka.

Prototype 1.5.1 i nowsze wersje obsługują kodowanie JSON i obsługę analizowania.

Kodowanie JSON

Prototype zapewnia następujące metody kodowania -

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	Number.toJSON () Zwraca ciąg JSON dla podanej liczby.
2.	String.toJSON () Zwraca ciąg JSON dla podanego ciągu.
3.	Array.toJSON () Zwraca ciąg JSON dla podanej tablicy.
4.	Hash.toJSON () Zwraca ciąg JSON dla podanego skrótu.
5.	Date.toJSON () Konwertuje datę na ciąg JSON (zgodnie z formatem ISO używanym przez JSON).
6.	Object.toJSON () Zwraca ciąg JSON dla danego obiektu.

Jeśli nie masz pewności co do typu danych, które chcesz zakodować, najlepiej jest użyć Object.toJSON, więc -

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

To da następujący wynik -

'{"name": "Violet", "occupation": "character", "age": 25}'

Ponadto, jeśli używasz obiektów niestandardowych, możesz ustawić własną metodę toJSON, która będzie używana przez Object.toJSON . Na przykład -

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

To da następujący wynik -

'"My name is John and I am 49 years old."'

Parsowanie JSON

W JavaScript analizowanie kodu JSON zwykle odbywa się poprzez ocenę zawartości ciągu JSON. Prototype wprowadza String.evalJSON, aby sobie z tym poradzić. Na przykład -

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

To da następujący wynik -

"Violet"

Używanie JSON z Ajax

Używanie JSON z Ajaxem jest bardzo proste. Po prostu wywołaj String.evalJSON na właściwości responseText transportu -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

Jeśli Twoje dane pochodzą z niezaufanego źródła, pamiętaj o ich oczyszczeniu -

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

Wprowadzenie do AJAX

AJAX oznacza Asynchroniczny JavaScript i XML. AJAX to nowa technika tworzenia lepszych, szybszych i bardziej interaktywnych aplikacji internetowych za pomocą XML, HTML, CSS i Java Script.

Aby uzyskać pełne zrozumienie technologii AJAX, przejdź do naszego prostego samouczka AJAX .

Prototypowa obsługa AJAX

Prototypowy framework umożliwia obsługę wywołań Ajax w bardzo łatwy i przyjemny sposób, który jest również bezpieczny (między przeglądarkami). Prototype radzi sobie również w inteligentny sposób z kodem JavaScript zwróconym z serwera i udostępnia klasy pomocnicze do odpytywania.

Funkcjonalność Ajax jest zawarta w globalnym obiekcie Ajax . Ten obiekt zapewnia wszystkie niezbędne metody do obsługi żądań i odpowiedzi AJAX w łatwy sposób.

Żądanie AJAX

Rzeczywiste żądania są tworzone przez tworzenie instancji obiektu Ajax.Request () .

new Ajax.Request('/some_url', { method:'get' });

Pierwszym parametrem jest adres URL żądania; drugi to skrót opcji. Opcja method odnosi się do metody HTTP, która ma zostać użyta; domyślną metodą jest POST.

Wywołania zwrotne odpowiedzi AJAX

Żądania Ajax są domyślnie asynchroniczne, co oznacza, że musisz mieć wywołania zwrotne, które będą obsługiwać dane z odpowiedzi. Metody wywołania zwrotnego są przekazywane w skrócie opcji podczas wysyłania żądania -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Tutaj w hashu przekazywane są dwa wywołania zwrotne -

onSuccess
onFailure

Każde z powyższych dwóch wezwań jest wywoływane odpowiednio w zależności od statusu odpowiedzi. Pierwszym parametrem przekazywanym do obu jest natywny obiekt xmlHttpRequest, z którego można używać odpowiednio jego właściwości responseText i responseXML .

Możesz określić oba wywołania zwrotne, jeden lub żaden - to zależy od Ciebie. Inne dostępne oddzwonienia to -

onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

Wszystkie pasują do określonego stanu transportu xmlHttpRequest , z wyjątkiem onException, który jest uruchamiany, gdy wystąpił wyjątek podczas wysyłania innych wywołań zwrotnych.

NOTE- Wywołania zwrotne onUninitialized, onLoading, onLoaded i onInteractive nie są implementowane konsekwentnie we wszystkich przeglądarkach. Ogólnie rzecz biorąc, najlepiej ich unikać.

Prototypowe metody AJAX

Obiekt AJAX udostępnia wszystkie niezbędne metody do obsługi żądań i odpowiedzi AJAX w łatwy sposób. Oto pełna lista wszystkich metod związanych z AJAX.

NOTE - Upewnij się, że masz co najmniej wersję 1.6 pliku prototype.js.

S.No.	Metoda i opis
1.	Opcje Ajax Nie jest to metoda, ale zawiera szczegółowe informacje o wszystkich podstawowych opcjach wspólnych dla wszystkich requesterów AJAX i wywołań zwrotnych.
2.	Ajax.PeriodicalUpdater () Okresowo wykonuje żądanie AJAX i aktualizuje zawartość kontenera na podstawie tekstu odpowiedzi.
3.	Ajax.Request () Inicjuje i przetwarza żądanie AJAX.
4.	Ajax.Responders () Repozytorium globalnych odbiorców powiadamianych o każdym kroku żądań AJAX opartych na prototypach.
5.	Ajax.Response () Obiekt przekazany jako pierwszy argument wszystkich żądań wywołań zwrotnych Ajax.
6.	Ajax.Updater () Wykonuje żądanie AJAX i aktualizuje zawartość kontenera na podstawie tekstu odpowiedzi.

Zakresy prototypów reprezentują przedziały wartości. Preferowanym sposobem uzyskania zakresu jest użycie rozszerzenia$R funkcja użyteczności.

Możesz utworzyć duży zakres wartości za pomocą prostej składni w następujący sposób -

$R(1, 10).inspect();

$R('a', 'e').inspect();

To da następujący wynik -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

Metoda include ()

Ta metoda określa, czy wartość należy do zakresu -

Składnia

Range.include(value);

Wartość zwracana

Jeśli wartość jest uwzględniona, zwraca wartość true, w przeciwnym razie false.

Przykład

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Wynik

Wielokrotnie wymagane jest wielokrotne wykonywanie funkcji po określonym czasie. Na przykład możesz chcieć odświeżyć ekran po określonym czasie. Prototype zapewnia prosty mechanizm implementacji go przy użyciu obiektu PeriodicalExecuter .

Zaletą PeriodicalExecuter jest to, że chroni Cię przed wieloma równoległymi wykonaniami funkcji zwrotnej.

Tworzenie PeriodicalExecuter

Konstruktor przyjmuje dwa argumenty -

Funkcja oddzwaniania.
Interwał (w sekundach) między wykonaniami.

Po uruchomieniu PeriodicalExecuter jest wyzwalany przez czas nieokreślony, aż do wyładowania strony lub zatrzymania modułu wykonawczego za pomocą metody stop () .

Przykład

Poniżej znajduje się przykład, w którym co 5 sekund pojawi się okno dialogowe, dopóki nie zatrzymasz go, naciskając przycisk „anuluj”.

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

Wynik