Langthang

Wednesday, June 3, 2009

Tài liệu dành cho nhà phát triển của prototype.js

Nội dung chính

Tài liệu này là gì?

Trong trường hợp bạn chưa từng dùng thử, prototype.js là một thư viện JavaScript được viết bởi Sam Stephenson. Thư viện này có ý tưởng xuất sắc và là một mã tương thích chuẩn được viết rất tốt, với hàng loạt các thành phần liên quan đến việc xậy dựng những trang web đa dạng và có tính tương thích cao để giúp bạn xây dựng các trang Web2.0.

Nếu bạn cố gắng sử dụng thư viện này gần đây, bạn có thể nhận thấy rằng tài liệu kèm theo không phải là một điểm mạnh của nó. Như những nhà phát triển trước tôi, tôi phải cật lực xem toàn bộ mã lệnh và thực hành với nó. Tôi nghĩ sẽ là rất tuyệt nếu như để lại vài dòng ghi chú khi tôi học và chia sẻ nó với mọi người.

Tôi cũng giới thiệu un-official reference cho các đối tượng, lớp, hàm số, và phần mở rộng kèm theo thư viện này.

Khi bạn đọc những ví dụ và phần tham khảo, nhà phát triển quen thuộc với ngôn ngữ Ruby sẽ nhận thấy rằng có sự giống nhau có chủ ý các lớp có sẵn của Ruby và nhiều phần mở rộng khác được khởi tạo bởi thư viện này.

toc

Mục có liên quan

Advanced JavaScript guide.

toc

Các hàm tiện ích

Thư viện này mang đến rất nhiều các đối tượng và các hàm tiện ích đã được định nghĩa sẵn. Mục tiêu chủ yếu của các hàm này là nhằm giúp bạn đỡ phải lập đi lặp lại việc đánh máy và các thành ngữ.

toc

Sử dụng hàm $()

Hàm $() là một cách tiện lợi thay thế cho 1 hàm rất quen thuộc đó là document.getElementById() của DOM.Giống như hàm DOM, hàm này trả về thành tố ứng với id được truyền dưới dạng tham số.

Không giống với hàm DOM, hàm này đi xa hơn một bậc. Bạn có thể truyền 1 hay nhiều id và $() sẽ trả về một đối tượngArray với tất cả các thành tố được yêu cầu. Ví dụ dưới đây sẽ minh họa điều này.

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>

<script>
	function test1()
	{
		var d = $('myDiv');
		alert(d.innerHTML);
	}

	function test2()
	{
		var divs = $('myDiv','myOtherDiv');
		for(i=0; i<divs.length; i++)
		{
			alert(divs[i].innerHTML);
		}
	}
</script>
</HEAD>

<BODY>
	<div id="myDiv">
		<p>Đây là một đoạn văn bản</p>
	</div>
	<div id="myOtherDiv">
		<p>Đây là một đọan văn bản khác</p>
	</div>

	<input type="button" value=Test1 onclick="test1();"><br> 
	<input type="button" value=Test2 onclick="test2();"><br> 

</BODY>
</HTML>

Một điều thú vị nữa về hàm này đó là bạn có thể truyền được chuỗi id hoặc là đối tượng của thành tốt đó. Điều này làm cho hàm này rất hữu ích khi tạo các hàm khác mà có thể nhận được cả dạng tham số.

toc

Sử dụng hàm $$()

Hàm $$() sẽ giúp bạn rất nhiều nếu bạn muốn tách biết các tập tin CSS ra khỏi khung nội dung. Nó truyền 1 hay nhiều bộ lọc(filter) CSS, từng cái một sẽ được dùng tuẩn tự để xác định thể hiện CSS. Nó sẽ trả về phần tử trùng khớp với bộ lọc CSS ấy

Sử dụng hàm này rất dễ. Hãy xem ví dụ sau:

<script>
function test$$(){
	/*
	  in case CSS is not your forte, the expression below says
	  'find all the INPUT elements that are inside 
	  elements with class=field that are inside a DIV
	  with id equal to loginForm.'
	*/
	var f = $$('div#loginForm .field input');
	var s = '';
	for(var i=0; i<f.length; i++){
		s += f[i].value + '/';
	}
	alert(s); // shows: "joedoe1/secret/"
	
	//now passing more than one expression
	f = $$('div#loginForm .field input', 'div#loginForm .fieldName');
	s = '';
	for(var i=0; i<f.length; i++){
		s += ( f[i].value ? f[i].value : f[i].innerHTML ) + '/';
	}
	alert(s); //shows: "joedoe1/secret/User name:/Password:/"
}


</script>

<div id='loginForm'>
	<div class='field'>
		<span class='fieldName'>User name:</span>
		<input type='text' id='txtName' value='joedoe1'/>
	</div>
	<div class='field'>
		<span class='fieldName'>Password:</span>
		<input type='password' id='txtPass' value='secret' />
	</div>
	<input type='submit' value='login' />
</div> 
<input type=button value='test $$()' onclick='test$$();' />

Một ghi chú về hiệu suất. Hàm $$() hiện tại trong prototype.js không được xem là có hiệu quả đặc biệt. Nếu bạn muốn đào sâu hơn về XHTML bằng cách sử dụng $$() thường xuyên, bạn có thể xem xét những thể hiện khác, có thể sẽ thay thế hàm $$().

toc

Sử dụng hàm $F()

Hàm $F() lại là một cách ngắn gọn khác. Nó trả về giá trị của vùng nhập dữ liệu, như hộp văn bản, hay là danh sách thả xuống. Hàm này nhận tham số là id của thành tố hoặc là chính đối tượng của thành tố ấy.

<script>
	function test3()
	{
		alert(  $F('userName')  );
	}
</script>

<input type="text" id="userName" value="Joe Doe"><br> 
<input type="button" value=Test3 onclick="test3();"><br>

toc

Sử dụng hàm $A()

Hàm $A() một tham số nó nhận được thành một đối tượng Array.

Hàm này kết hợp với phần mở rộng của lớp Array, làm cho nó dễ dàng có thể chuyển đổi hoặc sao chép bất cứ danh sách đếm được nào thành đối tượng Array . Có một số người khuyên là nên chuyển đổi đối tượng DOM NodeLists thành một mảng thông thường, để có thể tham chiếu dễ dàng.Xem ví dụ dưới đây.

