Nguyên mẫu - Hướng dẫn nhanh

Nguyên mẫu là gì?

Nguyên mẫu là một Khung công tác JavaScript nhằm mục đích dễ dàng phát triển các ứng dụng web động. Nguyên mẫu được phát triển bởi Sam Stephenson.

Prototype là một thư viện JavaScript, cho phép bạn thao tác DOM một cách rất dễ dàng và thú vị mà cũng an toàn (trình duyệt chéo).

Scriptaculous và các thư viện khác, chẳng hạn như Rico được xây dựng dựa trên nền tảng của Prototype để tạo ra các widget và các thứ khác cho người dùng cuối.

Prototype -

Mở rộng các phần tử DOM và các loại tích hợp với các phương thức hữu ích.
Có hỗ trợ tích hợp cho OOP kiểu lớp bao gồm cả kế thừa.
Có hỗ trợ nâng cao cho quản lý sự kiện.
Có các tính năng Ajax mạnh mẽ.
Không phải là một khung phát triển ứng dụng hoàn chỉnh.
Không cung cấp tiện ích con hoặc tập hợp đầy đủ các thuật toán tiêu chuẩn hoặc hệ thống I / O.

Làm thế nào để cài đặt nguyên mẫu?

Nguyên mẫu được phân phối dưới dạng một tệp duy nhất có tên là prototype.js. Làm theo các bước được đề cập dưới đây để thiết lập thư viện nguyên mẫu -