<script>

	function showOptions(){
		var someNodeList = $('lstEmployees').getElementsByTagName('option');
		var nodes = $A(someNodeList);

		nodes.each(function(node){
				alert(node.nodeName + ': ' + node.innerHTML);
			});
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Show the options" onclick="showOptions();" >

toc

Sử dụng hàm $H()

Hàm $H() chuyển đổi các đối tượng thành các đối tượng Hash đếm được (enumerable) tương tự như các mảng.

<script>
	function testHash()
	{
		//tạo một đối tượng
		var a = {
			first: 10,
			second: 20,
			third: 30
			};

		//chuyển nó thành mảng băm
		var h = $H(a);
		alert(h.toQueryString()); //displays: first=10&second=20&third=30
	}

</script>

toc

Sử dụng hàm $R()

Hàm $R() đơn giản chỉ là cách ngắn gọn viết thay cho new ObjectRange(lowerBound, upperBound, excludeBounds).

Đi đến phần ObjectRange để tham khảo đầy đủ về lớp này. Trong lúc ấy thì hãy xem qua ví dụ đơn giản sau để biết cách sử dụng vòng lặp với phương thức each. Xem thêm về phương thức này tại Enumerable .

<script>
	function demoDollar_R(){
		var range = $R(10, 20, false);
		range.each(function(value, index){
			alert(value);
		});
	}

</script>

<input type="button" value="Sample Count" onclick="demoDollar_R();" >

toc

Sử dụng hàm Try.these()

Hàm Try.these() làm mọi việc đơn giản hơn khi bạn có ý định thử gọi nhiều hàm khác nhau cho đến khi có 1 hàm trong số đó hoạt động. Nó lấy tham số là tên của các hàm và gọi tuần tự các hàm đó cho đến khi có 1 hàm hoạt động. Hàm trả về kết quả của hàm được gọi thành công.

Trong ví dụ dưới đây, hàm xmlNode.text hoạt động trong một số trình duyệt, và hàm xmlNode.textContent hoạt động trong một số trình duyệt khác. Sử dụng hàm Try.these() chúng ta có thể trả về hàm có thể hoạt đọng.

<script>
function getXmlNodeValue(xmlNode){
	return Try.these(
		function() {return xmlNode.text;},
		function() {return xmlNode.textContent;}
		);
}
</script>

toc

Đối tượng Ajax

Hàm tiệc ích được đề cập phía trên là rất tốt nhưng, sự thật là nó không phải là cách tốt nhất để làm công việc này. Bạn có thể tự viết nó hoặc có thể có nhưng hàm tương tự trong mã lệnh của bạn. Nhưng những hàm đó chỉ là phần nổi của tảng băng mà thôi.

Tôi chắc chắn là bạn thấy hứng thú với prototype.js là vì khả năng hỗ trợ AJAX của nó. Bây giờ hãy cùng giải thích vì sao thư viện này sẽ làm cho bạn thấy thoải mái hơn khi bạn cần thực hiện các cấu trúc login của AJAX.

Đối tượng Ajax là một đối tượng được định nghĩa sẵn, được tạo bởi thư viện nhằm gói gọn và làm đơn giản những đoạn mã khó hiểu khi viết các chức năng AJAX. Hàm này chứa một số lớp cung cấp các cấu trúc AJAX được gói gọn lại. Nào, hãy xem thử qua một số trong chúng.

toc

Mánh khóe với String

Strings là một đối tượng rất mạnh. Prototype.js tận dụng sức mạnh và nâng nó lên một tầm cao khác về chất lượng.

Thay thế Strings

Khi nghĩ đến thay thế chuỗi trong Javascript, thường thì đã có sẵn các phương thức như String.Replace. Mặc dù nó vẫn có thể hoạt động với biểu thức chính qui(regular expression) nhưng nó vẫn không linh hoạt bằng phương thức thay thế mới trong prototype.js

Hãy đến với phương thức String.gsub. Với phương thức này bạn không chỉ có thể tìm và thay thế 1 chuỗi cố định hay 1 biểu thức chính qui bạn còn có thể kiểm soát được nhiều hơn quá trình thay thế. Ví dụ: bạn có thể sử dụng 1 mẫu có sẵn để chỉ cho phương thức cách mà bạn muốn các kết quả tìm kiếm sẽ được biến đổi (thay vì chỉ là thay thế thông thường)

Ví dụ dưới đây sẽ tìm kiếm những từ chứa 't' và thay thế cả cụm theo sau 't' bằng 'tizzle'. Trong trường hợp ví dụ không rõ ràng, biểu thức chính qui mà chúng ta chọn sẽ sẽ có dạng khai báo thành nhóm : \w+ được để trong ngoặc. Chúng ta có thể lấy được giá trị của nhóm này bằng cách sử dụng #{1} trong chuỗi thay thế mẫu.

Trong ví dụ, chúng ta tiến hành bắt lấy những gì phía sau 't' và thêm vào 'tizzle'. Nếu chúng ta có nhiều nhóm trong biểu thức chính qui, chúng ta có thể lấy các giá trị như sau strong>#{2}, #{3}, ...

<script>
function talkLikeYouKnowSomething(){
	var s = 'prototype string extensions can help you';
	var snoopdogfy = /\b(\w+)t\w+\b/;
	var snooptalk = s.gsub(snoopdogfy, '#{1}tizzle' );
	alert(snooptalk); // shows: "prototizzle stizzle extizzle can help you"				
}
</script>

Không nên chỉ dừng tại đây. Những thay thế mà chúng ta vừa thực hiện không phải là mạnh mẽ lắm vì chúng ta chỉ giới hạn chúng ở dạng khớp mẫu (pattern matching) và thay thế. Sẽ là thế nào nếu chúng ta có thể thao tác trên các mẫu khớp với những phép logic tùy ý, và từ đó tạo ra những giá trị thay thế mong muốn? Chúng ta có thể làm được như vậy nếu chúng ta truyền 1 hàm dưới dạng tham số thứ 2 vào gsub. Hàm này sẽ nhận 1 mảng với chuỗi khớp (index 0) và bất cứ giá trị nhóm nào(index 1 đến N.)

<script>
function scamCustomers(){
	var prices = 'book1 $12.5, magazine $5.50, pencil $1.20';
	var priceFinder = /\$([0-9\.]+)/;
	var r = prices.gsub(priceFinder, jackUp);
	alert(r);//shows: "book1 $13.75, magazine $6.05, pencil $1.32"
}
	
function jackUp(matches){
	//increases the prices by 10%
	var price = parseFloat(matches[1]);
   	return '$' + Math.round(110 * price)/100;
}
</script>

Mẫu sẵn có của Strings

Khi số lượng mã Javascript tăng lên, đồng nghĩa với việc bạn sẽ thấy xung quanh mình sẽ là tập hợp các đối tượng có cùng 1 kiểu, và bạn cần phải sắp xếp nó theo một trật tự nhất định.

Trong ứng dụng của bạn, sẽ không phải là hiếm để bắt gặp những đoạn code chạy lặp lại qua danh sách các đối tượng, khởi tạo các chuỗi dựa trên đặc tính của đối tượng và trật tự nhất định của một số phần tử. Prototype.js có Template class, nhằm giúp bạn với những tình huống nêu trên.

Ví dụ dưới đây sẽ hướng dẫn cách để định dạng một danh sách các mục trong 1 giỏ hàng trong vài dòng HTML.

<script>
function printCart(){
	//creating a sample cart
	var cart = new Object();
	cart.items = [ ];
	//putting some sample items in the cart
	cart.items.push({product: 'Book 123', price: 24.50, quantity: 1});
	cart.items.push({product: 'Set of Pens', price: 5.44, quantity: 3});
	cart.items.push({product: 'Gift Card', price: 10.00, quantity: 4});
	
	//here we create our template for formatting each item
	var itemFormat = new Template(
			'You are ordering #{quantity} units ' + 
			'of #{product} at $#{price} each'
			);
	var formatted = '';
	
	for(var i=0; i<cart.items.length; i++){
		var cartItem = cart.items[i];
		formatted += itemFormat.evaluate(cartItem) + '<br/>\n';
	}
	
	alert(formatted);
	/* SHOWS:
	You are ordering 1 units of Book 123 at $24.5 each<br/>
	You are ordering 3 units of Set of Pens at $5.44 each<br/>
	You are ordering 4 units of Gift Card at $10 each<br/>
	*/
}
</script>

Để tham khảo đầy đủ hơn về danh sách các hàm liên quan đến chuỗi, xem String extensions

toc

Sử dụng lớp Ajax.Request

Nếu bạn không sử dụng bất cứ thư viện hỗ trợ nào, bạn có thể phải viết rất nhiều mã lệnh để tạo ra đối tượng XMLHttpRequest và phải theo dõi các tiến trình không đồng bộ (asynchronous) của nó. Sau đó thì tách ra những hồi đáp (response) và thi hành chúng. Và bạn có thể cho là mình may mắn nếu bạn không cần phải hỗ trợ nhiều hơn 1 loại trình duyệt.

Để hỗ trợ các hứng năng của AJAX, thư viện định nghĩa lớp Ajax.Request.

Cứ cho rằng bạn có một ứng dụng mà cần phải thông tin với máy chủ thông qua url http://yourserver/app/get_sales?empID=1234&year=1998, mà trả về một hồi đáp XML như sau :

<?xml version="1.0" encoding="utf-8" ?> 
<ajax-response>
	<response type="object" id="productDetails">
		<monthly-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-01</year-month> 
				<sales>$8,115.36</sales> 
			</employee-sales>
			<employee-sales>
				<employee-id>1234</employee-id> 
				<year-month>1998-02</year-month> 
				<sales>$11,147.51</sales> 
			</employee-sales>
		</monthly-sales>
	</response>
</ajax-response>

Giao tiếp với máy chủ và nhận lại mã XML này thật là đơn giản khi dùng đối tượng Ajax.Request . Ví dụ sau sẽ cho thấy nó hoạt động thế nào.

<script>
	function searchSales()
	{
		var empID = $F('lstEmployees');
		var y = $F('lstYears');
		var url = 'http://yourserver/app/get_sales';
		var pars = 'empID=' + empID + '&year=' + y;
		
		var myAjax = new Ajax.Request(
			url, 
			{
				method: 'get', 
				parameters: pars, 
				onComplete: showResponse
			});
		
	}

	function showResponse(originalRequest)
	{
		//put returned XML in the textarea
		$('result').value = originalRequest.responseText;
	}
</script>

<select id="lstEmployees" size="10" onchange="searchSales()">
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>
<select id="lstYears" size="3" onchange="searchSales()">
	<option selected="selected" value="1996">1996</option>
	<option value="1997">1997</option>
	<option value="1998">1998</option>
</select>
<br><textarea id=result cols=60 rows=10 ></textarea>

Bạn có thể thấy được tham số thứ 2 được truyền cho phương thức khởi tạo (constructor) của đối tượng Ajax.Request hay không? Tham số {method: 'get', parameters: pars, onComplete: showResponse} thể hiện một đối tượng vô danh trong phần chú thích ngữ nghĩa (a.k.a. JSON). Điều này có nghĩa là chúng ta đang truyền 1 đối tượng có 1 thuộc tính là method chứa chuỗi 'get', và một thuộc tính khác là parameters chứa các chuỗi truy vấn của yêu cầu HTTP (HTTP request), và một onComplete thuộc tính/phương thức chứa hàm showResponse.

Có thể có thêm một số thuộc tính nữa mà bạn có thể định nghĩa trong đối tượng này, như asynchronous, có thể là true hoặc false và xác định nếu lời gọi của AJAX đến máy chủ sẽ được thực hiện không đồng bộ (giá trị mặc định là true.)

Tham số này định nghĩa một số tùy chọn cho lời gọi AJAX. Trong phần ví dụ, chúng ta đã gọi url trong phần tham số thứ 1 thông qua lệnh HTTP GET, truyền chuỗi truy vấn chứa trong biến pars, và đối tượng Ajax.Request sẽ gọi hàm showResponse khi nó kết thúc việc nhận phản hồi.

Như bạn có thể đã biết rằng XMLHttpRequest thông báo tiến trình trong suốt quá trình gọi HTTP. Tiến trình này có thể cung cấp 4 bậc khác nhau: Loading, Loaded, Interactive, hoặc Complete. You Bạn có thể làm cho đối tượng Ajax.Request gọi một hàm tùy ý trong bất cứ bậc nào, Complete là phần thông dụng nhất. Để xác định hàm cho đối tượng, đơn giản chỉ cần cung cấp thuộc tính/phương thức onXXXXX trong phần lựa chọn yêu cầu, như onComplete trong ví dụ của chúng ta. Hàm mà bạn truyền vào sẽ được gọi bởi đối tượng với 2 tham số, tham số thứ nhất là đối tượng XMLHttpRequest (a.k.a. XHR), tham số thứ hai sẽ là header của HTTP, phản hồi X-JSON (nếu có tồn tại). the second one will be the evaluated X-JSON response HTTP header (if one is present). Bạn có thể sử dụng XHR để lấy dữ liệu trả về và có thể kiểm tra xem thuộc tính status mà sẽ chứa các mã kết quả HTTP của lệnh gọi. X-JSON header rất hữu ích khi bạn muốn trả về một số mã lệnh nào đó hay dữ liệu dưới định dạng JSON.

Hai lựa chọn hấp dẫn khác có thể được dùng để xử lý các kết quả. Bạn có thể chỉ định lựa chọn onSuccess như một hàm có thể được gọi khi AJAX gọi thi hành mà không có lỗi xảy ra. , và ngược lại lựa chọn onFailure có thể là hàm để được gọi khi lỗi máy chủ xảy ra. Giống như là các hàm onXXXXX, 2 hàm này sẽ được gọi để truyền XHR , trong có có hàm gọi AJAX và X-JSON header.

Ví dụ của chúng ta không xử lý phản hồi XML với bất kì cách thức hấp dẫn nào cả. Chúng ta chỉ xuất XML ra vùng văn bản. Cách sử dụng tiêu biểu của phản hồi này có thể tìm những thông tin cần thiết bên trong XML và cập nhật một thành phần trang, hoặc có thể một số loại biến đổi XSLT để tạo ra mã HTML trong trang.

Trong phiên bản 1.5.0, một mẫu dùng để điều khiển các sự kiện gọi lại(event callback handling) được giới thiệu. Nếu bạn có mã lệnh mà phải luôn xử lý một sự kiện đặc biệt nào đấy, mặc cho hàn AJAX nào được gọi, bạn đều có thể sử dụng đối tượng mới này Ajax.Responders.

Cứ cho rằng bạn muốn thể hiện một số hiển thị bằng lời gọi AJAX khi nó đang trong tiến trình, ví dụ như xoay icon hay là một vài thứ khác. Bạn có thể sử dụng 2 phần điều khiển sự kiện toàn cục để giúp bạn. Một cái là để biểu diễn icon khi lời gọi đầu tiên bắt đầu và một cái khác sẽ dấu icon khi lời gọi kết thúc. Xem ví dụ dưới đây.

<script>
	var myGlobalHandlers = {
		onCreate: function(){
			Element.show('systemWorking');
		},

		onComplete: function() {
			if(Ajax.activeRequestCount == 0){
				Element.hide('systemWorking');
			}
		}
	};

	Ajax.Responders.register(myGlobalHandlers);
</script>

<div id='systemWorking'><img src='spinner.gif'>Loading...</div>

For more complete explanations, see the Ajax.Request reference and the options reference.

toc

Sử dụng lớp Ajax.Updater

Nếu bạn có một máy chủ đầu cuối có thể trả về thông tin dưới dạng HTML, thư viện sẽ làm mọi việc dễ dàng hơn cho bạn với lớp Ajax.Updater. Với lớp này bạn có thể xách định thành phần nào sẽ được nhận mã HTML trả về từ lời gọi AJAX. Ví dụ sau đây sẽ làm rõ hơn điều này.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
			'placeholder', 
			url, 
			{
				method: 'get', 
				parameters: pars
			});
		
	}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

Như bạn thấy, mã lệnh trông rất giống với ví dụ trước, trừ một ngoại lệ của hàm onComplete và id của thành phần được truyền cho phương thức khởi tạo. Hãy thay đổi mã lệnh một tí để xem nó có thể điều khiển được lỗi của máy chủ trên máy khách thế nào.

Chúng ta sẽ thêm vào một số tùy chọn nữa chọn lời gọi, để chỉ định một hàm để bắt lỗi. Điều này được thực hiện bằng cách sử dụng lựa chọn onFailure . Chúng ta cũng sẽ chỉ định placeholder chỉ được nhiều hơn khi thao tác thành công. Để đạt được điều này chúng ta phải phải thay đổi 1 tham số từ 1 id đơn giản của phần tử đến 1 đối tượng với 2 thuộc tính, success (được sử dụng khi tất cả đều thành công) và failure (được sử dụng khi có lỗi). Chúng ta sẽ không sử dụng thuộc tính failure trong ví dụ, chỉ có hàm reportError bên trong lựa chọn onFailure.

<script>
	function getHTML()
	{
		var url = 'http://yourserver/app/getSomeHTML';
		var pars = 'someParameter=ABC';
		
		var myAjax = new Ajax.Updater(
					{success: 'placeholder'}, 
					url, 
					{
						method: 'get', 
						parameters: pars, 
						onFailure: reportError
					});
		
	}

	function reportError(request)
	{
		alert('Xin lỗi ! Có lỗi xảy ra.');
	}
</script>

<input type=button value=GetHtml onclick="getHTML()">
<div id="placeholder"></div>

Nếu máy chủ của bạn trả về mã JavaScript cùng với mã HTML, đối tượng Ajax.Updater có thể định giá trị mã JavaScript đấy. Để lấy một tượng để nhận phản hồi dưới dạng mã JavaScript, bạn đơn giản chỉ thêm evalScripts: true; vào danh sách thuộc tính trong tham số cuối cùng của đối tượng khởi tạo. Nhưng ở đây có 1 lỗ hổng. Những khối mã này sẽ không được thêm vào mã của trang. Với tên tùy chọn evalScripts gợi ý rằng những mã này sẽ được định giá trị. Thế thì có khác biệt gì? Hãy giả định rằng URL được yêu cầu như sau :

<script language="javascript" type="text/javascript">
	function sayHi(){
		alert('Hi');
	}
</script>

<input type=button value="Click Me" onclick="sayHi()">

Trừ trường hợp bạn đã thử nó trước, bạn biết nó sẽ không chạy. Lý do là khối mã lệnh sẽ bị định giá trị, và việc định giá trị của mã như trên sẽ không tạo ra một hàm nào mang tên sayHi. Nó sẽ chẳng làm gì cả. Để tạo hàm này chúng ta cần thay đổi mã lệnh để khởi tạo hàm. Xem bên dưới.

<script language="javascript" type="text/javascript">
	sayHi = function(){
		alert('Hi');
	};
</script>

<input type=button value="Click Me" onclick="sayHi()">

Ghi chú rằng trong ví dụ trước chúng ta không sử dụng từ khóa var để khai báo các biến. Làm như thế sẽ tạo ra một đối tượng hàm mang tính cục bộ đối với khối mã lệnh (ít nhất thì cũng trong IE). Không có từ khoá var đối tượng hàm sẽ có phạm vi hoạt động trong cửa sổ đó, và đó là điều chúng ta muốn.

Để có được giải thích rõ ràng hơn, hãy xem Ajax.Updater reference và options reference.

toc

"?" và □ là cái gì?

Khi bạn viết mẫu thử 1 vài script để cập nhật trang bằng cách sử dụng đối tượng Ajax.Updater, và nó hoạt động rất tốt. Nó vẫn tốt cho đến khi bạn chạy script của mình với dữ liệu thật đột nhiên trong các chuỗi cập nhật xuất hiện những dấu '?' và '□' hay những dấu hiệu lạ khác tại những chỗ không phải là tiếng Anh chuẩn.

Điều nghi ngờ đầu tiên của bạn là prototype.js. Nhưng khoang hãy đổ lỗi cho nó. Hãy hỏi xem là bạn đã thật sự hiểu về mã kí tự(character encoding), mã trang và cách mà trình duyệt xử lý nó hay chưa?

Sau đây tôi sẽ trình bày một cách rõ ràng về vấn đề này, và cho bạn một số gợi ý để bạn có thể bắt đầu chỉnh sửa cho phù hợp với yêu cầu của mình.

Đơn giản là hãy làm theo cách sau: hãy cho trình duyệt những gì mà nó muốn bạn cho nó. Ví dụ: nếu bạn cập nhật trang chứa các kí tự Unicode/UTF-8 thì hãy cho trình duyệt biết về điều ấy.

Hãy bắt đầu với 1 trường hợp đơn giản khi bạn cập nhật trang với văn bạn ở dạng HTML tĩnh nằm trên server. Khi tạo ra tập tin đó, tùy vào công cụ biên tập của bạn mà rất có thể tập tin sẽ được lưu ở dạng ANSI(non-Unicode). Điều này là mặc định ở 1 số công cụ biên tập, đặc biệt là các công cụ biên tập mã nguồn vì kích thước tập tin sẽ nhỏ hơn, và cũng rất hiếm để có kí tự Unicode trong mã nguồn.

Giả sử bạn có tập tin sau tên là static-content.html trên server. Bạn lưu nó dưới dạng ANSI.

<div>
	Hi there, José. Yo no hablo español.
</div>

Trang của bạn sẽ cập nhật bằng việc sử dụng vài dòng mã sau đây.

<script>
	function updateWithFile(){
		var url = 'static-content.html';
		var pars = '';
		var myAjax = new Ajax.Updater(
				'placeholder', url, 
				{method: 'get', parameters: pars});
	}
</script>
<div id="placeholder">(this will be replaced)</div>
<input id="btn" value="Test With Static File" 
                 onclick="updateWithFile()" type="button"/>

Khi bạn nhấn nút, tập tin sẽ được gọi nhưng những kí tự không phải tiếng Anh sẽ được thay thế bằng dấu ? và những kí tự khác. Nó sẽ trông giống như "Hi there, Jos?. Yo no hablo espa?ol." hay "Hi there, Jos?Yo no hablo espa?", tùy vào trình duyệt của bạn.

Trong trường hợp này thì chỉ cần lưu tập tin lại với dạng phù hợp. Hãy lưu nó lại ở dạng UTF-8 và chạy lại. Bạn sẽ thấy rằng nó sẽ hiển thì đúng(bạn nhớ refresh lại trình duyệt để loại bỏ cache)

Nếu HTML mà bạn dùng không phải là dữ liệu tính, và nếu nó được tạo ra bởi một số framework (như ASP.NET, PHP, Ruby hay Perl,), hãy chắc chắn rằng mã tạo ra HTML phải ở dạng phù hợp bao gồm cả HTTP headers. Mỗi hệ cơ sở đều có cách riêng để giải quyết vấn đề này, nhưng đều tương tự nhau cả.

Ví dụ trong ASP.NET bạn có thể xác lập trong web.config

<globalization requestEncoding="utf-8" responseEncoding="utf-8" />

Trong ASP 3.0 bạn sử dụng dòng mã sau.

Response.CodePage = 65001
Response.CharSet = "utf-8"

Trong PHP, cú pháp để thêm vào header trông như sau.

<?php header('Content-Type: text/html; charset=utf-8'); ?>

Trong trường hợp, mục đích cuối cùng của bạn là để có HTTP header sau gởi cùng với yêu cầu.

Content-Type: text/html; charset=utf-8

Chúng ta sử dụng UTF-8 trong ví dụ phía trên, nhưng nếu bạn cần những thiết lập khác bạn có thể dễ dàng thay đổi.

Enumerating... Wow! Damn! Wahoo!

Chúng ta đã rất quen thuộc với vòng lặp. Bạn biết đấy, tạo ra một mảng, thêm vào nó các phần tử cùng type, tạo một cấu trúc lặp (for, foreach, while, repeat, ...), truy cập mỗi phần tử một cách tuần tự, bằng số chỉ vị trí của nó, sau đó thì thao tác gì đấy với các phần tử.

Khi bạn nghĩ về nó, hầu hết bạn đều có một mảng trong mã lệnh của bạn, có nghĩa rằng bạn sẽ sử dụng mảng đó trong 1 vòng lặp sớm hay muộn. Sẽ không tốt hơn sao nếu đối tượng mảng có nhiều chức năng hơn để thao tác với các vòng lặp này. Và đúng thế, nó sẽ hay hơn rất nhiều. Và nhiều ngôn ngữ lập trình cung cấp những chức năng như thế cho các mảng hoặc những cấu trúc tương tự (như là tập hợp, danh sách)

Và, ngỡ ra rằng prototype.js cho chúng ta đối tượng Enumerable, đối tượng này khởi tạo một loạt các mánh khóe giúp chúng ta thao tác với dữ liệu lặp. Thư viện prototype.js tiến xa hơn 1 bước nữa và mở rộng lớp Array với tất cả các phương thức của Enumerable.

toc

Vòng lặp, theo type của Ruby

Trong javascript chuẩn, nếu bạn muốn thể hiện tuần tự các phần tử của một mảng, bạn phải viết rất đầy đủ như sau.

<script>
	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
		for(i=0;i<simpsons.length;i++){
			alert(simpsons[i]);
		}
	}

</script>

<input type="button" value="Show List" onclick="showList();" >

Với người bạn mới, prototype.js, bạn có thể viết lại vòng lặp này như sau.

	function showList(){
		var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
		simpsons.each( function(familyMember){
			alert(familyMember);
		});
	}

Bạn có thể nghĩ rằng "cần gì phải làm to chuyện, chỉ là nồi cũ vung mới thôi mà" Hãy khoan đã nào, ở ví dụ trên, đúng là chẳng có gì đặc biết cả. Sẽ chẳng có gì là thay đổi với một ví dụ đơn giản. Nhưng dù sao thì hãy cứ đọc tiếp đi nào.

Trước khi chúng ta tiếp tục, bạn có thấy là hàm này được truyền dưới dạng tham số cho phương thức each hay không? Hãy bắt đầu thay nó bằng một hàm lặp.

toc

Vài điều về mảng

Như chúng ta đã đề cập ở trên, việc tất cả các phần tử trong một mảng có cùng một type, cùng thuộc tính và phương thức là rất thông dụng. Hãy xem làm thế nào chúng ta có thể tận dụng ích lợi của các hàm lặp với các mảng mới này.

Tìm một phần tử phù hợp với tiêu chuẩn.

<script>
	function findEmployeeById(emp_id){
		var listBox = $('lstEmployees')
		var options = listBox.getElementsByTagName('option');
		options = $A(options);
		var opt = options.find( function(employee){
			return (employee.value == emp_id);
		});
		alert(opt.innerHTML); // hiển thị tên nhân viên
	}
</script>

<select id="lstEmployees" size="10" >
	<option value="5">Buchanan, Steven</option>
	<option value="8">Callahan, Laura</option>
	<option value="1">Davolio, Nancy</option>
</select>

<input type="button" value="Find Laura" onclick="findEmployeeById(8);" >

Bây giờ hãy thêm 1 mánh nữa nào. Xem làm sao chúng ta có thể lọc ra các phần tử trong các mảng, và chỉ lấy về 1 thành viên mong muốn của mỗi phần tử.

<script>
	function showLocalLinks(paragraph){
		paragraph = $(paragraph);
		var links = $A(paragraph.getElementsByTagName('a'));
		//find links that do not start with 'http'
		var localLinks = links.findAll( function(link){
			var start = link.href.substring(0,4);
			return start !='http';
		});
		//now the link texts
		var texts = localLinks.pluck('innerHTML');
		//get them in a single string
		var result = texts.inspect();
		alert(result);
	}

</script>
<p id="someText">
	This <a href="http://othersite.com/page.html">text</a> has 
	a <a href="#localAnchor">lot</a> of 
	<a href="#otherAnchor">links</a>. Some are 
	<a href="http://wherever.com/page.html">external</a>
	and some are <a href="#someAnchor">local</a>
</p>
<input type=button value="Find Local Links" onclick="showLocalLinks('someText')">

Cần phải luyện tập nhiều thì mới có thể hoàn toàn quen thuộc với cú pháp này được. Hãy xem qua Enumerable và Array để tham khảo toàn bộ các hàm.

toc

Tài liệu tra cứu cho prototype.js

Phần mở rộng cho các lớp JavaScript

Một trong số các cách mà thư viện prototype.js sử dụng để thêm các chức năng đó là mở rộng các lớp đã có sẵn của JavaScript.

toc

Phần mở rộng cho lớp Object

Phương thức
Loại
Các tham số
Mô tả

extend(destination, source)
static
destination: bất cứ đối tượng nào, source: bất cứ đối tượng nào
Cung cấp 1 cách để khởi tạp sự kế thừa bằng cách sao chép toàn bộ các thuộc tính và phương thức từ source đến destination.

inspect(targetObj)
static
targetObj: bất cứ đối tượng nào
Trả về một chuỗi dễ đọc biểu diễn cho targetObj. Nó mặc định là giá trị trả về của toString nếu đối tượng được gọi không định nghĩa phương thức inspect .

toc

Phần mở rộng cho lớp Number

Phương thức
Loại
Các tham số
Mô tả

toColorPart()
instance
(none)
Trả về con số dưới dạng thập lục phân. Hữu dụng khi muốn chuyển đổi thành phần màu RGB bên trong mã HTML.

succ()
instance
(none)
Trả về số kế tiếp. Hàm này được sử dụng trong hoàn cảnh liên quan đến vòng lặp.

times(iterator)
instance
iterator: đối tượng hàm phù hợp với Function(index)
Gọi lặp lại hàm iterator bằng cách truyền chỉ số hiện tại cho tham số index.

Ví dụ dưới đây sẽ hiển thị hộp cách báo từ 0 đến 9.

<script>
	function demoTimes(){
		var n = 10;
		n.times(function(index){
			alert(index);
		});
		/***************************
		 * you could have also used: 
		 *           (10).times( .... ); 
		 ***************************/
	}

</script>

<input type=button value="Test Number.times()" onclick="demoTimes()">

toc

Phần mở rộng cho lớp Function

Phương thức
Loại
Các tham số
Mô tả