Truy cập trang tải xuống (http://prototypejs.org/download/) để tải phiên bản mới nhất trong một gói tiện lợi.
Bây giờ, hãy đặt tệp prototype.js vào thư mục trên trang web của bạn, ví dụ: / javascript.

Bây giờ bạn đã sẵn sàng để sử dụng khuôn khổ Nguyên mẫu mạnh mẽ trong các trang web của mình.

Làm thế nào để sử dụng Thư viện Nguyên mẫu?

Bây giờ, bạn có thể bao gồm kịch bản Prototype như sau:

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

Thí dụ

Đây là một ví dụ đơn giản cho thấy cách bạn có thể sử dụng hàm $ () của Prototype để lấy các phần tử DOM trong JavaScript của bạn -

<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>

Đầu ra

Tại sao Hướng dẫn này?

Một tài liệu rất tốt về Prototype Framework có sẵn tại prototypejs.org, vậy tại sao bạn nên tham khảo hướng dẫn này!

Câu trả lời là chúng tôi đã tổng hợp tất cả các chức năng được sử dụng phổ biến nhất lại với nhau trong hướng dẫn này. Thứ hai, chúng tôi đã giải thích tất cả các phương pháp hữu ích cùng với các ví dụ phù hợp, không có sẵn trên trang web chính thức.

Nếu bạn là người dùng nâng cao của Prototype Framework, thì bạn có thể chuyển trực tiếp đến trang web chính thức, nếu không thì hướng dẫn này có thể là một khởi đầu tốt cho bạn và bạn có thể sử dụng nó như một hướng dẫn tham khảo.

Bây giờ chúng ta hãy xem xét những gì Prototype có thể làm cụ thể để chúng ta phát triển một Ứng dụng Web Động.

Hỗ trợ trình duyệt chéo

Trong khi lập trình JavaScript, cần phải xử lý các Trình duyệt Web khác nhau theo cách khác nhau. Thư viện Nguyên mẫu đã được viết theo cách xử lý tất cả các vấn đề về tính tương thích và bạn có thể lập trình trình duyệt chéo mà không gặp bất kỳ rắc rối nào.

Mô hình đối tượng tài liệu

Prototype cung cấp các phương thức trợ giúp giúp giảm bớt một số khó khăn trong lập trình DOM. Sử dụng Prototype, bạn có thể thao tác DOM rất dễ dàng.

Biểu mẫu HTML

Với Ajax, các cơ chế nhập liệu khác như kéo và thả, có thể được sử dụng như một phần của cuộc trò chuyện giữa trình duyệt và máy chủ. Với lập trình JavaScript thông thường, rất khó để nắm bắt các đầu vào này và chuyển chúng đến máy chủ. Prototype cung cấp một tập hợp các tiện ích để làm việc với các biểu mẫu HTML.

Sự kiện JavaScript

Prototype cung cấp một số hỗ trợ tuyệt vời trên nhiều trình duyệt trong khi mã hóa các sự kiện và cũng mở rộng đối tượng Hàm để dễ dàng làm việc với xử lý sự kiện.

Tiện ích Ajax

Tính năng quan trọng nhất của Prototype là nó hỗ trợ cho Ajax. Tất cả các trình duyệt chính đều hỗ trợ một phiên bản của đối tượng XMLHttpRequest để làm cho Ajax trở nên khả thi, dưới dạng một thành phần ActiveX hoặc như một đối tượng JavaScript gốc.

Tuy nhiên, XMLHttpRequest cho thấy giao thức HTTP ở mức rất thấp, điều này mang lại cho nhà phát triển nhiều quyền lực, nhưng cũng yêu cầu cô ấy viết rất nhiều mã để làm những việc đơn giản.

Prototype sử dụng hệ thống kế thừa đối tượng của chính nó để cung cấp một hệ thống phân cấp của các đối tượng trợ giúp Ajax, với nhiều lớp cơ sở chung hơn được phân lớp bởi những người trợ giúp tập trung hơn cho phép các loại yêu cầu Ajax phổ biến nhất được mã hóa trong một dòng.

Thư viện Prototype đi kèm với rất nhiều đối tượng được xác định trước và các chức năng tiện ích. Bạn có thể sử dụng các hàm và đối tượng đó trực tiếp trong lập trình JavaScript của mình.

Các phương pháp này là một trong những nền tảng của mã hóa JavaScript dựa trên Nguyên mẫu hiệu quả. Dành một chút thời gian để nghiên cứu chúng để trở nên thoải mái với các phương pháp.

Chương này trình bày chi tiết tất cả các phương pháp hữu ích này với các ví dụ.

Không.	Phương pháp & Mô tả
1.	$ () Nếu được cung cấp một chuỗi, trả về phần tử trong tài liệu có ID phù hợp; nếu không thì trả về phần tử đã qua.
2.	$$ () Lấy một số bộ chọn CSS (chuỗi) tùy ý và trả về một mảng thứ tự tài liệu gồm các phần tử DOM mở rộng khớp với bất kỳ bộ chọn nào trong số chúng.
3.	$ A () Chuyển đổi một đối số mà nó nhận được thành một đối tượng Mảng.
4.	$ F () Trả về giá trị của một điều khiển biểu mẫu. Đây là một bí danh tiện lợi của Form.Element.getValue.
5.	$ H () Chuyển đổi các đối tượng thành các đối tượng Hash có thể liệt kê được giống như các mảng kết hợp.
6.	$ R () Tạo một đối tượng ObjectRange mới.
7.	$ w () Tách một chuỗi thành một Mảng, coi tất cả khoảng trắng là dấu phân cách.
số 8.	Thử những thứ này xem Chấp nhận một số hàm tùy ý và trả về kết quả của hàm đầu tiên không gây ra lỗi.

document.getElementsByClassName

Phương thức này truy xuất (và mở rộng) tất cả các phần tử có tên lớp CSS là className .

Tuy nhiên, phương pháp này đã không được chấp nhận trong các phiên bản mới nhất của Prototype.

Các phần tử đối tượng cung cấp chức năng tiện ích khác nhau để thao tác với các yếu tố trong DOM.

Đây là danh sách tất cả các chức năng tiện ích với các ví dụ. Tất cả các phương thức được định nghĩa ở đây sẽ tự động được thêm vào bất kỳ phần tử nào được truy cập bằng hàm $ ().

Vì vậy, viết Element.show ('firstDiv'); cũng giống như cách viết $ ('firstDiv'). show ();

Phương pháp phần tử nguyên mẫu

NOTE - Đảm bảo rằng bạn có ít nhất phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	tuyệt đối hóa () Biến phần tử thành một phần tử có vị trí tuyệt đối mà không thay đổi vị trí của nó trong bố cục trang.
2.	addClassName () Thêm tên lớp CSS đã cho vào tên lớp của phần tử.
3.	addMethods () Làm cho nó có thể kết hợp các phương thức của riêng bạn với đối tượng Phần tử, mà sau này bạn có thể sử dụng làm phương thức của các phần tử mở rộng.
4.	liền kề() Tìm tất cả anh chị em của phần tử hiện tại khớp với (các) bộ chọn đã cho.
5.	tổ tiên() Thu thập tất cả tổ tiên của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
6.	childElements () Thu thập tất cả các phần tử con của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
7.	classNames() Không được chấp nhận. Trả về một phiên bản ClassNames mới, một đối tượng Enumerable được sử dụng để đọc và ghi tên lớp CSS của phần tử.
số 8.	cleanWhitespace () Loại bỏ tất cả các nút văn bản của phần tử, chỉ chứa khoảng trắng. Trả về phần tử.
9.	clonePosition () Sao chép vị trí và / hoặc kích thước của nguồn vào phần tử như được xác định bởi các tùy chọn đối số tùy chọn.
10.	cum Tích lũyOffset () Trả về hiệu số của phần tử từ góc trên cùng bên trái của tài liệu.
11.	cum Tích lũyScrollOffset () Tính toán độ lệch cuộn tích lũy của một phần tử trong các vùng chứa cuộn lồng nhau.
12.	hậu duệOf () Kiểm tra xem phần tử có phải là con cháu của tổ tiên hay không.
13.	hậu duệ() Thu thập tất cả các phần tử con của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
14.	xuống() Trả về phần tử con đầu tiên phù hợp với cssRule. Nếu không có cssRule nào được cung cấp, tất cả các phần tử con đều được xem xét. Nếu không có hậu duệ nào phù hợp với các tiêu chí này, thì không xác định được trả về.
15.	trống() Kiểm tra xem phần tử có trống không (tức là chỉ chứa khoảng trắng).
16.	mở rộng() Mở rộng phần tử với tất cả các phương thức có trong Element.Methods và Element.Methods.Simulated.
17.	ngọn lửa() Kích hoạt một sự kiện tùy chỉnh với phần tử hiện tại làm mục tiêu của nó.
18.	firstDescendant () Trả về phần tử con đầu tiên. Điều này trái ngược với thuộc tính DOM firstChild, thuộc tính này sẽ trả về bất kỳ nút nào.
19.	getDimensions () Tìm chiều rộng và chiều cao được tính toán của một phần tử và trả về chúng dưới dạng cặp khóa / giá trị của một đối tượng.
20.	getElementsByClassName Không được chấp nhận. Tìm nạp tất cả các phần tử con của phần tử, có lớp CSS className và trả về chúng dưới dạng một mảng các phần tử mở rộng. Vui lòng sử dụng $$ ().
21.	getElementsBySelector Không được chấp nhận. Lấy một số bộ chọn CSS (chuỗi) tùy ý và trả về một mảng con mở rộng của phần tử khớp với bất kỳ bộ chọn nào trong số chúng. Vui lòng sử dụng $$ ().
22.	getHeight () Tìm và trả về chiều cao được tính toán của phần tử.
23.	getOffsetParent () Trả về vị trí tổ tiên gần nhất của phần tử. Nếu không tìm thấy, phần tử body sẽ được trả về.
24.	getStyle () Trả về giá trị thuộc tính CSS đã cho của phần tử. Thuộc tính có thể được chỉ định ở dạng CSS hoặc dạng camelized của nó.
25.	getWidth () Tìm và trả về chiều rộng được tính toán của phần tử.
26.	hasClassName () Kiểm tra xem phần tử có CSS className hay không.
27.	ẩn giấu() Ẩn và trả về phần tử.
28.	nhận định() Trả về thuộc tính id của phần tử nếu nó tồn tại hoặc đặt và trả về một id duy nhất, được tạo tự động.
29.	immediateDescendants() Không được chấp nhận. Thu thập tất cả các phần tử con trực tiếp của phần tử (tức là phần tử con) và trả về chúng dưới dạng một mảng các phần tử mở rộng. Vui lòng sử dụng childElements ().
30.	chèn() Chèn nội dung vào trước, sau, ở đầu hoặc ở cuối phần tử.
31.	quan sát() Trả về biểu diễn chuỗi hướng gỡ lỗi của phần tử.
32.	makeClipping () Mô phỏng thuộc tính clip CSS được hỗ trợ kém bằng cách đặt giá trị tràn của phần tử thành 'ẩn'. Trả về phần tử.
33.	makePositioned () Cho phép dễ dàng tạo khối chứa CSS bằng cách đặt vị trí CSS của phần tử thành 'tương đối' nếu vị trí ban đầu của nó là 'tĩnh' hoặc không xác định. Trả về phần tử.
34.	trận đấu() Kiểm tra xem phần tử có khớp với bộ chọn CSS đã cho hay không.
35.	kế tiếp() Trả về phần tử anh em sau phù hợp với cssRule đã cho.
36.	nextSiblings () Thu thập tất cả các anh chị em tiếp theo của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
37.	quan sát () Đăng ký một trình xử lý sự kiện trên phần tử và trả về phần tử.
38.	positionOffset () Trả về giá trị bù của phần tử so với tổ tiên được định vị gần nhất của nó.
39.	Trước () Trả về phần tử trước của phần tử phù hợp với cssRule đã cho.
40.	beforeSiblings () Thu thập tất cả các anh chị em trước đó của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
41.	readAttribute () Trả về giá trị của thuộc tính của phần tử hoặc null nếu thuộc tính chưa được chỉ định.
42.	đệ quyCollect () Thu thập đệ quy các phần tử có mối quan hệ được chỉ định bởi thuộc tính.
43.	relativize () Biến phần tử thành một phần tử có vị trí tương đối mà không thay đổi vị trí của nó trong bố cục trang.
44.	tẩy () Loại bỏ hoàn toàn phần tử khỏi tài liệu và trả lại nó.
45.	removeClassName () Loại bỏ CSS className của phần tử và trả về phần tử.
46.	thay thế () Thay thế phần tử bằng nội dung của đối số html và trả về phần tử bị xóa.
47.	scrollTo () Cuộn cửa sổ để phần tử đó xuất hiện ở đầu khung nhìn. Trả về phần tử.
48.	lựa chọn() Lấy một số lượng bộ chọn CSS (chuỗi) tùy ý và trả về một mảng con cháu mở rộng của phần tử phù hợp với bất kỳ bộ chọn nào trong số chúng.
49.	setOpacity () Đặt độ mờ trực quan của một phần tử trong khi xử lý sự không nhất quán trong các trình duyệt khác nhau.
50.	setStyle () Sửa đổi các thuộc tính kiểu CSS của phần tử.
51.	chỉ() Hiển thị và trả về phần tử.
52.	anh chị em ruột() Thu thập tất cả các anh chị em của phần tử và trả về chúng dưới dạng một mảng các phần tử mở rộng.
53.	stopObserving () Xử lý hủy đăng ký và trả về phần tử.
54.	chuyển đổi () Chuyển đổi khả năng hiển thị của phần tử.
55.	toggleClassName () Chuyển đổi CSS className của phần tử và trả về phần tử.
56.	undoClipping () Đặt thuộc tính tràn CSS của phần tử trở lại giá trị trước khi Element.makeClipping () được áp dụng. Trả về phần tử.
57.	undoPositioned () Đặt phần tử trở lại trạng thái trước khi Element.makePositioned được áp dụng cho nó. Trả về phần tử.
58.	lên() Trả về tổ tiên đầu tiên của phần tử khớp với cssRule đã cho.
59.	cập nhật () Thay thế nội dung của phần tử bằng đối số newContent đã cung cấp và trả về phần tử.
60.	viewportOffset () Trả về tọa độ X / Y của phần tử liên quan đến chế độ xem.
61.	có thể nhìn thấy() Trả về một Boolean cho biết phần tử có hiển thị hay không.
62.	bọc () Bao bọc một phần tử bên trong một phần tử khác, sau đó trả về trình bao bọc.
63.	writeAttribute () Thêm, chỉ định hoặc xóa các thuộc tính được truyền dưới dạng băm hoặc cặp tên / giá trị.

Nguyên mẫu mở rộng số JavaScript gốc để cung cấp -

Khả năng tương thích với ObjectRange, thông qua Number # succ.
Các vòng lặp số giống như ruby với Number # lần.
Các phương thức tiện ích đơn giản như Number # toColorPart và Number # toPaddedString.

Đây là danh sách tất cả các hàm với các ví dụ về Numbers.

Phương pháp số nguyên mẫu

NOTE - Đảm bảo rằng bạn có phiên bản prototype.js 1.6.

Không.	Phương pháp & Mô tả
1.	abs () Trả về giá trị tuyệt đối của một số.
2.	ceil () Trả về số nguyên nhỏ nhất lớn hơn hoặc bằng số.
3.	sàn nhà() Trả về số nguyên lớn nhất nhỏ hơn hoặc bằng số.
4.	tròn() Làm tròn số đến số nguyên gần nhất.
5.	succ () Trả về số kế thừa của Số hiện tại, như được xác định bởi hiện tại + 1. Được sử dụng để làm cho các số tương thích với ObjectRange.
6.	lần () Đóng gói một vòng lặp [0..n] thông thường, kiểu Ruby.
7.	toColorPart () Tạo ra biểu diễn thập lục phân gồm 2 chữ số của số (do đó được giả định là trong phạm vi [0..255]). Hữu ích cho việc soạn các chuỗi màu CSS.
số 8.	toJSON () Trả về một chuỗi JSON.
9.	toPaddedString () Chuyển đổi số thành một chuỗi được đệm bằng các số 0 sao cho độ dài của chuỗi ít nhất bằng độ dài.

Prototype nâng cao đối tượng String với một loạt các phương thức hữu ích khác nhau, từ tầm thường đến phức tạp.

Đây là danh sách tất cả các hàm với các ví dụ về chuỗi.

Phương thức chuỗi nguyên mẫu

NOTE - Đảm bảo rằng bạn có phiên bản prototype.js 1.6.

Không.	Phương pháp & Mô tả
1.	chỗ trống() Kiểm tra xem chuỗi có 'trống' hay không, nghĩa là trống hoặc chỉ chứa khoảng trắng.
2.	camelize () Chuyển đổi một chuỗi được phân tách bằng dấu gạch ngang thành một chuỗi tương đương với camelCase. Ví dụ: 'foo-bar' sẽ được chuyển đổi thành 'fooBar'.
3.	viết hoa () Viết hoa chữ cái đầu tiên của một chuỗi và viết thường tất cả các chữ cái khác.
4.	dasherize () Thay thế mọi trường hợp của ký tự gạch dưới ("_") bằng dấu gạch ngang ("-").
5.	trống() Kiểm tra xem chuỗi có trống không.
6.	endWith () Kiểm tra xem chuỗi có kết thúc bằng chuỗi con hay không.
7.	EscapeHTML () Chuyển đổi các ký tự đặc biệt HTML thành các ký tự tương đương đối tượng của chúng.
số 8.	evalJSON () Đánh giá JSON trong chuỗi và trả về đối tượng kết quả.
9.	evalScripts () Đánh giá nội dung của bất kỳ khối tập lệnh nào có trong chuỗi. Trả về một mảng chứa giá trị được trả về bởi mỗi tập lệnh.
10.	extractScripts () Trích xuất nội dung của bất kỳ khối script nào có trong chuỗi và trả về chúng dưới dạng một mảng chuỗi.
11.	gsub () Trả về chuỗi với mỗi lần xuất hiện của một mẫu nhất định được thay thế bằng một chuỗi thông thường, giá trị trả về của một hàm hoặc một chuỗi Mẫu.
12.	bao gồm () Kiểm tra xem chuỗi có chứa chuỗi con hay không.
13.	quan sát() Trả về phiên bản hướng gỡ lỗi của chuỗi.
14.	nội suy () Xử lý chuỗi như một Mẫu và điền vào nó bằng các thuộc tính của đối tượng.
15.	isJSON () Kiểm tra xem chuỗi có phải là JSON hợp lệ hay không bằng cách sử dụng các biểu thức chính quy. Phương thức bảo mật này được gọi là nội bộ.
16.	parseQuery () Phân tích cú pháp chuỗi truy vấn giống URI và trả về một đối tượng bao gồm các cặp tham số / giá trị.
17.	quét() Cho phép lặp lại mọi lần xuất hiện của mẫu đã cho.
18.	bắt đầu với() Kiểm tra xem chuỗi có bắt đầu bằng chuỗi con hay không.
19.	dải () Loại bỏ tất cả khoảng trắng đầu và cuối khỏi một chuỗi.
20.	stripScripts () Tách một chuỗi bất kỳ thứ gì trông giống như một khối tập lệnh HTML.
21.	stripTags () Tách một chuỗi của bất kỳ thẻ HTML nào.
22.	phụ () Trả về một chuỗi có số lần xuất hiện mẫu đầu tiên được thay thế bằng một chuỗi thông thường, giá trị trả về của một hàm hoặc chuỗi Mẫu.
23.	succ () Được sử dụng nội bộ bởi ObjectRange. Chuyển đổi ký tự cuối cùng của chuỗi thành ký tự sau trong bảng chữ cái Unicode.
24.	lần () Nối các chuỗi số lần.
25.	toArray () Tách chuỗi ký tự theo từng ký tự và trả về một mảng với kết quả.
26.	toJSON () Trả về một chuỗi JSON.
27.	toQueryParams () Phân tích cú pháp chuỗi truy vấn giống URI và trả về một đối tượng bao gồm các cặp tham số / giá trị.
28.	cắt ngắn () Cắt bớt một chuỗi theo độ dài đã cho và thêm một hậu tố vào nó (cho biết rằng nó chỉ là một đoạn trích).
29.	dấu gạch dưới () Chuyển đổi một chuỗi camelized thành một chuỗi các từ được phân tách bằng dấu gạch dưới ("_").
30.	unescapeHTML () Tách thẻ và chuyển đổi các dạng thực thể của các ký tự HTML đặc biệt sang dạng bình thường của chúng.
31.	unilterJSON () Bỏ dấu phân cách nhận xét xung quanh phản hồi Ajax JSON hoặc JavaScript. Phương thức bảo mật này được gọi là nội bộ.

Nguyên mẫu mở rộng tất cả các mảng JavaScript gốc với một số phương pháp khá mạnh.

Điều này được thực hiện theo hai cách -

Nó kết hợp trong mô-đun Enumerable, mang đến rất nhiều phương thức.
Nó bổ sung thêm một số phương pháp bổ sung, được ghi lại trong phần này.

Sử dụng bộ lặp

Một hỗ trợ quan trọng do Prototype cung cấp là bạn có thể sử dụng java giống như trình lặp trong JavaScript. Xem sự khác biệt bên dưới -

Cách viết truyền thống for vòng lặp -

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

Bây giờ nếu bạn đang sử dụng Prototype, thì bạn có thể thay thế đoạn mã trên như sau:

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

Đây là danh sách tất cả các hàm với các ví dụ về Array.

Phương thức mảng nguyên mẫu

NOTE - Đảm bảo rằng bạn có phiên bản prototype.js 1.6.

Không.	Phương pháp & Mô tả
1.	thông thoáng() Xóa mảng (làm cho nó trống).
2.	clone () Trả về bản sao của mảng, giữ nguyên mảng ban đầu.
3.	gọn nhẹ() Trả về phiên bản mới của mảng, không có bất kỳ giá trị null / undefined nào.
4.	mỗi() Lặp lại trên mảng theo thứ tự chỉ số số tăng dần.
5.	Đầu tiên() Trả về mục đầu tiên trong mảng hoặc không xác định nếu mảng trống.
6.	làm phẳng () Trả về phiên bản "phẳng" (một chiều) của mảng.
7.	từ() Sao chép một mảng hiện có hoặc tạo một mảng mới từ một bộ sưu tập giống mảng.
số 8.	Chỉ số() Trả về vị trí của lần xuất hiện đầu tiên của đối số trong mảng.
9.	quan sát() Trả về biểu diễn chuỗi hướng gỡ lỗi của một mảng.
10.	Cuối cùng() Trả về mục cuối cùng trong mảng hoặc không xác định nếu mảng trống.
11.	giảm() Giảm mảng: mảng một phần tử được biến thành phần tử duy nhất của chúng, trong khi các mảng nhiều phần tử được trả về nguyên trạng.
12.	đảo ngược() Trả về phiên bản đã đảo ngược của mảng. Theo mặc định, trực tiếp đảo ngược bản gốc. Nếu nội tuyến được đặt thành false, hãy sử dụng bản sao của mảng ban đầu.
13.	kích thước() Trả về kích thước của mảng.
14.	toArray () Đây chỉ là một tối ưu hóa cục bộ của toArray được tích hợp từ Enumerable.
15.	toJSON () Trả về một chuỗi JSON.
16.	uniq () Tạo phiên bản không trùng lặp của một mảng. Nếu không tìm thấy bản sao, mảng ban đầu được trả về.
17.	không có() Tạo phiên bản mới của mảng không chứa bất kỳ giá trị nào được chỉ định.

Hash có thể được coi là một mảng kết hợp liên kết các khóa duy nhất với các giá trị. Chỉ khác là bạn có thể sử dụng bất kỳ chuỗi nào làm chỉ mục thay vì chỉ sử dụng một số làm chỉ mục.

Tạo Hash

Có hai cách để xây dựng một cá thể Hash:

Sử dụng từ khóa JavaScript mới .
Sử dụng chức năng Prototype Utility $ H .

Để tạo một hàm băm trống, bạn cũng gọi bất kỳ phương thức khởi tạo nào không có đối số.

Sau đây là ví dụ cho thấy cách tạo hàm băm, đặt giá trị và nhận giá trị một cách đơn giản -

// 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 cung cấp một loạt các phương pháp để đánh giá Hash một cách dễ dàng. Hướng dẫn này sẽ giải thích mọi phương pháp chi tiết với các ví dụ phù hợp.

Dưới đây là danh sách đầy đủ tất cả các phương pháp liên quan đến Hash.

Phương pháp băm nguyên mẫu

NOTE - Đảm bảo ít nhất có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	clone () Trả về một bản sao của băm.
2.	mỗi() Lặp lại các cặp tên / giá trị trong hàm băm.
3.	được() Trả về giá trị của thuộc tính của khóa băm.
4.	quan sát() Trả về biểu diễn chuỗi hướng gỡ lỗi của hàm băm.
5.	phím () Cung cấp Mảng khóa (nghĩa là tên thuộc tính) cho hàm băm.
6.	hợp nhất () Hợp nhất đối tượng thành băm và trả về kết quả của việc hợp nhất đó.
7.	tẩy() Xóa các khóa khỏi hàm băm và trả về giá trị của chúng. Phương pháp này không được dùng nữa trong phiên bản 1.6.
số 8.	bộ() Đặt thuộc tính của khóa băm thành giá trị và trả về giá trị.
9.	toJSON () Trả về một chuỗi JSON.
10.	toObject () Trả về một đối tượng vani, được nhân bản.
11.	toQueryString () Biến một hàm băm thành biểu diễn chuỗi truy vấn được mã hóa URL của nó.
12.	unset () Xóa thuộc tính của khóa băm và trả về giá trị của nó.
13.	cập nhật () Cập nhật hàm băm với các cặp khóa / giá trị của đối tượng. Băm gốc sẽ được sửa đổi.
14.	giá trị () Thu thập các giá trị của một hàm băm và trả về chúng trong một mảng.

Đối tượng được Prototype sử dụng như một không gian tên và để gọi hàm liên quan bằng cách sử dụng đối tượng Đối tượng. Điều này được sử dụng theo hai cách sau:

Nếu bạn là một nhà phát triển đơn giản, thì bạn có thể sử dụng các chức năng hiện có như kiểm tra hoặc sao chép .
Nếu bạn là người muốn tạo các đối tượng của riêng chúng giống như Prototype, hoặc khám phá các đối tượng như thể chúng là hàm băm, sẽ chuyển sang mở rộng , khóa và giá trị .

Phương pháp đối tượng nguyên mẫu

NOTE - Đảm bảo ít nhất có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	clone () Sao chép đối tượng được truyền bằng cách sử dụng bản sao cạn (sao chép tất cả các thuộc tính của bản gốc vào kết quả).
2.	mở rộng() Sao chép tất cả các thuộc tính từ nguồn sang đối tượng đích.
3.	quan sát() Trả về biểu diễn chuỗi hướng gỡ lỗi của đối tượng.
4.	isArray () Trả về true nếu obj là một mảng, ngược lại là false.
5.	isElement () Trả về true nếu obj là nút DOM thuộc loại 1, ngược lại là false.
6.	isFunction () Trả về true nếu obj thuộc loại hàm, ngược lại là false.
7.	isHash () Trả về true nếu obj là một thể hiện của lớp Hash, ngược lại là false.
số 8.	isNumber () Trả về true nếu obj thuộc loại số, ngược lại là false.
9.	isString () Trả về true nếu obj thuộc loại chuỗi, ngược lại là false.
10.	không định nghĩa được() Trả về true nếu obj thuộc loại không xác định, ngược lại là false.
11.	phím () Xử lý bất kỳ đối tượng nào dưới dạng Hash và tìm nạp danh sách các tên thuộc tính của nó.
12.	toHTML () Trả về giá trị trả về của phương thức toHTML của obj nếu nó tồn tại, phương thức khác chạy obj thông qua String.interpret.
13.	toJSON () Trả về một chuỗi JSON.
14.	toQueryString () Biến một đối tượng thành biểu diễn chuỗi truy vấn được mã hóa URL của nó.
15.	giá trị () Xử lý bất kỳ đối tượng nào dưới dạng Hash và tìm nạp danh sách các giá trị thuộc tính của nó.

Các mẫu được sử dụng để định dạng nhóm các đối tượng tương tự và để tạo ra đầu ra được định dạng cho các đối tượng này.

Prototype cung cấp một lớp Template , có hai phương thức:

Template()- Đây là một phương thức khởi tạo, được sử dụng để tạo một đối tượng khuôn mẫu và gọi phương thức eval () để áp dụng khuôn mẫu.
evaluate() - Phương pháp này được sử dụng để áp dụng một khuôn mẫu để định dạng một đối tượng.

Có ba bước liên quan để tạo đầu ra được định dạng.

Create a template- Điều này liên quan đến việc tạo văn bản được định dạng sẵn. Văn bản này chứa nội dung được định dạng cùng với#{fieldName}các giá trị. Những#{fieldName}các giá trị sẽ được thay thế bằng các giá trị thực khi phương thức eval () được gọi với các giá trị thực.
Defining actual values- Điều này liên quan đến việc tạo ra các giá trị thực tế ở dạng Khóa và Giá trị. Các Khóa này sẽ được ánh xạ trong mẫu và sẽ được thay thế bằng các giá trị tương ứng.
Mapping Keys and replacing Values- Đây là bước cuối cùng, nơi eval () sẽ được gọi và tất cả các khóa có sẵn trong đối tượng được định dạng sẽ được thay thế bằng các giá trị đã xác định.

Ví dụ 1

Bước 1

Tạo mẫu.

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

Bước 2

Chuẩn bị bộ giá trị của chúng ta, bộ giá trị sẽ được chuyển vào đối tượng trên để có đầu ra được định dạng.

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 ];

Bước 3

Bước cuối cùng là điền vào tất cả các giá trị trong mẫu và tạo ra kết quả cuối cùng như sau:

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

Vì vậy, hãy đặt tất cả ba bước này lại với nhau -

<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>

Điều này sẽ tạo ra kết quả sau:

Đầu ra

Lớp Enumerable cung cấp một tập hợp lớn các phương thức hữu ích cho phép liệt kê. Các bảng liệt kê là các đối tượng hoạt động như một tập hợp các giá trị.

Phương pháp liệt kê chủ yếu được sử dụng để liệt kê các mảng và hàm băm . Có các đối tượng khác cũng như ObjectRange và các đối tượng liên quan đến DOM- hoặc AJAX khác nhau, nơi bạn có thể sử dụng các phương pháp liệt kê.

Tham số ngữ cảnh

Mọi phương thức của Enumerable sử dụng một trình lặp cũng lấy đối tượng ngữ cảnh làm tham số (tùy chọn) tiếp theo. Đối tượng ngữ cảnh là thứ mà trình lặp sẽ được liên kết với, vì vậythis từ khóa bên trong nó sẽ trỏ đến đối tượng.

var myObject = {};

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

myObject;

Điều này sẽ tạo ra kết quả sau:

Đầu ra

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

Sử dụng nó một cách hiệu quả