bind(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có cùng các tham số như hàm gốc.

bindAsEventListener(object)
instance
object: đối tượng sở hữu phương thức
Trả về một khởi tạo của hàm có liên kết với đối tượng hàm (phương thức)chủ. Hàm trả về sẽ có đối tượng của sự kiện hiện tại là tham số của nó.

Hãy xem những phần mở rộng này trong thực tế.

<input type=checkbox id=myChk value=1> Test?
<script>
	//declaring the class
	var CheckboxWatcher = Class.create();

	//định nghĩa toàn bộ việc khởi tạo lớp
	CheckboxWatcher.prototype = {

	   initialize: function(chkBox, message) {
			this.chkBox = $(chkBox);
			this.message = message;
			//assigning our method to the event
			
			this.chkBox.onclick = 
			   this.showMessage.bindAsEventListener(this);
			
	   },

	   showMessage: function(evt) {
		  alert(this.message + ' (' + evt.type + ')');
	   }
	};


	var watcher = new CheckboxWatcher('myChk', 'Changed');
</script>

toc

Phần mở rộng cho lớp String

Phương thức
Loại
Các tham số
Mô tả

stripTags()
instance
(none)
Trả về một chuỗi mà không có thẻ HTML hay XML

stripScripts()
instance
(none)
Trả về chuỗi mà không có các khối <script />

escapeHTML()
instance
(none)
Trả về chuỗi với các kí tự HTML đã được đánh dấu

unescapeHTML()
instance
(none)
Ngược lại với escapeHTML()

extractScripts()
instance
(none)
Trả về một đối tượng Array chứa các khối <script /> được tìm thấy với chuỗi.

evalScripts()
instance
(none)
Định giá trị của khối <script /> được tìm thấy trong chuỗi.

toQueryParams()
instance
(none)
Chia câu truy vấn thành các mảng có chỉ số bằng tên tham số (giống một mảng băm).

parseQuery()
instance
(none)
Giống như toQueryParams().

toArray()
instance
(none)
Chia chuỗi ra thành các mảng chứa các kí tự.

camelize()
instance
(none)
Chuyển đổi chuỗi không có dấu ngang thành chuỗi camelCaseString. Hàm này hữu dụng khi viết mã liên quan đến thuộc tính type, ví dụ như.

toc

Phần mở rộng cho lớp Array

Để bắt đầu, lớp Array mở rộng lớp Enumerable, do đó tất cả các phương thức tiện lợi trong đối tượng Enumerable đều có sẵn. Bên cạnh đó, những phương thức được liệt kê dưới đây cũng được khởi tạo.

Phương thức
Loại
Các tham số
Mô tả

clear()
instance
(none)
Làm rỗng mảng và trả lại chính mảng ấy.

compact()
instance
(none)
Trả lại mảng không chứa phần tử null hoặc undefined nào. Phương thức này không làm ảnh hưởng gì đến mảng.

first()
instance
(none)
Trả về phần tử đầu tiên của mảng.

flatten()
instance
(none)
Trả về mảng một chiều. Điều này được thực hiện bằng cách tìm mỗi các phần tử của mảng và thậm chí là các mảng. Sau đó thì hợp tất cả các phần tử vào mảng được trả về theo type truy hồi.

indexOf(value)
instance
value: cái bạn cần tìm.
Trả về vị trí của value được cho nếu nó được tìm thấy trong mảng. Trả về -1 nếu value không có trong mảng.

inspect()
instance
(none)
Ghi đè lên để trả về một chuỗi có định dạng đẹp biểu diễn cho mảng đó bằng chính những phần tử của nó.

last()
instance
(none)
Returns the last element of the array.

reverse([applyToSelf])
instance
applyToSelf: xác định nếu mảng này cần phải đảo ngược hay không.
Trả về mảng với vị trí đảo ngược. Nếu không có tham số nàm được cho hoặc nếu tham số có giá trị là true thì mảng cũng sẽ bị đảng ngược. Ngoài ra mảng sẽ được giữa nguyên.

shift()
instance
(none)
Trả về phần tử đầu tiên của mảng, xóa nó ra khỏi mảng, giảm chiều dài của mảng đi 1.

without(value1 [, value2 [, .. valueN]])
instance
value1 ... valueN: giá trị sẽ được bỏ qua nếu nó có trong mảng.
Trả về mảng mà không chứa các phần tử đã được liệt kê trong danh sách tham số.

toc

Phần mở rộng cho đối tượng DOMdocument

Phương thức
Loại
Các tham số
Mô tả

getElementsByClassName(className [, parentElement])
instance
className: tên của lớp CSS có liên quan đến các phần tửname of a CSS class associated with the elements, parentElement: đối tượng hay id của phần tử mà có chứa phần tử sẽ được nhận về.
Trả về tất cả các phần tử có liên quan đến lớp CSS được cho. Nếu không có id của parentElement thì toàn bộ phần thân văn bản sẽ được tìm kiếm.

toc

Phần mở rộng cho đối tượng Event

Phương thức
Loại
Các tham số
Mô tả

KEY_BACKSPACE
Number
8: Hằng số. Mã cho phím Backspace.

KEY_TAB
Number
9: Hằng số. Mã cho phím Tab.

KEY_RETURN
Number
13: Hằng số. Mã cho phím Return.

KEY_ESC
Number
27: Hằng số. Mã cho phím Esc.

KEY_LEFT
Number
37: Hằng số. Mã cho phím mũi tên trái.

KEY_UP
Number
38: Hằng số. Mã cho phím mũi tên lên.

KEY_RIGHT
Number
39: Hằng số. Mã cho phím mũi tên phải.

KEY_DOWN
Number
40: Hằng số. Mã cho phím mũi tên xuống.

KEY_DELETE
Number
46: Hằng số. Mã cho phím Delete.

observers:
Array
Liệt kê danh sách các bộ theo dõi . Đây là một phần chi tiết khởi tạo bên trong của đối tượng.

Phương thức
Loại
Các tham số
Mô tả

element(event)
static
event: đối tượng Event
Trả về phần tử của sự kiện ban đầu.

isLeftClick(event)
static
event: đối tượng Event
Trả về true nếu phím trái chuột được nhấn.

pointerX(event)
static
event: đối tượng Event
Trả về tọa độ x của con trỏ chuột trên trang hiện hành.

pointerY(event)
static
event: đối tượng Event
Trả về tọa độ y của con trỏ chuột trên trang hiện hành.

stop(event)
static
event: đối tượng Event
Sử dụng hàm này để thoát khỏi hành vi mặc định của sự kiện, và ngăn không cho nó được truyền đi.

findElement(event, tagName)
static
event: đối tượng Event, tagName: tên của thẻ mong muốn.
Duyệt lên trên cây DOM, tìm kiếm phần tử đầu tiên với tên thẻ được cho, bắt đầu tự phần tử của sự kiện ban đầu.

observe(element, name, observer, useCapture)
static
element: đối tượng hay id, name: tên sự kiện (như 'click', 'load',... ), observer: hàm để điều khiển sự kiện , useCapture: nếu là true, điều khiển sự kiện trong phần capture và nếu là false thì là trong phần bubbling.
Thêm hàm điều khiển sự kiện vào sự kiện.

stopObserving(element, name, observer, useCapture)
static
element: đối tượng hay id, name: tên sự kiện (như 'click'), observer: hàm để điều khiển sự kiện , useCapture: nếu là true, điều khiển sự kiện trong phần capture và nếu là false thì là trong phần bubbling.
Xóa hàm điều khiển sự kiện ra khỏi sự kiện.

_observeAndCache(element, name, observer, useCapture)
static
Phương thức riêng, không cần quan tâm đến nó.

unloadCache()
static
(none)
Phương thức riêng, không cần quan tâm đến nó. Xóa toàn bộ các bộ theo dõi ra khỏi bộ nhớ.

Hãy xem làm sao để sử dụng đối tượng này để thêm bộ điều khiển sử kiện, để nạp sự kiện của đối tượng window.

<script>
	Event.observe(window, 'load', showMessage, false);

	function showMessage() {
	  alert('Page loaded.');
	}
</script>

toc

Các lớp và đối tượng mới được định nghĩa bởi prototype.js

Thư viện hỗ trợ bạn bằng cách cung cấp nhiều đối tượng được khởi tạo để hỗ trợ cho thiết kế hướng đối tượng và hỗ trợ các chức năng tổng quát.

toc

Đối tượng PeriodicalExecuter

Đối tượng này cung cấp phép logic để gọi nhiều lần 1 hàm, với số lượng thời gian được cho.

Phương thức
Loại
Các tham số
Mô tả

[ctor](callback, interval)
constructor
callback: hàm không có tham số, interval:số giây
Tạo một khởi tạo của đối tượng mà gọi lặp lại hàm.

Thuộc tính
Loại
Mô tả

callback
Function()
Hàm sẽ được gọi. Không có tham số nào sẽ được truyền vào.

frequency
Number
Khoảng thời gian (giây)

currentlyExecuting
Boolean
Xác định xem nếu hàm đang được gọi

toc

Đối tượng Prototype

Đối tượng Prototype không có vai trò quan trọng gì ngoài việc khai báo phiên bản của thư viện đang sử dụng.

Thuộc tính
Loại
Mô tả

Version
String
Phiên bản của thư viện

emptyFunction
Function()
Một đối tượng hàm rỗng

K
Function(obj)
Một đối tượng hàm trả về tham số được cho.

ScriptFragment
String
Biểu thức chính qui dùng để xác định mã lệnh

toc

Đối tượng Enumerable

Đối tượng Enumerable cho phép viết mã gọn gàng hơn khi phải lặp lại nhiều phần tử trong cấu trúc tương tự như danh sách.

Có rất nhiều đối tượng thừa kế đối tượng Enumerable để sử dụng hiệu quả hơn giao diện(interface) của nó.

Phương thức
Loại
Các tham số
Mô tả

each(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi lặp lại hàm được cho, truyền mỗi phần tử trong danh sách vào tham số thứ 1, và vị trí của phần tử vào tham số thứ 2.

all([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. all sẽ trả về false nếu hàm lặp trả về false hoặc null cho bất cử phần tử nào. Ngược lại, nó sẽ trả về true. Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null. Bạn có thể hiểu đơn giản như sau "kiểm tra tất cả các phần tử mà không phải là false."

any(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)(tùy chọn).
Hàm này dùng để kiểm tra toàn bộ các giá trị bằng cách sử dụng hàm được truyền. any trả về true nếu hàm lặp không trả về false hoặc null cho bất cứ phần tử nào. Ngược lại, nó sẽ trả về false . Nếu không có iterator nào được truyền vào, thì sự kiểm tra này sẽ tốt nếu bản thân phần tử là khác false hoặc null.Bạn có thể hiểu đơn giản như sau "kiểm tra bất cứ phần tử mà không phải là false."

collect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử bên trong tập hợp và trả về mỗi kết quả trong một Array, một kết quả cho mỗi phần tử bên trong tập hợp theo cách tuần tự.

detect(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về phần tử đầu tiên khiến cho hàm lặp trả về giá trị true (hoặc không false). Nếu không có phần tử nào trả về giá trị true thì detect trả về null.

entries()
instance
(none)
Giống như toArray().

find(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Giống như detect().

findAll(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi phần tử trong tập hợp và trả về một Array với tất cả các phần tử mà làm cho hàm lặp trả về giá trị true. Hàm này ngược lại với hàm reject().

grep(pattern [, iterator])
instance
pattern: một đối tượng RegExp dùng để so sánh các phần tử, iterator: một đối tượng hàm có dạng Function(value, index)
Kiểm tra giá trị chuỗi của mỗi phần tử trong tập hợp với pattern của biểu thức chính qui (regular expression). Hàm này sẽ trả về một Array chứa toàn bộ các phần tử phù hợp với biểu thức chính qui. Nếu hàm lặp được truyền thì Array sẽ chứa kết quả của lời gọi từ hàm lặp này tương ứng với mỗi phần tử.

include(obj)
instance
obj: bất cứ đối tượng nào
Cố gắng tìm đối tượng được cho trong tập hợp. Trả về true nếu đối tượng được tìm thấy, false nếu ngược lại.

inject(initialValue, iterator)
instance
initialValue: bất cứ đối tượng nào được dùng như giá trị khởi đầu, iterator: một đối tượng hàm có dạng Function(accumulator, value, index)
Kết hợp tất cả các phần tử trong tập hợp bằng cách sử dụng hàm lặp. Bộ lặp (iterator) sẽ được gọi để truyền kết quả của vòng lặp trước vào bộ đếm (accumulator). Vòng lặp đầu tiên lấy initialValue trong tham số bộ đếm . Kết quả cuối cùng là cái cuối cùng trả về giá trị.

invoke(methodName [, arg1 [, arg2 [...]]])
instance
methodName: tên của phương thức sẽ được gọi bởi mỗi phần tử, arg1..argN: các tham số sẽ được truyền vào phương thức.
Gọi các phương thức được xác định bởi Phương thứcName đối với mỗi phần tử của tập hợp , truyền các tham số đã cho (arg1 ... argN), và trả kết quả về trong đối tượng Array.

map(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Giống như collect().

max([iterator])
instance
iterator:một đối tượng hàm có dạng Function(value, index)(tùy chọn)
Trả về phần tử có có giá trị lớn nhất trong tập hợp hoặc kết quả lớn hoặc kết quả lớn nhất có được từ lời gọi các hàm lặp đối với mỗi phần tử nếu hàm lặp được chỉ định.

member(obj)
instance
obj: bất cứ đối tượng nào
Giống như include().

min([iterator])
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Trả về phần tử có có giá trị nhỏ nhất trong tập hợp hoặc kết quả lớn hoặc kết quả nhỏ nhất có được từ lời gọi các hàm lặp đối với mỗi phần tử nếu hàm lặp được chỉ định.

partition([iterator])
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Trả về Array chứa 2 mảng khác. Mảng đầu tiên chứa toàn bộ các phần tử mà làm cho hàm lặp trả về giá trị true và mảng thứ 2 chứ các phần tử còn lại. Nếu hàm lặp không được chỉ định, thì mảng đầu tiên sẽ chứa các phần tử có giá trị true và mảng thứ 2 chứa các phần tử còn lại.

pluck(propertyName)
instance
propertyName: tên thuộc tính sẽ được đọc bởi các phần tử. Và cũng có thể là vị trí của các phần tử
Trả về giá trị của thuộc tính xác định bởi propertyName ứng với mỗi phần tử trong tập hợp và trả về kết quả cho một đối tượng Array.

reject(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Gọi hàm lặp cho mỗi đối tượng trong tập hợp và trả về một Array với tất cả các phần tử làm cho hàm lặp trả về giá trị false. Hàm này ngược với hàm findAll().

select(iterator)
instance
iterator: một đối tượng hàm có dạng Function(value, index)
Giống như findAll().

sortBy(iterator)
instance
iterator:một đối tượng hàm có dạng Function(value, index)
Trả về một Array với tất cả các phần tử được sắp xếp dựa và kết quả của gọi của hàm lặp.

toArray()
instance
(none)
Trả về một Array với tất cả các phần tử của tập hợp.

zip(collection1[, collection2 [, ... collectionN [,transform]]])
instance
collection1 .. collectionN: những tập hợp cần được hợp lại, transform: một đối tượng hàm có dạng Function(value, index)
Kết hợp mỗi tập hợp được cho vào tập hợp hiện tại. Hành động kết hợp này trả về một mảng mới với cùng 1 số lượng phần tử với tập hợp hiện tại và mỗi phần tử là một mảng (hãy gọi nó là mảng con) của những phần tử có cùng vị trí từ những tập hợp được ghép lại. Nếu hàm chuyển đổi (transform function) được chỉ định, thì mỗi mảng con sẽ được chuyển đổi bởi hàm này trước khi được trả về. Ví dụ nhanh : [1,2,3].zip([4,5,6], [7,8,9]).inspect() returns "[ [1,4,7],[2,5,8],[3,6,9] ]"

toc

Đối tượng Hash

Đối tượng Hash khởi tạo một cấu trúc băm (hash structure), ví dụ: một tập hợp của các cặp Key:Value .

Mỗi phần trong đối tượng Hash làm một mảng với 2 phần tử: đầu tiên là key, sau đó là value. Mỗi phần có 2 thuộc tính key và value .

Phương thức
Loại
Các tham số
Mô tả

keys()
instance
(none)
Trả về một Array chứa các key của mọi thành phần.

values()
instance
(none)
Trả về một Array chứa các giá trị của mọi thành phần.

merge(otherHash)
instance
otherHash: đối tượng Hash
Kết hợp đối tượng băm này với đối tượng được truyền vào và trả về một kết quả băm mới.

toQueryString()
instance
(none)
Trả về toàn bộ các thành phần của đối tượng băm dưới dạng chuỗi, giống như chuỗi truy vấn. 'key1=value1&key2=value2&key3=value3'

inspect()
instance
(none)
Ghi đè để trả về một chuỗi có định dạng đẹp biểu diễn hash với các cặp key:value của nó.

toc

Lớp ObjectRange

Kế thừa từ Enumerable

Biểu diễn một vùng các giá trị, với giới hạn trên và dưới.

Thuộc tính
type
Loại
Mô tả

start
(any)
instance
Giới hạn dưới của vùng

end
(any)
instance
Giới hạn dưới của vùng

exclusive
Boolean
instance
Xác định các giới hạn được cho có phải thuộc vùng đó không.

Phương thức
Loại
Các tham số
Mô tả

[ctor](start, end, exclusive)
constructor
start: giới hạn dưới, end: giới hạn trên, exclusive: bao gồm cả giới hạn của vùng?
Tạo một đối tượng vùng, bắt đầu từ start đến end. Cần phải nhớ rằng start và end cần phải là đối tượng của cùng một type và chún phải có một phương thức succ() .

include(searchedValue)
instance
searchedValue: giá trị cần tìm
Kiểm tra xem giá trị được cho có nằm trong vùng hay không. Trả về true hoặc false.

toc

Đối tượng Class

Đối tượng Class được sử dụng khi khai báo các lớp khác trong thư viện Sử dụng đối tượng này khi khai báo một lớp mà được tạo để hỗ trợ phương thức initialize(). Phương thức này được sử dụng như phương thức khởi tạo.

Xem ví dụ phía dưới.

//khai báo lớp
var MySampleClass = Class.create();

//định nghĩ toàn bộ khởi tạo lớp
MySampleClass.prototype = {

   initialize: function(message) {
		this.message = message;
   },

   showMessage: function(ajaxResponse) {
      alert(this.message);
   }
};	

//khởi tạo một đối tượng mới
var myTalker = new MySampleClass('hi there.');
myTalker.showMessage(); //hiển thị thông báo

Phương thức
type
Các tham số
Mô tả

create(*)
instance
(any)
Định nghĩa một phương thức khởi tạo cho lớp mới

toc

Đối tượng Ajax

Đối tượng này cung cấp các chức năng AJAX cho nhiều lớp khác.

Phương thức
Loại
Các tham số
Mô tả

activeRequestCount
Number
instance
Số lượng các yêu cầu AJAX hiện đang thực thi.

Phương thức
type
Các tham số
Mô tả

getTransport()
instance
(none)
Trả về một đối tượng XMLHttpRequest

toc

Đối tượng Ajax.Responders

Kế thừa từ Enumerable

Đây là đối tượng duy trì một danh sách các đối tượng sẽ được gọi khi các sự kiện Ajax xảy ra. Bạn có thể sử dụng đối tượng này , ví dụ khi bạn muốn tạo một phương thức điều khiển ngoại lệ toàn cục (global exception handler) cho các thao tác AJAX.

Thuộc tính
type
Loại
Mô tả

responders
Array
instance
Danh sách các đối tượng được đăng kí cho các thông báo về sự kiện AJAX.

Phương thức
Loại
Các tham số
Mô tả

register(responderToAdd)
instance
responderToAdd: đối tượng mà có những phương thức được gọi
Đối tượng được truyền vào tham số responderToAdd phải có những phương thức liên quan đến sự kiện của AJAX (ví dụ onCreate, onComplete, onException, ...). Khi sự kiện tương ứng xảy ra, tất cả các đối tượng đã được đăng ký mà chứa một phương thức phù hợp sẽ được gọi.

unregister(responderToRemove)
instance
responderToRemove: đối tượng sẽ được xóa khỏi danh sách.
Đối tượng được truyền vào tham số responderToRemove sẽ được xóa khỏi danh sách những đối tượng đã được đăng ký.

dispatch(callback, request, transport, json)
instance
callback: tên sự kiện AJAX sẽ được thông báo, request: đối tượng Ajax.Request tương ứng với sự kiện, transport: đối tượng XMLHttpRequest mang lời gọi AJAX , json: X-JSON header để hồi đáp (nếu có)
Duyệt qua danh sách các đối tượng đã được đăng ký để tìm xem có phương thức nào được xác định trong tham sốcallback. Và sau đó những tham số được gọi sẽ được truyền vào 3 tham số còn lại. Nếu lời hồi đáp của AJAX có chứa X-JSON HTTP header với một số thành phần JSON, thi nó sẽ được định giá trị và truyền vào tham số json. Nếu sự kiện là onException, thì tham số transport sẽ có ngoại lệ, và tham sốjson sẽ không được truyền.

toc

Lớp Ajax.Base

Lớp này được sử dụng như lớp nền tảng cho hầu hết các lớp khác được định nghĩa trong đối tượng Ajax.

Phương thức
Loại
Các tham số
Mô tả

setOptions(options)
instance
options: AJAX options
Xác lập options mong muốn cho thao tác AJAX

responseIsSuccess()
instance
(none)
Trả về true nếu thao tác AJAX thành công, ngược lại thì false

responseIsFailure()
instance
(none)
Ngược lại với responseIsSuccess().

toc

Lớp Ajax.Request

Kế thừa từ Ajax.Base

Đóng gói các thao tác AJAX

Thuộc tính
type
Loại
Mô tả

Events
Array
static
Danh sách các sự kiện/tình trạng có khả năng được báo về trong quá trình diễn ra thao tác AJAX. Danh sách chứa: 'Uninitialized', 'Loading', 'Loaded', 'Interactive', và 'Complete'

transport
XMLHttpRequest
instance
Đối tượng XMLHttpRequest có mang thao tách AJAX.

url
String
instance
URL được yêu cầu(request) nhắm đến.

Phương thức
Loại
Các tham số
Mô tả

[ctor](url, options)
constructor
url: url sẽ được mở, options: lựa chọn AJAX
Tạo một khởi tạo của đối tượng sẽ gọi url được chỉ định và sử dụng options. Sự kiện onCreate sẽ được gọi khi phương thức khởi tạo được gọi. Quan trọng: Nó không đáng là gì nếu như url được cho dính dáng đến đến cài đặt bảo mật của trình duyệt. Trong nhiều trường hợp, trình duyệt sẽ không mở url nếu nó không phải từ một máy ( hay tên miền) so với trang hiện tại. Bạn chỉ nên sử dụng những url cục bộ để tránh phải chỉnh sửa hay hạn chế trình duyệt của người dùng.(Cám ơn Clay)

evalJSON()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi từ bên trong để định giá trị nội dung của X-JSON HTTP header hiện diện trong hồi đáp của AJAX.

evalResponse()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nếu hồi đáp của AJAX có header Content-type là text/javascript thì phần thân của hồi đáp sẽ được định giá trị và hàm này sẽ được sử dụng.

header(name)
instance
name: HTTP header name
Lấy về nội dung của bất cứ HTTP header nào của hồi đáp AJAX. Chỉ gọi hàm này sau khi lời gọi AJAX đã kết thúc.

onStateChange()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ tự gọi chính nó khi trạng thái của lời gọi AJAX thay đổi.

request(url)
instance
url: url cho lời gọi AJAX
Phương thức này thường không được gọi từ bên ngoài. Nó đã được gọi trong khi phương thức khởi tạo được gọi.

respondToReadyState(readyState)
instance
readyState: số biểu diễn trạng thái (1 to 4)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ tự gọi chính nó khi trạng thái của lời gọi AJAX thay đổi.

setRequestHeaders()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng này để thu tập HTTP header mà sẽ được gởi trong quá trình yêu cầu HTTP (HTTP request).

toc

Đối tượng tham số options

Một phần quan trong trong các thao tác AJAX là tham số options. There's no options class per se. Tất cả các đối tượng sẽ được truyền cho đến khi nó vẫn còn những thuộc tính phù hợp. Việc tạo một đối tượng vô danh chỉ cho lời gọi AJAX là bình thường.

Thuộc tính
type
Mặc định
Mô tả

Phương thức
String
'post'
Phương thức của yêu cầu HTTP

parameters
String
''
danh sách các giá trị được truyền cho yêu cầu

asynchronous
Boolean
true
Xác định xem lời gọi AJAX sẽ được làm bất đồng bộ

postBody
String
undefined
Nội dung sẽ được truyền vào phần thân của yêu cầu trong trường hợp của HTTP POST

requestHeaders
Array
undefined
Danh sách các HTTP header được truyền cho yêu cầu. Danh sách này phải có một số chẵn các mục ,mục mang số lẻ nào cũng là tên của header tùy ý,và mục chẵn tiếp theo đó là giá trị chuỗi của header đó. Ví dụ:['my-header1', 'đây là giá trị', 'my-other-header', 'một giá trị khác']

onXXXXXXXX
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi đến sự kiện/trạng thái tương ứng trong quá trình gọi AJAX. Ví dụ var myOpts = {onComplete: showResponse, onLoaded: registerLoaded};. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onSuccess
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi lời gọi AJAX kết thúc thành công. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onFailure
Function(XMLHttpRequest, Object)
undefined
Hàm tùy ý sẽ được gọi khi lời gọi AJAX kết thúc có lỗi. Hàm được dùng sẽ nhận 1 tham số, có chứa đối tượng XMLHttpRequest có mang thao tác AJAX và một tham số khác có chứa hồi đáp HTTP header X-JSON.

onException
Function(Ajax.Request, exception)
undefined
Hàm tùy ý sẽ được gọi khi có ngoại lệ xảy ra trên máy khách khi gọi AJAX, như hồi đáp,tham số không hợp lệ. Hàm được dùng sẽ nhận 2 tham số, có chứa đối tượng Ajax.Request. Đối tượng này bao gồm các thao tác AJAX và các đối tượng ngoại lệ.

insertion
an Insertion class
undefined
Một lớp sẽ xác định xem nội dung mới sẽ được thêm vào như thế nào. Nó có thể là Insertion.Before, Insertion.Top, Insertion.Bottom, hoặc Insertion.After. Chỉ áp dụng cho các đối tượng Ajax.Updater.

evalScripts
Boolean
undefined, false
Xác định xem các khối mã sẽ được định giá trị khi hồi có hồi đáp hay không. Chỉ áp dụng cho các đối tượng Ajax.Updater.

decay
Number
undefined, 1
Xác định sự chậm trễ trong tần số làm tươi của đối tượng Ajax.PeriodicalUpdater khi hồi đáp nhận được là giống với cái trước đấy. Ví dụ, nếu bạn sử dụng 2, thì sau khi làm có kết quả làm tươi giống với cái trước đó thì đối tượng sẽ phải chờ nhiều gấp 2 lần thời gian cho lần làm tươi tới. Và nếu nó lặp lại, thì lần sau đối tượng phải chờ nhiều gấp 4 lần thời gian, và cứ như thế. Không ghi hoặc sử dụng 1 để tránh sự chậm trễ này.

frequency
Number
undefined, 2
Chu kỳ (không phải tần số) giữa các lần làm tươi . Chỉ áp dụng cho các đối tượng Ajax.PeriodicalUpdater.

toc

Lớp Ajax.Updater

Kế thừa từ Ajax.Request

Được sử dụng khi url được yêu cầu trả về mã HTML, và bạn muốn thêm mã này trực tiếp vào một phần tử xách định trong trang. Bạn có thể sử dụng đối tượng này khi url trả về các khối <mã> mà sẽ được định giá trị khi kết thúc. Sử dụng tùy chọn evalScripts để làm việc với mã lệnh.

Thuộc tính
type
Loại
Mô tả

containers
Object
instance
Đối tượng này có 2 thuộc tính: containers.success sẽ được dùng khi lời gọi AJAX thành công và ngược lại containers.failure sẽ được dùng.

Phương thức
Loại
Các tham số
Mô tả

[ctor](container, url, options)
constructor
container:có thể là id của một phần tử, hoặc chính phần tử đó, hay là một đối tượng có 2 thuộc tính - phần tử (hoặc id) của object.success element (or id) that sẽ được dùng khi lời gọi AJAX thành công, và ngược lại phần tử (id) của object.failure sẽ được dùng. url: url sẽ được mở, options: AJAX options
Tạo một khởi tạo của đối tượng sẽ gọi url sử dụng options được cho.

updateContent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng đó khi hồi đáp được nhận. Nó sẽ cập nhật phần tử tương ứng với HTML hoặc gọi hàm được truyền vào lựa chọn insertion. Hàm này được gọi với 2 tham số, phần tử sẽ được cập nhật và trả lời.

toc

Lớp Ajax.PeriodicalUpdater

Kế thừa từ Ajax.Base

Hàm này lặp lại việc khởi tạo và sử dụng đối tượng Ajax.Updater để làm tươi một phần tử của trang, hoặc để thực hiện một số nhiệm vụ khác mà lớp Ajax.Updater có thể thực hiện. Xem Ajax.Updater reference để có thêm thông tin.

Thuộc tính
type
Loại
Mô tả

container
Object
instance
Giá trị này sẽ được truyền thẳng vào phương thức khởi tạo của Ajax.Updater.

url
String
instance
Giá trị này sẽ được truyền thẳng vào phương thức khởi tạo của Ajax.Updater.

frequency
Number
instance
Chu kỳ (không phải tần số) giữa các lần làm tươi (giây). Mặc định là 2 giây. Số này sẽ được nhân với decay hiện tại sử dụng đối tượng Ajax.Updater.

decay
Number
instance
Giữ mức độ decay hiện tại khi xử lý lại tác vụ.

updater
Ajax.Updater
instance
Đối tượng Ajax.Updater được sử dụng gần đây nhất

timer
Object
instance
Timer của JavaScript được sử dụng để báo cáo đối tượng khi đã đến thời gian cho lần làm tươi kế tiếp.

Loại

Phương thức
Các tham số
Mô tả

start()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng đó khi bắt đầu thực hiện những tác vụ có tính chu kỳ.

stop()
instance
(none)
Làm đối tượng dừng thực hiện các tác vụ chu kỳ của nó. Sau khi dừng lại, đối tượng sẽ gọi callback được xác định trong lựa chọn onComplete (nếu có).

updateComplete()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi đối tượng Ajax.Updater được sử dụng gần đây, sau khi nó đã hoàn tất yêu cầu. Nó được dùng để sắp xếp cho lần làm tươi kế tiếp.

onTimerEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi từ bên trong khi đã đến thời gian cho lần cập nhật kết tiếp.

toc

Đối tượng Element

Đối tượng này cung cấp những hàm tiện ích để chỉnh sửa các phần tử trong DOM.

Phương thức
Loại
Các tham số
Mô tả

addClassName(element,className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Thêm tên của lớp được cho vào tên của lớp phần tử.

classNames(element)
instance
element:đối tượng phần tử hoặc id
Trả về đối tượng Element.ClassNames biểu diễn tên của lớp CSS có liên quan đến phần tử được cho.

cleanWhitespace(element)
instance
element: đối tượng phần tử hoặc id
Xóa những khoảng trắng giữa 2 nút con của phần tử

empty(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị Boolean xách định xem nếu thẻ của phần tử có rỗng hay không (hoặc chỉ có khoảng trắng)

getDimensions(element)
instance
element: đối tượng phần tử hoặc id
Trả về kích thước của phần tử.Giá trị trả về là một đối tượng với 2 thuộc tính: height và width.

getHeight(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị offsetHeight của phần tử

getStyle(element, cssProperty)
instance
element: đối tượng phần tử hoặc id, tên cssProperty của một thuộc tính CSS (dạng 'prop-name' hay 'propName' đều hoạt động).
Trả về giá trị của thuộc tính CSS trong phần tử được cho hoặc null nếu không có.

hasClassName(element, className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Trả về true nếu phần tử có tên lớp được cho là một trong những tên lớp của nó.

hide(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Giấu các phần tử bằng cách đặt giá trị style.display là 'none'.

makeClipping(element)
instance
element: đối tượng phần tử hoặc id

makePositioned(element)
instance
element: đối tượng phần tử hoặc id
Thay đổi style.position của phần tử thành 'relative'

remove(element)
instance
element: đối tượng phần tử hoặc id
Xóa phần tử ra khỏi văn bản.

removeClassName(element, className)
instance
element: đối tượng phần tử hoặc id, className: tên của lớp CSS
Xóa tên lớp được cho trong các tên lớp của phần tử.

scrollTo(element)
instance
element: đối tượng phần tử hoặc id
Cuộn cửa sổ đến vị trí của phần tử.

setStyle(element, cssPropertyHash)
instance
element: đối tượng phần tử hoặc id, cssPropertyHash: đối tượng Hash với các type(style) được áp dụng.
Đặt giá trị của các thuộc tính CSS vào đối tượng được cho tùy thuộc vào các giá trị trong tham số cssPropertyHash.

show(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Thể hiện mỗi phần tử bằng cách đặt lại style.display thành ''.

toggle(elem1 [, elem2 [, elem3 [...]]])
instance
elemN: đối tượng phần tử hoặc id
Bật khả năng khả hiện của mỗi phần tử.

undoClipping(element)
instance
element: đối tượng phần tử hoặc id

undoPositioned(element)
instance
element: đối tượng phần tử hoặc id
Đặt style.position của phần tử thành ''</SPANCLASS="CODE">

update(element,html)
instance
element: đối tượng phần tử hoặc id, html: nội dung html
Thay thế html bên trong (inner html) của phần tử với tham số html được cho. Nếu html được cho có chứa khối <script> nó sẽ không được thêm vào nhưng sẽ được định giá trị.

visible(element)
instance
element: đối tượng phần tử hoặc id
Trả về một giá trị Boolean xác định xem phần tử có hiện thị hay không.

toc

Lớp Element.ClassNames

Kết thừa từ Enumerable

Biểu diễn tập hợp tên các lớp CSS có liên quan đến một phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element)
constructor
element:bất kỳ đối tượng phần tử hoặc id DOM nào
Tạo một đối tượng Element.ClassNames biểu diễn tên lớp CSS của phần tử được cho.

add(className)
instance
className: tên lớp CSS
Thêm tên lớp CSS được cho vào danh sách tên lớp liên quan đến phần tử.

remove(className)
instance
className: tên lớp CSS
Xóa tên lớp CSS được cho ra khỏi danh sách tên lớp liên quan đến phần tử.

set(className)
instance
className: tên lớp CSS
Gắn phần tử với tên lớp CSS được cho, xóa những tên lớp khác ra khỏ phần tử này.

toc

Đối tượng Abstract

Đối tượng này đóng vai trò gốc rễ cho các lớp khác trong thư viện. Nó không có các thuộc tính hay phương thức nào. Các lớp được định nghĩa trong đối tượng này cũng được xem như là các lớp trừu tượng (abstract class)truyền thống.

toc

Lớp Abstract.Insertion

Lớp này được sử dụng như một lớp nền tảng cho các lớp khác, mà các lớp này sẽ cung cấp tính năng thêm nội dung động. Lớp này được sử dụng như một lớp trừu tượng.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm
Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

contentFromAnonymousTable()
instance
(none)

Thuộc tính
type
Loại
Mô tả

adjacency
String
static, parameter
Tham số mà sẽ xác định đâu sẽ là nơi nội dung được đặt có liên quan với phần tử được cho. Các giá trị có thể là: 'beforeBegin','afterBegin', 'beforeEnd', và 'afterEnd'.

element
Object
instance
Đối tượng phần tử liên quan với việc thêm vào.

content
String
instance
HTML sẽ được thêm vào.

toc

Đối tượng Insertion

toc

Lớp Insertion.Before

Kế thừa từ Abstract.Insertion

Thêm HTML vào trước một phần tử.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, content)
constructor
element: đối tượng phần tử hoặc id, content: HTML sẽ được thêm vào
Kế thừa từ Abstract.Insertion. Tạo một đối tượng giúp đỡ cho việc thêm nội dung động.

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Before('person', 'Chief '); </script>

Sẽ chuyển HTML thành

<br>Hello, Chief <span id="person" style="color:red;">Wiggum. How's it going?</span>

toc

Lớp Insertion.Top

Kế thừa từ Abstract.Insertion

Thêm HTML như một phần con đầu tiên dưới phần tử. Nội dung sẽ được đặt ngay sau thẻ mở của phần tử.

Phương thức
Loại
Các tham số
Mô tả

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Top('person', 'Mr. '); </script>

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Mr. Wiggum. How's it going?</span>

toc

Lớp Insertion.Bottom

Kế thừa từ Abstract.Insertion

Thêm HTML như một phần con cuối cùng dưới phần tử. Nội dung sẽ được đặt ngay sau thẻ mở của phần tử.

Phương thức
Loại
Các tham số
Mô tả

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.Bottom('person', " What's up?"); </script>

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going? What's up?</span>

toc

Lớp Insertion.After

Kế thừa từ Abstract.Insertion

Thêm HTML vào ngay sau thẻ đóng của phần tử.

Phương thức
Loại
Các tham số
Mô tả

Mã lệnh sau đây

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span>

<script> new Insertion.After('person', ' Are you there?'); </script>

Sẽ chuyển HTML thành

<br>Hello, <span id="person" style="color:red;">Wiggum. How's it going?</span> Are you there?

toc

Đối tượng Field

Đối tượng này cung cấp một số hàm tiện ích để làm việc với trường nhập liệu trong form.

Phương thức
Loại
Các tham số
Mô tả

clear(field1 [, field2[,field3[...]]])
instance
fieldN: phần tử đối tượng trường hoặc id
Xóa giá trị được truyền vào phần tử trường.

present(field1 [, field2 [, field3 [...]]])
instance
fieldN: phần tử đối tượng trường hoặc id
Trả về true chỉ khi tất cả các trường của form có chứa giá trị rỗng.

focus(field)
instance
field: phần tử đối tượng trường hoặc id
Chuyển tiêu điểm vào trường của form được cho.

select(field)
instance
field: phần tử đối tượng trường hoặc id
Chọn lựa giá trị trong các trường mà hỗ trợ chọn chữ.

activate(field)
instance
field: phần tử đối tượng trường hoặc id
Di chuyển tiêu điểm và chọn giá trị trong các trường mà hỗ trợ chọn chữ.

toc

Đối tượng Form

Đối tượng này hỗ trở một số hàm tiện ích để làm việc với các form dữ liệu và các trường nhập liệu của nó.

Phương thức
Loại
Các tham số
Mô tả

serialize(form)
instance
form: đối tượng phần tử form hoặc id
Trả về một danh sách có định dạng url, bao gồm các tên trường, và giá trị của nó. Như 'field1=value1&field2=value2&field3=value3'

findFirstElement(form)
instance
form: i tượng phần tử form hoặc id
Trả về phần tử trường đầu tiên có hiệu lực trong form.

getElements(form)
instance
form: i tượng phần tử form hoặc id
Trả về một Array có chứa toàn bộ các trường nhập liệu trong form.

getInputs(form [, typeName [, name]])
instance
form: fi tượng phần tử form hoặc id, typeName: kiểu của phần tử nhập (input element),name: tên của phần tử nhập.
Trả về một Array chứa tất cả các phần tử <nhập> trong form. Tùy chọn thì danh sách có thể được lọc bởi thuộc tính type hoặc name của các phần tử.

disable(form)
instance
form:đối tượng phần tử form hoặc id
Làm mất hiệu lực tất cả các trường nhập liệu trong form.

enable(form)
instance
form:đối tượng phần tử form hoặc id
Làm hiệu lực tất cả các trường nhập liệu trong form.

focusFirstElement(form)
instance
form:đối tượng phần tử form hoặc id
Lấy tiêu điểm vào trường nhập liệu có hiệu lực thứ nhất trong form.

reset(form)
instance
form: đối tượng phần tử form hoặc id
Xóa toàn bộ form. Giống với gọi phương thức reset() của đối tượng form.

toc

Đối tượng Form.Element

Đối tượng này cung cấp một số hàm tiện ích để làm việc với các phần tử của form (thấy được hay không thấy được).

Phương thức
Loại
Các tham số
Mô tả

serialize(element)
instance
element: đối tượng phần tử hoặc id
Trả về cặp name=value của phần tử, như 'elementName=elementValue'

getValue(element)
instance
element: đối tượng phần tử hoặc id
Trả về giá trị của phần tử.

toc

Đối tượng Form.Element.Serializers

Đối tượng này cung cấp một số hàm tiện ích được sử dụng phía bên trong thư viện để giúp đỡ việc lấy giá trị hiện tại của các phần tử form.

Phương thức
Loại
Các tham số
Mô tả

inputSelector(element)
instance
element: đối tượng hoặc id phần tử form thuộc tính checked, như nút radio hay checkbox.
Trả về một Array với tên và giá trị của phần tử, như ['elementName', 'elementValue']

textarea(element)
instance
element: đối tượng hoặc id của một phần tử form có thuộc tính value value, như textbox, button hoặc trường password.
Trả về một Array với với tên và giá trị của phần tử ['elementName', 'elementValue']

select(element)
instance
element: đối tượng của một phần tử <select>
Trả về một Array với tên phần tử và tất cả các giá trị lựa chọn hoặc text, ['elementName', 'selOpt1 selOpt4 selOpt9']

toc

Lớp Abstract.TimedObserver

Lớp này được dùng như lớp nền tảng cho các lớp khác, để theo dõi một phần tử cho đến khi giá trị (hoặc bất cứ thuộc tính trong lớp con định nghĩa) của nó thay đổi. Lớp này được sử dụng như một lớp trừu tượng.

Các lớp con sẽ được xem tạo ra để theo dõi các thứ như giá trị nhập của một phần tử, hoặc một trong các thuộc tính kiểu (style property), hoặc số lượng dòng trong một bảng, hoặc bất cứ gì bạn muốn theo dõi.

Các lớp con sẽ khởi tạo phương thức nào để xác định xem giá trị hiện tại của phần tử được theo dõi là gì.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, frequency, callback)
constructor
element: đối tượng phần tử hoặc id, frequency: chu kỳ (s), callback: hàm được gọi khi phần tử thay đổi.
Tạo một đối tượng để theo dõi phần tử.

registerCallback()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để bắt đầu theo dõi phần tử.

onTimerEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng một cách định kỳ để kiểm tra phần tử.

Thuộc tính
Kiểu
Mô tả

element
Object
Đối tượng phần tử được theo dõi.

frequency
Number
Đây là chu kỳ (s) giữa các lần kiểm tra.

callback
Function(Object, String)
Hàm được gọi khi phần tử thay đổi. Nó sẽ nhận đối tượng phần tử và giá trị mới.

lastValue
String
Giá trị cuối cùng được xác nhận trong phần tử.

toc

Lớp Form.Element.Observer

Kế thừa từ Abstract.TimedObserver

Khởi tạo của một lớp Abstract.TimedObserver để theo dõi các phần tử giá trị nhập form. Sử dụng lớp này khi bạn muốn theo dõi một phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạ n có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, frequency, callback)
constructor
element: đối tượng phần tử hoặc id, frequency: chu kỳ (s), callback: hàm được gọi khi phần tử thay đổi
Kế thừa từ Abstract.TimedObserver. Tạo đối tượng để theo dõi thuộc tính value của phần tử.

getValue()
instance
(none)
Trả về giá trị của phần tử.

toc

Lớp Form.Observer

Kế thừa từ Abstract.TimedObserver

Khởi tạo của một lớp Abstract.TimedObserver để theo dõi bất cứ thay đổi dữ liệu này của phầt tử trong form. Sử dụng lớp này khi bạn muốn theo dõi một phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạ n có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](form, frequency, callback)
constructor
form: form object or id, frequency: chu kỳ, callback: hàm được gọi khi dữ liệu của phần tử trong form bị thay đổi.
Kế thừa từ Abstract.TimedObserver. Tạo một đối tượng để theo dõi sự thay đổi của form.

getValue()
instance
(none)
Trả về sự tuần tự hóa (serialization) của toàn bộ dữ liệu form.

toc

Lớp Abstract.EventObserver

Lớp này được sử dụng như một lớp nền tảng cho các lớp khác, mà được dùng để kích hoạt hàm callback bất cứ khi nào sự kiện thay đổi giá trị xảy ra đối với một phần tử.

Nhiều đối tượng của kiểu Abstract.EventObserver có thể được gắn với cùng một phần tử, mà không phải xóa đối tượng kia. Hàm callback sẽ được thực thi theo thứ tự mà chúng được gán vào phần tử.

Sự kiện khởi tạo (triggering event) là onclick cho nút radio ,các checkbox, và onchange cho các textbox. Và tổng quá thì cho hộp danh sách(listbox) / hộp thả xuống (dropdown).

Lớp con sẽ khởi tạo phương thức này để xác định giá trị nào của phần tử sẽ được theo dõi.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, callback)
constructor
element: đối tượng phần tử hoặc id, callback: function to be called when the event happens
Tạo đối tượng sẽ theo dõi phần tử.

registerCallback()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để gắn chính nó với sự kiện của phần tử.

registerFormCallbacks()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó được gọi bởi chính đối tượng để gắn nó với những sự kiện của các phần tử dữ liệu trong form.

onElementEvent()
instance
(none)
Phương thức này thường không được gọi từ bên ngoài. Nó sẽ gắn với sự kiện của phần tử.

Thuộc tính
Kiểu
Mô tả

element
Object
Đối tượng phần tử đang được theo dõi.

callback
Function(Object, String)
Hàm được gọi khi phần tử thay đổi. Nó sẽ nhận đối tượng phần tử và giá trị mới.

lastValue
String
Giá trị cuối cùng được xác nhận trong phần tử.

toc

Lớp Form.Element.EventObserver

Kế thừa từ Abstract.EventObserver

Khởi tạo của Abstract.EventObserver sẽ thực thi hàm callback với sự kiện tương tứng của phần tử dữ liệu của form, để phát hiện sự thay đổi giá trị trong phần tử. Nếu phần tử không có bất cứ sự kiện nào có thay đổi, bạn có thể dùng lớp Form.Element.Observer.

Phương thức
Loại
Các tham số
Mô tả

[ctor](element, callback)
constructor
element: đối tượng phần tử hoặc id, callback: hàm được gọi khi sự kiện xảy ra
Kế thừa từ Abstract.EventObserver. Tạo ra một đối tượng để theo dõi thuộc tính value của phần tử.

getValue()
instance
(none)
Trả về giá trị của phần tử

toc

Lớp Form.EventObserver

Kế thừa từ Abstract.EventObserver

Khởi tạo của một lớp Abstract.EventObserver để theo dõi bất cứ thay đổi dữ liệu này của phần tử trong form, sử dụng sự kiện của phần tử để phát hiện sự thay đổi. Nếu form có chứa những phần tử mà không phơi bày ra sự kiện mà báo cáo giá trị thay đổi. Trong trường hợp đó bạn có thể dùng lớp Form.Element.EventObserver.

Phương thức
Loại
Các tham số
Mô tả

[ctor](form, callback)
constructor
form: form object or id, callback: Hàm được gọi khi phần tử dữ liệu trong form thay đổi
Kế thừa từ Abstract.EventObserver. Tạo một đối tượng để theo dõi sự thay đổi của form.

getValue()
instance
(none)
Trả về sự tuần tự hóa (serialization) của toàn bộ dữ liệu của form.

toc

Đối tượng Position (tài liệu dự bị)

Đối tượng này cung cấp một loạt các hàm giúp bạn khi làm việc với vị trí của phần tử.

Phương thức
Loại
Các tham số
Mô tả

prepare()
instance
(none)
Điều chỉnh thuộc tính deltaX và deltaY để phù hợp với thay đổitrong vị trí cuộn. Nhớ gọi phương thức này trước khi gọi tới đối tượng withinIncludingScrolloffset sau khi trang đã cuộn.

realOffset(element)
instance
element:đối tượng
Trả về một Array với vị trí cuộn chính xác của phần tử,bao gồm bất cứ vị trí cuộn nào làm ảnh hưởng đến phần tử. Mảng kết quả tương tự như [total_scroll_left, total_scroll_top]

cumulativeOffset(element)
instance
element:đối tượng
Trả về một Array với vị trí chính xác của phần tử, bao gồm bất cứ vị trí nào bị ảnh hưởng bởi các phần tử mẹ. Mảng kết quả tương tự như [total_offset_left, total_offset_top]

within(element, x,y)
instance
element: đối tượng, x and y: tọa độ của điểm
Kiểm tra xem tọa độ được cho có nằm trong vùng chữ nhật của phần tử được cho không.

withinIncludingScrolloffsets(element, x, y)
instance
element: đối tượng, x and y: tọa độ của điểm

overlap(mode,element)
instance
mode:'vertical' hoặc 'horizontal', element: đối tượng
within() cần được gọi trước khi gọi phương thức này. Phương thức này sẽ trả về một số thập phân ở giữa 0.0 và 1.0 biểu diễn một phân số của tọa độ mà chồng lên phần tử. Như ví dụ, nếu phần tử là một hình vuông DIV với cạnh 100px và có vị trí ở (300,300), sau đó within(divSquare, 330, 330); overlap('vertical', divSquare); sẽ trả về 0.70, có nghĩ rằng điểm này đang ở vị trí 70% (100px - 30px = 70px) tính từ cạnh dưới của DIV. Các dễ nhất để hiểu rõ là hãy nghĩ cặp tọa độ được cho như là góc phía trên bên trái (top-left corner) của một hình chữa nhật khác, đè lên cái đầu tiên. Con số sẽ là phần trăm của chiều rộng hoặc chiều dài mà bị đè lên (giả sử rằng hình chữ nhật thứ 2 đủ rộng).

clone(source, target)
instance
source: đối tượng phần tử hoặc id, target: đối tượng phần tử hoặc id
Điều chỉnh lại kích thước, hoặc vị trí của phần tử target mà giống với phần tử source.

Nguồn:

http://cntt.tv/system/repos/prototype.js.vi/prototype.js.vi.html

Tác giả Sergio Pereira

Được dịch bởi Giang Trần

Đọc tiếp...

Tuesday, June 2, 2009

Sự khác biệt giữa Static AOP và Dynamic AOP

Nếu bạn chưa có kiến thức về Aspect oriented programming hãy tham khảo những kiến thức cơ bản về AOP trong bài viết dưới đây:

AOP là một cài đặt bổ sung cho Object oriented programming,(nó chưa thật hoàn chỉnh). Nói một cách khác, với AOP bạn có thể thực thi một đoạn mã (được gọi là advice trong thuật ngữ của AOP) ở một điểm được định nghĩa trước (được gọi là joinpont) trong quá trinh thực thi ứng dụng của bạn.

Một ví dụ với joinpont có thể được thực thi một phương thức. Bạn có thể gom nhóm một tập hợp các lời gọi phương thức trong một gói riêng biệt (vì thế đây là một ví dụ về pontcut, nhón các joinponts được gọi là pointcut).

Sự kết hợp các advice (các đoạn mã mà sẽ chạy trên một joinponts) và pointcuts được gọi là aspect. (aspect =advice +pointcuts)

Để giúp bạn hiểu rõ hơn. Bây giờ, bạn biết rằng với aop bạn có thể lựa chọn những phương thức (pointcuts) và sau đó cấu hình một lớp Logging để gọi (advice) trước và sau mỗi phương thức trong ứng dụng. Vì thế bạn không cần gọi những phương thức này và thay đổi chúng theo thời gian, hãy làm điều này với AOP. Điều thú vị ở đây là những đoạn mã này không nằm trong code mà liên quan tới business của ứng dụng.

Thuật ngữ weaving tham khảo tới tiến trình chèn các aspects vào trong đoạn mã của ứng dụng tại những điểm phù hợp. sự khác biệt giữa Static hay Dynamic AOP xảy ra ở đây.

Với Static aop, tiến trình weaving xảy ra trong thời gian biên dịch, có nghĩa advices được chèn trực tiếp và bytecode của class được biên dịch.

Với Dynamic aop, tiến trình weaving xảy ra khá linh động, nó thi hành việc chèn các mã bytecode lúc runtime. Vì thế không có bất kỳ mã bytecodes liên quan đến aop trong mã nguồn được biên dịch. Tôi nhắc lại là chúng được chèn vào trong thời gian chạy.

Static aop cho tốc độ tốc hơn, đơn giản vì nó không phải tốn công cho việc xử lý lúc runtime. Ở bên kia, dynamic aop thì linh động bởi vì bạn không cần biên dịch lại mã của bạn khi aspects thay đổi.

Hãy tưởng tượng, một thư viện đã có sẵn, được cung cấp bởi bên thứ 3 chẳng hạn, static aop là điều không thể (trừ khi dowload source và...build lại -hay đơn giản hơn làm một class wrapper)

Thực tế, static aop không phải sẽ đem đến một hiệu quả vượt trội, trong khi đó nó trở nên trơ cứng khi phát triển ứng dụng, đôi khi aop bị ràng buộc chặt vào ứng dụng và tính sử dụng lại bị mất đi đáng kể, mặt khác chúng ta sẽ bị trở ngại về vấn đề biên dịch.

examples:

public class Car {

private String color;

public String getColor() {

return color;

}

public void setColor(String color) {

this.color = color;

}

public class CarDriver {

public static void main(String args[]) {

Car mycar = new Car();

mycar.setColor(”blue”);

}

public aspect CarAspect {

pointcut setColorCall(): call(public void Car.setColor(String));

before(): setColorCall() {

System.out.println(”The car color has changed!”);

}

ajc CarAspect.aj CarDriver.java Car.java

Theo ý kiến cá nhân của tôi, trừ phi một class bị đặt yêu cầu khắt khe về tốc độ, nếu không hãy chọn dynamic aop.

Bạn có thể tham khảo thêm những bài giới thiệu và tutorial cơ bản với 2 liên kết dưới đây :

Static aop : với AspectJ : http://javatouch.googlepages.com/aspectjtutorial

Dynamic aop: với Spring framework : http://javatouch.googlepages.com/springaop-helloworld

Dựa trên bài viết của

Kaan Yamanyar

Đọc tiếp...

Sunday, May 31, 2009

Bàn về AJAX

Ajax đã có từ rất lâu, nếu nhắc lại nữa có chăng cũng chỉ là một câu chuyện cũ được xào nấu lại, đến bây giờ ajax đã là không thể thiếu cho các ứng dụng web, thế nhưng đôi khi có vẻ như chúng ta đã lạm dụng nó một cách quá mức. Bài này trích dẫn một bài viết về Ajax. Có lẽ bài viết này thích hợp hơn với nhà quản lý (teachnical lead, cấp team leader hay PM ở công ty phần mềm nhỏ), tuy nhiên hãy bỏ chút thời gian đọc nó.

10 điều các chuyên gia CNTT cần biết về Ajax

Bất kỳ một công nghệ Web mới nào cũng sẽ đều ảnh hưởng tới một cơ sở hạ tầng của mạng theo nhiều góc độ khác nhau từ những việc không quan trọng đến làm choáng váng cả thế giới. Ajax là một trong các công nghệ mới đang được sử dụng nhiều trên các mạng ngày nay. Để giúp các bạn có thể tối thiểu hóa những ngạc nhiên về mạng của mình, chúng tôi phác thảo ra 10 vấn đề cần biết về Ajax.

1) Ajax là một ý tưởng, không phải là cụm từ

Ajax tuy đã được giải thích rõ ràng là viết tắt của cụm từ Asynchronous JavaScript and XML nhưng tên đầy đủ này vẫn không hoàn toàn thích hợp vì nó đơn giản hóa quá mức lịch sử của công nghệ cũng như những tùy chọn bổ sung nằm trong chính bản thân nó. Chính xác hơn, Ajax bao gồm ý tưởng trong đó các ứng dụng web có thể được xây dựng để chọn trong số vòng lặp “post-wait-repeat” được sử dụng trong các ứng dụng Web trình chủ. Ajax cho phép các ứng dụng web chuyển một cách liên tục và mềm dẻo hơn, nhưng việc update lại tăng lên. Nó cung cấp cho người dùng một phương pháp phong phú và khả năng tương tác tốt hơn với những gì nằm bên dưới ứng dụng Web. Để được thành phần này thì các chuyên gia về mạng càng phải thực hiện nhiều công việc trong kiểm tra và giám sát bảo mật cần thiết cũng như khả năng tiềm ẩn sự biến đổi của mạng và máy chủ.

2) Thực sự tất cả theo JavaScript

Các ứng dụng Ajax được viết theo ngôn ngữ JavaScript và thường dựa vào đối tượng XMLHttpRequest để thực hiện việc truyền thông, cách làm này sẽ tạo ra đường đi của nó thông qua việc xử lý World Wide Web. Cũng giống như các công nghệ Web khác, công nghệ Ajax lúc này cũng chỉ là một chuẩn công nghệ đặc biệt, những điểm khác nhau nổi bật có thể phát hiện thấy trong các bổ sung vào các trình duyệt khác nhau của nó. Ajax có thể sử dụng các cơ chế truyền tải dữ liệu khác – có hoặc không có sự hỗ trợ rộng rãi trong CNTT – với các ứng dụng Ajax, như frame truyền thống và các phương pháp image-cookie cũng như sử dụng các cầu binary để liên kết với Flash hoặc Java

Không quan tâm đến phương pháp truyền tải được sử dụng bởi các chuyên gia phát triển, Ajax đã làm cho JavaScript trở nên quan trọng hơn bên trong một ứng dụng web so với những gì nó làm được trước đây. JavaScript lúc này hiện nắm giữ vai trò sưu tập các dữ liệu quan trọng, truyền thông và hoạt động, chính vì vậy nó có thể được coi như một công nghệ web lớp thứ hai không có các tác động nghiêm trọng.

Các chuyên gia phát triển phần mềm cho rằng công nghệ JavaScript mang tính độc và muốn né tránh ngôn ngữ này bằng một công cụ hoặc framework tạo nó từ một ngôn ngữ khác như Java (Google Web Toolkit là một ví dụ), hoặc dấu các thành phần code ẩn hoặc các tag (như với .Net hoặc Ruby). Mặc dù vậy JavaScript vẫn là một ứng dụng. Việc tìm hiểu ứng ngôn ngữ này và nắm được nó một cách trực tiếp sẽ giúp bạn rất nhiều vì nếu muốn sử dụng Ajax thì bạn sẽ sử dụng đến rất nhiều JavaScript.

3) Không cần đến XML

Mặc dù có chữ “X” trong nhóm từ của Ajax nhưng thực sự nó không cần đến XML. Đối tượng XMLHttpRequest có thể truyền tải bất kỳ một định dạng văn bản nào. Với nhiều chuyên gia phát triển phần mềm Ajax, ký hiệu đối tượng JavaScript (JavaScript Object Notation) hoặc thậm chí các đoạn mã JavaScript thô cũng tạo ra nhiều ý nghĩa như một định dạng dữ liệu, cho rằng JavaScript là môi trường chi phối. Với đầu vào trực tiếp trong các tài liệu, các chuyên gia phát triển phần mềm khác có thể sử dụng văn bản thô hoặc các đoạn HTML. Vẫn còn một số thành phần khác sử dụng các định dạng dữ liệu như vậy như ngôn ngữ markup YAML ít được biết đến.

Rõ ràng hoàn toàn có thể và hợp lý để sử dụng XML, nhưng Ajax vẫn không yêu cầu bắt buộc. Sử dụng các định dạng nhị phân cho việc upload các file vẫn không được hỗ trợ bởi đối tượng XMLHttpRequest, nhưng nên cần biết rằng Flash sử dụng một định dạng nhị phân được gọi là Action Message Format, chính vì vậy các tính năng tương tự như vậy sẽ một sớm một chiều có trong các ứng dụng của Ajax. Bạn nên biết định dạng nào đang được sử dụng trên mạng vì nó không phải lúc nào cũng là XML, và cũng bảo đảm bạn có thể phân tích định dạng cho vấn đề hiệu suất và bảo mật.

4) Kế hoạch cho việc tăng các request HTTP

Vấn đề nổi cộm nhất đối với các quản trị mạng trong việc hỗ trợ các ứng dụng Ajax là mẫu lập trình kiến trúc đã thay đổi vấn đề sử dụng mạng của các ứng dụng web từ việc như xử lý khối, sự phản ứng không liên tục với hàng trăm KB đến sự thay đổi mang tính liên tục trong các đáp trả HTTP nhỏ hơn. Điều này có nghĩa rằng Web và các máy chủ ứng dụng có thể bận rộn hơn trước rất nhiều. Những gì Ajax sẽ thực hiện với mạng và máy chủ của bạn phụ thuộc vào cách ứng dụng được thiết kế như thế nào, hãy bảo đảm cho các chuyên gia phát triển ứng dụng hiểu được sự ảnh hưởng của các ứng dụng của họ với mạng như thế nào.

5) Tối ưu hóa các yêu cầu Ajax một cách thận trọng

Các ứng dụng web nên gắn với trong việc phân phối mạng đó là gửi ít dữ liệu. Tuy vậy điều này không có nghĩa rằng nguyên lý này cần phải tuân theo một cách rộng rãi bởi các chuyên gia phát triển phần mềm. Một ưu điểm cho mạng, việc nén HTTP cho các đáp trả của Ajax có thể giảm được kích thước và được hỗ trợ trong nhiều trình duyệt hiện đại. Tuy vậy vì overhead của file nén mang tính động nên tốc độ có thể không được cải thiện nhiều nếu các đáp trả tương đối nhỏ. Điều này có nghĩa rằng các quản trị viên mạng nên cho phép nén trên máy chủ Web, nhưng họ cần phải hiểu được rằng với các ứng dụng Ajax thì hiệu suất của việc này không lớn bằng các ứng dụng web trước kia.

Để gửi dữ liệu ít đi, chúng ta thường sẽ sử dụng đến vấn đề caching. Tuy vậy hầu hết các bổ sung của Ajax đều có thể là thù địch của caching với một giả định là các trình duyệt mà không liên quan đến các re-fetching URL trong cùng một session. Thay cho làm việc với caching thì nhiều chuyên gia phát triển Ajax lại thủ tiêu caching thông qua thiết lập header hoặc URL đơn nhất.

Hoàn toàn có thể nhắm đến các vấn đề caching với Ajax cache ở trình khách được viết bằng JavaScript, nhưng hầu hết các thư viện của Ajax lại không bổ sung tính năng như vậy. Các chuyên gia về mạng nên giới thiệu cho các nhà phát triển về lợi ích của caching vì Ajax có thể sẽ mang lại nhiều lợi ích từ vấn đề này hơn nén.

6) Thừa nhận về sự hạn chế two-connection

Các ứng dụng Ajax bị hạn chế bởi HTTP đối với hai kết nối đồng thời với cùng một URL. Đây chính là cách giao thức HTTP được thiết kế, không bị hạn chế. Tuy nhiên có nhiều chuyên gia phát triển phần mềm Ajax vẫn xa lầy vào một máy chủ một cách tình cờ dẫu cho Internet Explorer 8 của Microsoft được hỗ trợ để thực hiện vượt ra khỏi các hạn chế này. Một số ứng dụng không hay của Ajax có thể có vấn đề và với các trình duyệt đang thay đổi, các quản trị mạng cần phải nắm bắt được số lượng các yêu cầu tạo ra và làm việc với các chuyên gia phát triển ứng dụng để tránh sử dụng các mẫu thiết kế như poll hoặc các kết nối trợ giúp dài.

7) Xem xét đến thứ tự xử lý

Với các ứng dụng web truyền thống, sự ảnh hưởng truyền thông TCP/IP (như việc thiếu thứ tự đáp trả HTTP nào sẽ được nhận) nhìn chung không được chú ý. Tài liệu HTML được nhận trước các đối tượng khác và sau đó nó sẽ kích hoạt yêu cầu. Bất kỳ một yêu cầu xảy ra sau đều kích hoạt một tài liệu mới hoàn toàn, do đó vẫn bảo đảm được thứ tự. Tuy nhiên Ajax lại không hề sử dụng đến việc phân định thứ tự như vậy chính vì vậy sự phụ thuộc của một ứng dụng theo đúng thứ tự cần đến một hàng đợi xử lý. Ajax framework cũng không nhất quán thừa nhận mối quan tâm này. Chính vì vậy cần phải bảo đảm cho các chuyên gia phát triển ứng dụng Ajax hiểu được vấn đề này.

Thừa nhận sự ảnh hưởng của việc loại trừ sửa lỗi “Layer 8″

Một vài năm trở lại đây, người dùng đã khắc phục chất lượng trong việc phân phối Web bằng cách reloading các trang hoặc nhất nút Back. Đơn giản, người dùng thực hiện như vậy để giúp giảm các vấn đề về mạng vì lỗi thường xuất hiện tại các thời điểm giữa các page paint. Tuy vậy với Ajax, lỗi ứng dụng lại không hiển nhiên như vậy. Người dùng thường bị báo sai về các lỗi vì vòng quay GIF động cung cấp quá ít thông tin về trạng thái đúng của yêu cầu.

Các chuyên gia phát triển phần mềm là những người thiệt nhiều nhất vì nhiều thư viện không có hiệu quả trong việc thừa nhận các timeouts đó xảy ra, những lần retry phải xuất hiện, máy chủ và các lỗi dữ liệu ngày càng nhiều. Các chuẩn đoán JavaScript hiển thị việc truyền thông và các lỗi mã ít khi đúng trên phía trình khách, chính vì vậy mà người dùng thường không hay biết. Do đó cần phải có nhiều kiểm tra mức ứng dụng được yêu cầu cho các quản trị viên để hỗ trợ Ajax một cách hợp lý.

9) Những mối đe dọa về bảo mật cũ lại xuất hiện lần thứ hai

Nếu bạn lắng nghe các chuyên gia, thì Ajax có thể gây tăng thêm bề mặt tấn công nhưng quả thực nó không kém an toàn hơn các môi trường phát triển ứng dụng web truyền thống nào vì các đầu vào HTTP đến trình chủ tin cậy đều có cùng các header, chuỗi truy vấn và body văn bản. Tuy nhiên nếu mã trình khách được tin tưởng hoàn toàn và nhập vào dữ liệu không được ngăn chặn trong nhóm phát triển web thì Ajax có thể gây ra những vấn đề về bảo mật tương tự như các ứng dụng web truyền thống.

Cross-site scripting (XSS) không phải là lỗ hổng mới trong Ajax; nó là một lỗi chung, đặc biệt nếu một ứng dụng nào đó cho phép dữ liệu trạng thái được điều chỉnh với JavaScript. Đầu vào HTML cần được không cho phép trong hầu hết các trường hợp và HTTP Only Cookies nên được áp dụng ngay lập tức để giảm việc tấn công cookie và các tấn công khác thông qua XSS.

Cũng vậy Cross Site Request Forgery cũng không phải là một lỗi mới của Ajax, nhưng nếu các chuyên gia phát triển ứng dụng của bạn không kiểm tra HTTP Referer (sic) header và quản lý session đúng cách bên trong các ứng dụng Ajax thì có thể để hổng vấn đề này.

Các Hacker, cũng giống như các chuyên gia phát triển phần mềm hiện đang rất quan tâm đến việc sử dụng và lạm dụng JavaScript, điều đó càng làm tăng thêm các lỗ hổng tiềm tàng. Các chuyên gia về mạng nên bảo đảm cho chuyên gia phần mềm biết được rằng mã trình khách có thể bị thay đổi, vì vậy các dữ liệu đầu vào luôn cần được lọc và xem xét.

10) Vấn đề về chính sách cùng gốc

Một mặt “positive” (mang tính ưu điểm) về bảo mật, các chính sách cùng gốc của JavaScript sẽ vẫn có hiệu lực trong ứng dụng Ajax sử dụng XMLHttpRequest. Chính sách này bảo đảm cho các kịch bản đó không liên kết với các miền bên ngoài. Từ quan điểm của các chuyên gia phát triển phần mềm, điều này có thể khá bực mình vì nó có nghĩa rằng các trang đó được đáp ứng, ví dụ là từ ajaxref.com lại không thể liên kết với URL được host trên www.ajaxref.com; thậm chí nếu nó nằm trên cùng một máy chủ thì cũng không cùng chính xác miền. DNS tương đương không có vấn đề ở đây; nó là một string-check được sử dụng bởi SOP.

SOP sẽ làm vướng khả năng của các chuyên gia phát triển trong việc thực hiện một số cố gắng cho dịch vụ Web trên phía trình khách. Rõ ràng phương pháp tốt nhất là sử dụng proxy trên máy chủ để đưa ra các yêu cầu đến máy chủ khác và kết hợp các kết quả. Tuy vậy, nhiều chuyên gia phát triển phần mềm Ajax lại cố gắng ngắt các hạn chế cùng gốc. Việc sử dụng <script> tag như phương tiện truyền tải thay cho đối tượng XMLHttpRequest cũng có thể gây ra những mối nguy hiển và điều đó dẫn có thể đến gốc gác của nhiều vấn đề có liên quan đến bảo mật của Ajax.

Những gì bạn mong đợi

Với Ajax, các tiện ích ứng dụng phong phú sẽ là một điều thú vị, nhưng nhiều vấn đề có thể làm cho nó bị đắm chìm. Nếu hứa hẹn của một ứng dụng Ajax phong phú được cung cấp trong một môi trường mạng rất yếu thì người dùng sẽ vỡ mộng với tính không ổn định của ứng dụng mà không cần quan tâm đến giao diện bắt mắt. Để cho phép có được chất lượng, các chuyên gia về mạng cần đào tạo chuyên gia phát triển phần mềm về các nền tảng bảo mật và nền tảng mạng, cung cấp một nền tảng vững chắc và được kiểm tra thường xuyên, có các chuẩn đoán trình khách về chức năng của JavaScript và hiệu suất mạng từ các người dùng tương ứng.

(theo QTM/ CIO)

Đọc tiếp...

Sun sẽ kinh doanh qua Java App Store

Sun Microsystems có kế hoạch tung ra “cửa hàng” ứng dụng Java App Store lớn hơn Apple App Store rất nhiều.

Hôm 18/5/2009, CEO Jonathan Schwartz cho biết, Sun hy vọng tăng doanh thu và kinh doanh qua Java App Store. Sun đang bị Oracle mua lại và Oracle tỏ ý rất quan tâm tới công nghệ Java của Sun.

Một App Store dựa trên ngôn ngữ lập trình Java của Sun sẽ rất có tiềm năng vì có hàng triệu nhà phát triển phần mềm đã tạo ra nhiều ứng dụng với Java. Sun ước đoán, các ứng dụng phần mềm trên nền Java đã được sử dụng trên khoảng 4,5 tỷ máy tính, ĐTDĐ và nhiều thiết bị khác khiến Java trở thành một thị trường tiềm năng lớn. Ông Schwartz cho biết, App Store sẽ nhắm vào cộng đồng người dùng PC có chừng 1 tỷ người.

Để so sánh, App Store của Apple đã bán được hơn 1 tỷ lượt tải phần mềm về dù trên thị trường chỉ có khoảng 21 triệu chiếc iPhone. Tuy nhiên, Sun đang trong tình trạng khốn khó để bắt chước sự thành công của Apple.

Hồi năm 2005, Sun đồng ý phân phối thanh công cụ trình duyệt của Google với Java Runtime Environment (phần mềm cho phép chạy các ứng dụng Java trên Windows PC) và mang về cho Sun khá nhiều thu nhập. Sau đó, Sun đồng ý phân phối thanh công cụ MSN của Microsoft cho các bản JRE được phân phối tại Mỹ vì được trả giá cao hơn.

Sun tung Java ra vào giữa những năm 1990. Java là ngôn ngữ lập trình được Sun phát triển để Internet và các trình duyệt web mang tính tương tác hơn như chơi game trực tuyến, chat, xem ảnh 3D… Sun sẽ tiết lộ thêm nhiều chi tiết về Java App Store tại hội nghị JavaOne sẽ diễn ra từ ngày 2/6/2009 ở San Francisco (Mỹ).

(Theo PCWorld Vietnam)

Đọc tiếp...

Wednesday, June 3, 2009

Tài liệu dành cho nhà phát triển của prototype.js

Nội dung chính

Tài liệu này là gì?

Mục có liên quan

Các hàm tiện ích

Sử dụng hàm $()

Sử dụng hàm $$()

Sử dụng hàm $F()

Sử dụng hàm $A()

Sử dụng hàm $H()

Sử dụng hàm $R()

Sử dụng hàm Try.these()

Đối tượng Ajax

Mánh khóe với String

Thay thế Strings

Mẫu sẵn có của Strings

Sử dụng lớp Ajax.Request

Sử dụng lớp Ajax.Updater

"?" và □ là cái gì?

Enumerating... Wow! Damn! Wahoo!

Vòng lặp, theo type của Ruby

Vài điều về mảng

Tài liệu tra cứu cho prototype.js

Phần mở rộng cho các lớp JavaScript

Phần mở rộng cho lớp Object

Phần mở rộng cho lớp Number

Phần mở rộng cho lớp Function

Phần mở rộng cho lớp String

Phần mở rộng cho lớp Array

Phần mở rộng cho đối tượng DOMdocument

Phần mở rộng cho đối tượng Event

Các lớp và đối tượng mới được định nghĩa bởi prototype.js

Đối tượng PeriodicalExecuter

Đối tượng Prototype

Đối tượng Enumerable

Đối tượng Hash

Lớp ObjectRange

Đối tượng Class

Đối tượng Ajax

Đối tượng Ajax.Responders

Lớp Ajax.Base

Lớp Ajax.Request

Đối tượng tham số options

Lớp Ajax.Updater

Lớp Ajax.PeriodicalUpdater

Đối tượng Element

Lớp Element.ClassNames

Đối tượng Abstract

Lớp Abstract.Insertion

Đối tượng Insertion

Lớp Insertion.Before

Lớp Insertion.Top

Lớp Insertion.Bottom

Lớp Insertion.After

Đối tượng Field

Đối tượng Form

Đối tượng Form.Element

Đối tượng Form.Element.Serializers

Lớp Abstract.TimedObserver

Lớp Form.Element.Observer

Lớp Form.Observer

Lớp Abstract.EventObserver

Lớp Form.Element.EventObserver

Lớp Form.EventObserver

Đối tượng Position (tài liệu dự bị)

Tuesday, June 2, 2009

Sự khác biệt giữa Static AOP và Dynamic AOP

Sunday, May 31, 2009

Bàn về AJAX

1) Ajax là một ý tưởng, không phải là cụm từ

Sun sẽ kinh doanh qua Java App Store

About Me

Media cho mỗi ngày

Labels

Những bài đã viết

Chia sẻ logo

Chat Box

Truy cập

User