Khi bạn cần gọi cùng một phương thức trên tất cả các phần tử, hãy sử dụng phương thức invoke () .
Khi bạn cần lấy cùng một thuộc tính trên tất cả các phần tử, hãy sử dụng phương thức pluck () .
Các phương thức findAll / select truy xuất tất cả các phần tử phù hợp với một vị từ nhất định. Ngược lại, phương thức từ chối () truy xuất tất cả các phần tử không khớp với một vị từ. Trong trường hợp cụ thể mà bạn cần cả hai bộ, bạn có thể tránh lặp lại hai lần: chỉ cần sử dụng phương thức partition () .

Đây là danh sách đầy đủ của tất cả các phương thức liên quan đến Enumerable.

Phương pháp có thể đếm nguyên mẫu

NOTE - Đảm bảo ít nhất bạn có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	tất cả() Xác định xem tất cả các phần tử có tương đương boolean với true hay không, trực tiếp hoặc thông qua tính toán bởi trình lặp được cung cấp.
2.	bất kì() Xác định xem ít nhất một phần tử có tương đương boolean với true hay không, trực tiếp hoặc thông qua tính toán bởi trình lặp được cung cấp.
3.	sưu tầm() Trả về kết quả của việc áp dụng trình lặp cho từng phần tử. Biệt danh là map ().
4.	phát hiện() Tìm phần tử đầu tiên mà trình lặp trả về true. Đặt biệt danh bởi phương thức find ().
5.	mỗi() Nó cho phép bạn lặp lại tất cả các phần tử theo kiểu chung, sau đó trả về Enumerable, do đó cho phép gọi chuỗi.
6.	eachSlice () Nhóm các mục thành nhiều phần dựa trên một kích thước nhất định, với phần cuối cùng có thể nhỏ hơn.
7.	mục() Bí danh cho phương thức toArray chung chung hơn.
số 8.	tìm thấy() Tìm phần tử đầu tiên mà trình lặp trả về true. Bí danh tiện lợi cho phát hiện ().
9.	findAll () Trả về tất cả các phần tử mà trình vòng lặp trả về true. Có biệt danh là select ().
10.	grep () Trả về tất cả các phần tử phù hợp với bộ lọc. Nếu một trình lặp được cung cấp, nó được sử dụng để tạo ra giá trị trả về cho mỗi phần tử đã chọn.
11.	inGroupsOf () Nhóm các mục theo các phần có kích thước cố định, sử dụng một giá trị cụ thể để lấp đầy phần cuối cùng nếu cần.
12.	bao gồm () Xác định xem một đối tượng nhất định có trong Enumerable hay không, dựa trên toán tử so sánh ==. Bí danh là thành viên ().
13.	tiêm () Tăng dần giá trị kết quả dựa trên kết quả liên tiếp của trình lặp.
14.	gọi () Tối ưu hóa cho một trường hợp sử dụng chung của mỗi () hoặc collect (): gọi cùng một phương thức, với các đối số tiềm năng giống nhau, cho tất cả các phần tử.
15.	bản đồ() Trả về kết quả của việc áp dụng trình lặp cho từng phần tử. Bí danh tiện lợi cho sưu tập ().
16.	max () Trả về phần tử tối đa (hoặc tính toán dựa trên phần tử) hoặc không xác định nếu kiểu liệt kê trống. Các phần tử được so sánh trực tiếp hoặc bằng cách áp dụng trình lặp đầu tiên và so sánh các giá trị trả về.
17.	thành viên() Xác định xem một đối tượng nhất định có trong Enumerable hay không, dựa trên toán tử so sánh ==. Bí danh tiện lợi cho include ().
18.	min () Trả về phần tử tối thiểu (hoặc phép tính dựa trên phần tử) hoặc không xác định nếu kiểu liệt kê trống. Các phần tử được so sánh trực tiếp hoặc bằng cách áp dụng trình lặp đầu tiên và so sánh các giá trị trả về.
19.	vách ngăn() Phân chia các yếu tố thành hai nhóm: nhóm được coi là đúng và nhóm được coi là sai.
20.	nhổ lông() Tối ưu hóa cho một trường hợp sử dụng chung của collect (): tìm nạp cùng một thuộc tính cho tất cả các phần tử. Trả về các giá trị thuộc tính.
21.	Từ chối() Trả về tất cả các phần tử mà trình vòng lặp trả về false.
22.	lựa chọn() Bí danh cho phương thức findAll ().
23.	kích thước() Trả về kích thước của kiểu liệt kê.
24.	sortBy () Cung cấp chế độ xem được sắp xếp tùy chỉnh của các phần tử dựa trên tiêu chí được tính toán cho từng phần tử bởi trình vòng lặp.
25.	toArray () Trả về biểu diễn Mảng của kiểu liệt kê. Đặt biệt danh là entry ().
26.	zip () Các khóa kéo lại với nhau (hãy nghĩ đến khóa kéo trên một chiếc quần tây) 2 + chuỗi, cung cấp một loạt các khóa. Mỗi bộ giá trị chứa một giá trị cho mỗi chuỗi ban đầu.

Quản lý sự kiện là một trong những thách thức lớn nhất để đạt được kịch bản trên nhiều trình duyệt. Mỗi trình duyệt đều có các cách tiếp cận khác nhau để xử lý các phím bấm.

Prototype Framework xử lý tất cả các vấn đề về khả năng tương thích giữa các trình duyệt và giúp bạn tránh khỏi mọi rắc rối liên quan đến quản lý sự kiện.

Prototype Framework cung cấp không gian tên Sự kiện , có đầy đủ các phương thức, tất cả đều lấy đối tượng sự kiện hiện tại làm đối số và vui vẻ tạo ra thông tin bạn đang yêu cầu trên tất cả các trình duyệt chính.

Không gian tên sự kiện cũng cung cấp danh sách mã khóa được chuẩn hóa mà bạn có thể sử dụng với các sự kiện liên quan đến bàn phím. Các hằng số sau được xác định trong không gian tên:

Không.	Hằng số & Mô tả chính
1.	KEY_BACKSPACE Biểu diễn phím khoảng trắng trở lại.
2.	KEY_TAB Biểu diễn phím tab.
3.	KEY_RETURN Biểu diễn khóa trả về.
4.	KEY_ESC Đại diện cho khóa esc.
5.	KEY_LEFT Biểu diễn phím bên trái.
6.	KEY_UP Đại diện cho khóa.
7.	KEY_RIGHT Biểu diễn khóa bên phải.
số 8.	KEY_DOWN Đại diện cho phím xuống.
9.	KEY_DELETE Đại diện cho khóa xóa.
10.	KEY_HOME Đại diện cho phím home.
11.	KEY_END Đại diện cho khóa kết thúc.
12.	KEY_PAGEUP Đại diện cho khóa trang lên.
13.	KEY_PAGEDOWN Phím đại diện xuống trang.

Cách xử lý sự kiện

Trước khi bắt đầu, chúng ta hãy xem một ví dụ về việc sử dụng phương thức sự kiện. Ví dụ này cho thấy cách nắm bắt phần tử DOM mà sự kiện đã xảy ra.

Thí dụ

<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>

Đầu ra

Đây là danh sách đầy đủ tất cả các phương pháp liên quan đến Event. Các chức năng mà bạn có nhiều khả năng sẽ sử dụng nhiều nhất là quan sát , yếu tố và dừng .

Phương pháp sự kiện nguyên mẫu

NOTE - Đảm bảo ít nhất bạn có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	thành phần() Trả về phần tử DOM mà sự kiện đã xảy ra.
2.	mở rộng() Mở rộng sự kiện với tất cả các phương thức có trong Event.Methods.
3.	findElement () Trả về phần tử DOM đầu tiên có tên thẻ đã cho, trở lên từ phần tử mà sự kiện đã xảy ra.
4.	isLeftClick () Xác định xem sự kiện chuột liên quan đến nút có phải là về nút "trái" (thực tế là chính) hay không.
5.	quan sát () Đăng ký một trình xử lý sự kiện trên một phần tử DOM.
6.	pointerX () Trả về vị trí ngang tuyệt đối cho một sự kiện chuột.
7.	con trỏY () Trả về vị trí thẳng đứng tuyệt đối cho một sự kiện chuột.
số 8.	dừng lại() Dừng sự lan truyền của sự kiện và cuối cùng ngăn hành động mặc định của nó được kích hoạt.
9.	stopObserving () Hủy đăng ký một trình xử lý sự kiện.
10.	dỡ bỏ bộ nhớ đệm () Hủy đăng ký tất cả các trình xử lý sự kiện đã đăng ký thông qua quan sát. Tự động có dây cho bạn. Không có sẵn kể từ ngày 1.6.

Prototype cung cấp một cách dễ dàng để quản lý các biểu mẫu HTML. Biểu mẫu của Prototype là một không gian tên và một mô-đun cho tất cả những thứ liên quan đến biểu mẫu, được đóng gói với tính tốt thao tác biểu mẫu và tuần tự hóa.

Trong khi nó nắm giữ các phương thức xử lý tổng thể các biểu mẫu, thì mô-đun phụ của nó là Form.Element xử lý các điều khiển biểu mẫu cụ thể.

Đây là danh sách đầy đủ tất cả các phương pháp liên quan đến Form Element.

Phương pháp biểu mẫu nguyên mẫu

NOTE - Đảm bảo ít nhất bạn có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	vô hiệu hóa() Tắt toàn bộ biểu mẫu. Các điều khiển biểu mẫu sẽ hiển thị nhưng không thể chỉnh sửa.
2.	cho phép () Bật biểu mẫu bị vô hiệu hóa hoàn toàn hoặc một phần.
3.	findFirstElement () Tìm kiếm điều khiển biểu mẫu không ẩn, không bị vô hiệu hóa đầu tiên.
4.	focusFirstElement () Cung cấp tiêu điểm bàn phím cho phần tử đầu tiên của biểu mẫu.
5.	getElements () Trả về tập hợp tất cả các điều khiển biểu mẫu trong một biểu mẫu.
6.	getInputs () Trả về tập hợp tất cả các phần tử INPUT trong một biểu mẫu. Sử dụng các đối số kiểu và tên tùy chọn để hạn chế tìm kiếm trên các thuộc tính này.
7.	yêu cầu() Một phương pháp tiện lợi để tuần tự hóa và gửi biểu mẫu qua Ajax.Request tới URL của thuộc tính action của biểu mẫu. Tham số tùy chọn được chuyển đến cá thể Ajax.Request, cho phép ghi đè phương thức HTTP và chỉ định các tham số bổ sung.
số 8.	cài lại() Đặt lại biểu mẫu về giá trị mặc định của nó.
9.	serialize () Tuần tự hóa dữ liệu biểu mẫu thành một chuỗi phù hợp với yêu cầu Ajax (hành vi mặc định) hoặc, nếu getHash tùy chọn đánh giá là true, một băm đối tượng trong đó khóa là tên điều khiển biểu mẫu và giá trị là dữ liệu.
10.	serializeElements () Nối tiếp một mảng các phần tử biểu mẫu thành một chuỗi phù hợp với các yêu cầu Ajax (hành vi mặc định) hoặc, nếu getHash tùy chọn đánh giá là true, một băm đối tượng trong đó các khóa là tên điều khiển biểu mẫu và giá trị là dữ liệu.

Giới thiệu về JSON

JSON (JavaScript Object Notation) là một định dạng trao đổi dữ liệu nhẹ.

JSON rất dễ đọc và viết cho con người.
JSON dễ dàng để máy phân tích cú pháp và tạo.
JSON dựa trên một tập hợp con của Ngôn ngữ lập trình JavaScript.
JSON đáng chú ý được sử dụng bởi các API trên khắp web và là một giải pháp thay thế nhanh chóng cho XML trong các yêu cầu Ajax.
JSON là một định dạng văn bản hoàn toàn độc lập với ngôn ngữ.

Prototype 1.5.1 và phiên bản mới hơn, có hỗ trợ mã hóa và phân tích cú pháp JSON.

Mã hóa JSON

Prototype cung cấp các phương pháp sau để mã hóa:

NOTE - Đảm bảo có ít nhất phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	Number.toJSON () Trả về một chuỗi JSON cho một Số đã cho.
2.	String.toJSON () Trả về một chuỗi JSON cho Chuỗi đã cho.
3.	Array.toJSON () Trả về một chuỗi JSON cho Mảng đã cho.
4.	Hash.toJSON () Trả về một chuỗi JSON cho Hash đã cho.
5.	Date.toJSON () Chuyển đổi ngày thành chuỗi JSON (theo định dạng ISO được JSON sử dụng).
6.	Object.toJSON () Trả về một chuỗi JSON cho Đối tượng đã cho.

Nếu bạn không chắc chắn về loại dữ liệu bạn cần mã hóa, cách tốt nhất là sử dụng Object.toJSON như vậy -

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

Điều này sẽ tạo ra kết quả sau:

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

Hơn nữa, nếu bạn đang sử dụng các đối tượng tùy chỉnh, bạn có thể đặt phương thức toJSON của riêng mình, phương thức này sẽ được Object.toJSON sử dụng . Ví dụ -

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);

Điều này sẽ tạo ra kết quả sau:

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

Phân tích cú pháp JSON

Trong JavaScript, phân tích cú pháp JSON thường được thực hiện bằng cách đánh giá nội dung của một chuỗi JSON. Prototype giới thiệu String.evalJSON để giải quyết vấn đề này. Ví dụ -

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

Điều này sẽ tạo ra kết quả sau:

"Violet"

Sử dụng JSON với Ajax

Sử dụng JSON với Ajax rất đơn giản. Chỉ cần gọi String.evalJSON trên thuộc tính responseText của truyền tải -

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

Nếu dữ liệu của bạn đến từ một nguồn không đáng tin cậy, hãy đảm bảo làm sạch nó -

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

Giới thiệu về AJAX

AJAX là viết tắt của Ađồng bộ JavaScript và XML. AJAX là một kỹ thuật mới để tạo các ứng dụng web tốt hơn, nhanh hơn và tương tác hơn với sự trợ giúp của XML, HTML, CSS và Java Script.

Để hiểu đầy đủ về AJAX, vui lòng xem qua Hướng dẫn AJAX đơn giản của chúng tôi .

Hỗ trợ nguyên mẫu cho AJAX

Khung nguyên mẫu cho phép bạn xử lý các cuộc gọi Ajax một cách rất dễ dàng và thú vị mà cũng an toàn (trình duyệt chéo). Prototype cũng xử lý theo cách thông minh với mã JavaScript được trả về từ máy chủ và cung cấp các lớp trợ giúp để thăm dò ý kiến.

Chức năng Ajax được chứa trong đối tượng Ajax chung . Đối tượng này cung cấp tất cả các phương thức cần thiết để xử lý các yêu cầu và phản hồi AJAX một cách dễ dàng.

Yêu cầu AJAX

Các yêu cầu thực tế được thực hiện bằng cách tạo các phiên bản của đối tượng Ajax.Request () .

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

Tham số đầu tiên là URL của yêu cầu; thứ hai là tùy chọn băm. Tùy chọn phương thức đề cập đến phương thức HTTP sẽ được sử dụng; phương thức mặc định là POST.

Gọi lại phản hồi AJAX

Các yêu cầu Ajax theo mặc định là không đồng bộ, có nghĩa là bạn phải có các lệnh gọi lại sẽ xử lý dữ liệu từ một phản hồi. Phương thức gọi lại được chuyển trong hàm băm tùy chọn khi đưa ra yêu cầu -

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...') }
});

Ở đây, hai lệnh gọi lại được chuyển trong hàm băm -

onSuccess
onFailure

Bất kỳ lệnh gọi nào trong hai lệnh trên đều được gọi tương ứng dựa trên trạng thái của phản hồi. Tham số đầu tiên truyền cho cả hai là có nguồn gốc XMLHttpRequest đối tượng mà từ đó bạn có thể sử dụng nó responseText và responseXML thuộc tính tương ứng.

Bạn có thể chỉ định cả hai lệnh gọi lại, một hoặc không - tùy thuộc vào bạn. Các cuộc gọi lại khả dụng khác là -

onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

Tất cả chúng đều khớp với một trạng thái nhất định của quá trình truyền tải xmlHttpRequest , ngoại trừ onException, kích hoạt khi có một ngoại lệ trong khi gửi các lệnh gọi lại khác.

NOTE- Các lệnh gọi lại onUninitialized, onLoading, onLoaded và onInteractive không được triển khai nhất quán bởi tất cả các trình duyệt. Nói chung, tốt nhất bạn nên tránh sử dụng những thứ này.

Phương pháp AJAX nguyên mẫu

Đối tượng Ajax cung cấp tất cả các phương thức cần thiết để xử lý các yêu cầu và phản hồi AJAX một cách dễ dàng. Đây là danh sách đầy đủ của tất cả các phương pháp liên quan đến AJAX.

NOTE - Đảm bảo ít nhất bạn có phiên bản 1.6 của prototype.js.

Không.	Phương pháp & Mô tả
1.	Tùy chọn Ajax Đây không phải là một phương pháp mà là chi tiết tất cả các tùy chọn cốt lõi được chia sẻ bởi tất cả những người yêu cầu và gọi lại AJAX.
2.	Ajax.PeriodicalUpdater () Thực hiện định kỳ một yêu cầu AJAX và cập nhật nội dung của vùng chứa dựa trên văn bản phản hồi.
3.	Ajax.Request () Khởi tạo và xử lý một yêu cầu AJAX.
4.	Ajax.Responders () Một kho lưu trữ các trình nghe toàn cầu được thông báo về mọi bước của các yêu cầu AJAX dựa trên Nguyên mẫu.
5.	Ajax.Response () Đối tượng được truyền làm đối số đầu tiên của tất cả các lệnh gọi lại yêu cầu Ajax.
6.	Ajax.Updater () Thực hiện yêu cầu AJAX và cập nhật nội dung của vùng chứa dựa trên văn bản phản hồi.

Dãy nguyên mẫu đại diện cho một khoảng giá trị. Cách ưa thích để có được một phạm vi là sử dụng$R chức năng tiện ích.

Bạn có thể tạo nhiều giá trị bằng cú pháp đơn giản như sau:

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

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

Điều này sẽ tạo ra kết quả sau:

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

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

Phương thức include ()

Phương pháp này xác định xem giá trị có được bao gồm trong phạm vi -

Cú pháp

Range.include(value);

Giá trị trả lại

Nếu giá trị được bao gồm, thì trả về giá trị true, ngược lại là false.

Thí dụ

<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>

Đầu ra

Nhiều khi yêu cầu thực thi một hàm nhiều lần sau một khoảng thời gian nhất định. Ví dụ: bạn có thể muốn làm mới màn hình của mình sau một thời gian nhất định. Prototype cung cấp một cơ chế đơn giản để thực hiện nó bằng cách sử dụng đối tượng PeriodicalExecuter .

Lợi thế được cung cấp bởi PeriodicalExecuter là nó bảo vệ bạn chống lại nhiều lần thực thi song song của hàm gọi lại.

Tạo một máy tính định kỳ

Hàm tạo nhận hai đối số -

Chức năng gọi lại.
Khoảng thời gian (tính bằng giây) giữa các lần thực hiện.

Sau khi khởi chạy, PeriodicalExecuter sẽ kích hoạt vô thời hạn, cho đến khi trang tải xuống hoặc trình thực thi bị dừng bằng cách sử dụng phương thức stop () .

Thí dụ

Sau đây là ví dụ sẽ bật lên một hộp thoại sau mỗi 5 giây cho đến khi bạn dừng nó bằng cách nhấn nút "hủy".

<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>

Đầu ra