>>  Site Map >>  Forums >>  AJax - Java script

Forum module - topics in forum:


AJax - Java script - Thiết kế web huớng Server - Client side đang phát triển mạnh mẽ bởi tính nhanh chóng và cập nhật của nó, hiện đại phong cách 2.0, và các hướng dẫn sưu tầm mã javascript hay nhất

AJAX Toàn Tập cơ bản - nâng cao
Bài 0 : Qúa trình phát triển các công nghệ tong ứng dụng WEB.
Công nghệ Web thế hệ thứ hai – Web 2.0
Được xem là một cuộc cách mạng trên thế giới mạng, thế hệ web mới có những thay đổi quan trọng không chỉ ở nền tảng công nghệ mà còn cả ở cách thức sử dụng - hình thành nên môi trường cộng đồng, ở đó mọi người cùng tham gia đóng góp cho xã hội "ảo" chứ không chỉ "duyệt và xem".

Web 2.0 là gì? Làm sao phân biệt đâu là Web 1.0 đâu là Web 2.0? Thuật ngữ "Web 2.0" đang trở nên thịnh hành. Thực chất, Web 2.0 có nghĩa là sử dụng web đúng với bản chất và khả năng của nó.

Mục tiêu đầu tiên của những người tiên phong xây dựng Internet là nhằm kết nối các nhà nghiên cứu và các máy tính của họ với nhau để có thể chia sẻ thông tin hiệu quả. Khi bổ sung World Wide Web (năm 1990), Tim Berners-Lee cũng nhằm mục tiêu tạo phương tiện cho phép người dùng tự do đưa thông tin lên Internet và dễ dàng chia sẻ với mọi người (trình duyệt web đầu tiên do Berners-Lee viết bao gồm cả công cụ soạn thảo trang web). Tuy nhiên, sau đó web đã phát triển theo hướng hơi khác mục tiêu ban đầu.

Tuy có một số ngoại lệ nhưng thế giới Web 1.0 (thế hệ web trước Web 2.0) chủ yếu gồm các website "đóng" của các hãng thông tấn hay các công ty nhằm mục đích tiếp cận độc giả hay khách hàng hiệu quả hơn. Nó là phương tiện phát tin hơn là phương tiện chia sẻ thông tin. Chỉ đến gần đây, với sự xuất hiện của nhiều kỹ thuật mới như blog (hay weblog), wiki... web mới trở nên có tính cộng đồng (và cộng tác) hơn và trở nên gần hơn với sự kỳ vọng và khả năng thực sự của nó.

Khái niệm Web 2.0 đầu tiên được Dale Dougherty, phó chủ tịch của O’Reilly Media, đưa ra tại hội thảo Web 2.0 lần thứ nhất do O’Reilly Media và MediaLive International tổ chức vào tháng 10/2004. Dougherty không đưa ra định nghĩa mà chỉ dùng các ví dụ so sánh phân biệt Web 1.0 và Web 2.0: "DoubleClick là Web 1.0; Google AdSense là Web 2.0. Ofoto là Web 1.0; Flickr là Web 2.0. Britannica Online là Web 1.0; Wikipedia là Web 2.0. v.v...".

Sau đó Tim O’Reilly, chủ tịch kiêm giám đốc điều hành O’Reilly Media, đã đúc kết lại 7 đặc tính của Web 2.0:

1. Web có vai trò nền tảng, có thể chạy mọi ứng dụng
2. Tập hợp trí tuệ cộng đồng
3. Dữ liệu có vai trò then chốt
4. Phần mềm được cung cấp ở dạng dịch vụ web và được cập nhật không ngừng
5. Phát triển ứng dụng dễ dàng và nhanh chóng
6. Phần mềm có thể chạy trên nhiều thiết bị
7. Giao diện ứng dụng phong phú

Thoạt đầu, Web 2.0 được chú trọng tới yếu tố công nghệ, nhấn mạnh tới vai trò nền tảng ứng dụng. Nhưng đến hội thảo Web 2.0 lần 2 tổ chức vào tháng 10/2005, Web 2.0 được nhấn mạnh đến tính chất sâu xa hơn – yếu tố cộng đồng.


Bài 1: Các thế mạnh của AJAX.
Bài 1: Các thế mạnh của AJAX.

Bài 2: Các công nghệ trong AJAX - CSS - Giới thiệu.

Từ bài này, chúng ta sẽ tìm hiểu các công nghệ trong AJAX và mối liên hệ giữa chúng.

AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. JavaScript có vai trò chất keo kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model, tạo và tổ chức biểu diễn dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím.

Cascading Style Sheets (CSS) cung cấp một sự nhất quán trên cảm quan “look and feel” cho ứng dụng và khả năng thao tác mạnh mẽ với DOM. Đối tượng XMLHttpRequest (hay một cơ chế tương đương nào đó) được dùng để liên lạc một cách bất đồng bộ với server, đảm bảo việc gửi yêu cầu người dùng và tái nạp dữ liệu trong khi người dùng vẫn làm việc.

-- Cascading Style Sheet – CSS
Phần này khá là dài, tớ sẽ viết cố gắng thật dễ hiểu.

Cascading Style Sheet – tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax. Một stylesheet đưa ra cách kiểm soát các loại định dạng trực quan, nó có thể được áp dụng cho các thành phần riêng lẻ trên các trang.

Hơn nữa, cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ.

Trong ứng dụng Web truyền thống, stylesheet cung cấp một cách hiệu quả để xác định cách thể hiện vị trí và có thể được dùng lại trong nhiều trang web khác nữa.Với AJAX, stylesheet cung cấp một “kho chứa” các giao diện xác định trước có thể áp dụng cho các phần tử động với độ dài các đoạn mã nguồn là nhỏ nhất.

CSS định dạng một trang web theo ba cách :

1. Sử dụng trực tiếp kèm với các thẻ HTML (Inline Style Sheet)
2. Định nghĩa trong một trang web (Internal Style Sheet).
3. Định nghĩa thành một file CSS riêng (External Style Sheet). Trang web của chúng ta sẽ tham chiếu đến file CSS này.

Một quy tắc định dạng và bố trí gồm có hai phần: thành phần lựa chọn - selector và phần khai báo - style declaration. Selector đặc tả các phần tử được định dạng và bố trí, và style declaration khai báo các thuộc tính định dạng sẽ được áp dụng. Giả sử muốn tạo ra các dòng text trong level-1 heading trong tài liệu (đó là đoạn nằm trong thẻ <H1>) có màu đỏ.
Có thể khai báo thuộc tính CSS như sau:

====
h1 {color: red}
====

Chúng ta cũng nên phân tích:
Các ưu điểm của CSS trong thiết kế web

a. CSS giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web.
Style trong phiên bản HTML 4.0 qui định cách thức thể hiện các thẻ. Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS.

b. CSS cho phép điều khiển cách định dạng và cách bố trí của cùng lúc nhiều trang web với chỉ duy nhất một lần thay đổi tại một vị trí.

c. Có thể định nghĩa nhiều style vào một thẻ HTML .
CSS cho phép đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong một trang web hoặc ở trong một file CSS bên ngoài.

d. Thứ tự áp dụng các định dạng
Như trên đã nói, có thể sử dụng nhiều cách khác nhau để làm CSS. Điều gì sẽ xảy ra nếu áp dụng nhiều cách định dạng cho một thẻ HTML? Theo một cách chung nhất ra có thể nói các style sẽ được "xếp tầng" (cascade). Việc xếp tầng này tuân theo thứ tự ưu tiên giảm dần như sau:

* Inline Style (Style được qui định trong một thẻ HTML cụ thể)
* Internal Style (Style được qui định trong phần <HEAD> của một trang HTML)
* External Style (style được qui định trong file CSS ngoài)
* Browser Default (thiết lập mặc định của trình duyệt)

Bài sau chúng ta sẽ đi vào: Cú pháp cơ bản của CSS.


Bài 3: Các công nghệ trong AJAX - CSS - Cú pháp & thuộc tính CSS S
Bài 3: Các công nghệ trong AJAX - CSS - Cú pháp & thuộc tính CSS Style
Cú pháp cơ bản của CSS
Cú pháp của CSS gồm ba thành phấn:

* Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
* Thuộc tính (Property)
* Giá trị (Value)

Thể hiện của cú pháp CSS
Quote: :
Selector {
Property1: Value1;
Property2: Value2;
}


Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử.
Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web.

a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng)
Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>.

Quote: :
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>


b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web)
Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.
Quote: :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>


c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS.
Quote: :
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>


---Các thuộc tính của CSS Style
Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph:
Quote: :
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}


Sách về CSS:
*http://www.xpressionsz.com/archives/1580
*http://www.xpressionsz.com/archives/4146
*http://www.xpressionsz.com/archives/3531
*http://www.xpressionsz.com/archives/1507
*http://www.xpressionsz.com/archives/4074
...
Anh em req cuốn gì có thể nhờ mọi người tìm giúp. Nhưng tớ nghĩ, tìm hiểu như trên là tạm đủ, nếu cần thì 1 trong những cuốn sách trên cũng có thể đáp ứng được.

Bài sau chúng ta sẽ cùng nhau tìm hiểu về DOM (Document Object Model )


Bài 4: Các công nghệ trong AJAX - DOM - Document Object Model.
Bài 4: Các công nghệ trong AJAX - DOM - Document Object Model.
---Document Object Model - DOM
Document Object Model (DOM) giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Đây là một khả năng đặc biệt hữu ích để viết một ứng dụng Ajax. Trong các ứng dụng web truyền thống, trình duyệt phải tái nạp các trang HTML theo một luồng từ server.

Trong một ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Các thẻ HTML trong trang web được tổ chức theo cấu trúc cây. Gốc của cây là thẻ <HTML>, để biểu diễn tài liệu. Trong đó thẻ <BODY> biểu diễn phần thân của tài liệu, là gốc của phần hiển thị của tài liệu. Trong thân của tài liệu, có các bảng, paragraph, list, và các loại thẻ khác với các thẻ ở mức thấp hơn nữa.

Một biểu diễn theo mô hình DOM của một trang web là một cấu trúc cây, có các phần tử là các nút, rồi nó chứa các nút con trong nó, và cứ tiếp tục một cách đệ qui như thế. JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM. Phần tử DOM đã được đặc tả bởi W3C. Mỗi phần tử DOM có một phần tử cha duy nhất, có hoặc không có các phần tử con, và có một số bất kỳ các thuộc tính, chúng được lưu trữ trong mảng móc nối.

Mối quan hệ giữa các phần tử DOM có thể được đối chiếu bởi danh sách các thành phần HTML. Mối quan hệ này là hai chiều. Sửa đổi mô hình DOM sẽ thay đổi cấu trúc HTML và dẫn đến thay đổi cách biểu diễn một trang web.

-- Làm việc với DOM bằng JavaScript.
Trong một ứng dụng bất kỳ, nếu muốn thay đổi giao diện người dùng khi họ đang làm việc, thì phải cung cấp các phản hồi lại khi người dùng gửi các yêu cầu.

Để hiểu rõ cơ chế làm việc với DOM bằng JavaScript, chúng ta cùng xét một ví dụ về một trang HTML đơn giản.
Quote: :
<html>
<head>
<link rel='stylesheet' type='text/css' href='hello.css' />
<script type='text/javascript' src='hello.js'></script>
</head>
<body>
<p id='hello'>hello</p>
<div id='empty'></div>
</body>


Ta đã thêm vào các tham chiếu đến các file hello.css (dùng Cascading Style Sheet) và một file chứa mã nguồnJavaScript là hello.js. Ở đây cũng đồng thời khai báo một thẻ <div> với một ID.

Còn đây là file hello.css chứa stylesheet để áp dụng cho các mục trong file HTML:
Quote: :
.declared{
color: red;
font-family: arial;
font-weight: normal;
font-size: 16px;
}
.programmed{
color: blue;
font-family: helvetica;
font-weight: bold;
font-size: 10px;
}


Chúng ta định nghĩa hai style, để mô tả gốc của các nút DOM (tên của các style là tùy chọn). Các style này không dược dùng trong file HTML, nhưng chúng sẽ được áp dụng qua file JavaScript.

Quote: :
window.onload=function(){
var hello=document.getElementById('hello');
hello.className='declared';
var empty=document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty,"Ajax in Action!");
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
children.className='programmed';
}
empty.style.border='solid green 2px';
empty.style.width="200px";
}
function addNode(el,text){
var childEl=document.createElement("div");
el.appendChild(childEl);
var txtNode=document.createTextNode(text);
childEl.appendChild(txtNode);
}


[i]Hàm window.onload() sẽ được gọi khi trang web được nạp. Tại thời điểm này, cấu trúc cây DOM sẽ được thiết lập.


Bài 5: Các công nghệ trong AJAX - DOM - Tìm kiếm & Tạo DOM Node.
Bài 5: Các công nghệ trong AJAX - DOM - Tìm kiếm & Tạo DOM Node.
--- Tìm kiếm một DOM Node
Yêu cầu đầu tiên để làm việc trên DOM với JavaScript là đi tìm kiếm một phần tử để thay đổi. Trước hết cần bắt đầu tham chiếu qua nút gốc - root node, nút này thể hiện qua biến toàn cục document.

Mỗi nút trong DOM là một nút con (hoặc nút con cấp hai, ba…) của document, nhưng cứ đi dần vào cây DOM, sẽ thấy một tài liệu phức tạp được biểu diễn bởi DOM, và việc tìm kiếm là rất khó khăn.

Vì thế có các cách sau để tìm kiếm một nút nhanh chóng hơn. Mỗi phần tử HTML có một thuộc tính ID, ví dụ như,
Quote: :

<p id='hello'>
hay

<div id='empty'></div>
Mỗi một nút DOM có thể có một ID gán cho nó, và ID này có thể được dùng để tham chiếu tới nút qua hàm :

var hello=document.getElementById('hello');


Trong một số trường hợp, cần duyệt qua cấu trúc cây từng bước một, mỗi nút DOM có một nút cha và nhiều nút con. Chúng có thể được truy cập bởi các thuộc tính parentNode và childNodes, thuộc tính parentNode trả về một đối tượng DOM node khác, trong khi childNodes trả về một mảng javascript:
Quote: :
var children=empty.childNodes;
for (var i=0;i<children.length;i++){
...
}


Một cách khác để tìm kiếm là dựa trên loại thẻ HTML, dùng phương thức getElementsByTagName(). Ví dụ, document.getElementsByTagName("UL") sẽ trả về chuỗi tất cả các thẻ <UL> trong tài liệu.


----Tạo DOM Node
Trong nhiều trường hợp cần tạo các nút mới và thêm nó vào tài liệu. JavaScript cung cấp một số phương thức để làm điều đó. Các phương thức chuẩn để tạo nút mới là document.createElement() và document.createTextNode(), phương thức createElement() có thể được dùng để tạo ra bất kỳ phần tử HTML nào, tham số là kiểu của loại thẻ HTML;
var childEl=document.createElement("div");
createTextNode() tạo một nút thể hiện qua một đoạn text, thường được tìm thấy trong các thẻ về heading, div, paragraph, và list item.
var txtNode=document.createTextNode("some text");

Chuẩn DOM coi các text node tách rời khỏi biểu diễn HTML. Chúng không có các stye để áp đặt cho trực tiếp và vì thế chúng yêu cầu ít bộ nhớ hơn.
Một nút khi được tạo ra phải được gắn vào tài liệu trước khi hiển thị trên trình duyệt, phương thức appendChild() được dùng để thực hiện điều này el.appendChild(childEl);
Ba phương thức createElement(), createTextNode(), và appendChild() cho phép thực hiện hầu hết các thao tác để thêm một nút vào tài liệu.

Một tool (editor) mã nguồn mở, rất cool, xem chi tiết tại:
*http://wow-vn.net/forum/forumdisplay.php?f=40


Bài 6: Các công nghệ trong AJAX - DOM - Phần cuối.
Bài 6: Các công nghệ trong AJAX - DOM - Phần cuối.
---Thêm style vào tài liệu
DOM cũng cung cấp các phương thức để chỉnh sửa style của các phần tử và tạo định dạng lại cho cấu trúc đã được định nghĩa trong stylesheet.
Mỗi phần tử trong trang web có thể có nhiều giao diện trực quan có thể được áp đặt qua DOM, như vị trí, chiều dài và rộng, mằu sắc, canh lề và đường viền. Các trình duyệt ngày nay đều cung cấp các ràng buộc JavaScript cho phép thay đổi giao diện mức thấp và áp đặt các định dạng một cách nhất quán và dễ dàng với các lớp CSS.
Thuộc tính className
Ví dụ đoạn code sau sẽ áp đặt các quy tắc biểu diễn của lớp declared cho một nút:
Quote: :
hello.className='declared';


với hello tham chiếu tới một nút DOM.
Thuộc tính style
Ví dụ, đoạn mã sau bổ sung các thuộc tính style cho nút empty:
Quote: :
empty.style.border="solid green 2px";
empty.style.width="200px";


---Sử dụng thuộc tính innnerHTML
Các phần tử DOM của các trình duyệt web đều hỗ trợ một thuộc tính gọi là innerHTML, cho phép các nội dung kiểu string tùy ý được gán cho các phần tử theo thuộc tính này, như trong đoạn mã sau:
Quote: :
function addListItemUsingInnerHTML(el,text){
el.innerHTML+="<div class='programmed'>"+text+"</div>";
}


Trên đây ta vừa xét một cách sơ lược về JavaScript, CSS, và DOM. Chúng được tập hợp trong một công nghệ gọi là Dynamic HTML (DHTML), và có thể thấy Ajax sử dụng rất nhiều kỹ thuật DHTML.

Như vậy, các bạn đã nắm được 2 công nghệ dùng trong AJAX: CSS và DOM. Trong các phần tiếp theo chúng ta cùng nhau thảo luận về: XML và việc truyền dữ liệu bất đồng bộ (Giới thiệu về XML và XSLT, XMLHttpRequest) và có lẽ cũng nên nói qua một chút về JS (JavaScript).


Bài 7: Các công nghệ trong AJAX - XML và việc truyền dữ liệu bất
Bài 7: Các công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XML.
---XML là gì?
Năm 1969, IBM đã cho ra đời ngôn ngữ đánh dấu đầu tiên của mình với tên gọi Generalized Markup Language (GML). GML là một ngôn ngữ tự đặc tả sử dụng cho việc đánh dấu cấu trúc của một tập dữ liệu nhất định đồng thời GML được định hướng để trở thành một **** language (siêu ngôn ngữ) – nghĩa là ngôn ngữ dùng để đặc tả cho ngôn ngữ khác.

Về sau GML phát triển thành SGML (Standard Generalized Markup Language). Vào năm 1986, SGML được tổ chức ISO công nhận là chuẩn lưu trữ và chuyển đổi dữ liệu. SGML được sử dụng để xây dựng những tài liệu như sách vở, báo cáo, hay cẩm nang tham khảo….Những tài liệu này sẽ được chuyển thành dạng thức biểu diễn được và sau đó gởi chúng ra thiết bị xuất như máy in, màn hình...

Tuy nhiên, trở ngại lớn nhất đối với người dùng SGML là chúng quá phức tạp và tiêu tốn nhiều công sức trong việc hiện thực. Vì vậy hầu hết người dùng cá nhân và doanh nghiệp đều không thể đáp ứng những yêu cầu để sử dụng công nghệ hữu dụng này.

Năm 1996, Word Wide Web Consortium (W3C) khởi động kế hoạch xây dựng một ngôn ngữ được gọi là XML (eXtensible Markup Language – ngôn ngữ đánh dấu mở rộng) kết hợp được sức mạnh của SGML và tính phổ dụng của HTML. Sự xuất hiện của XML mang lại cho người dùng sức mạnh của SGML với tốn kém ít hơn và không phải đối mặt với sự phức tạp của SGML. Hơn nữa việc viết parser (bộ phân tích từ vựng và cú pháp) cho tài liệu XML cũng đơn giản hơn. Ngoài ra, XML tương thích với các giao thức Internet và phần mềm xử lý, chuyển đổi dữ liệu. XML được xem là một tập con của SGML, vì vậy XML có được khả năng tương thích với những hệ thống dựa trên SGML, giúp nhà phát triển vẫn có thể duy trì được những hệ thống đã được xây dựng trên nền tảng SGML mà không phải tốn kém trong việc chuyển đổi.
(đoạn trên là copy n paste)

=Các đặc điểm của XML


---Cấu trúc một tài liệu XML
Tài liệu XML chỉ chứa đựng dữ liệu và cách lưu trữ dữ liệu mà không hề đề cập tới cách thức trình bày dữ liệu. Một tài liệu XML sẽ chứa những đặc tả về cấu trúc dữ liệu. Mỗi cấu trúc gồm nhiều phần tử (element), mỗi thành phần được bắt đầu với một thẻ bắt đầu (Start–tag) và kết thúc với một thẻ kết thúc (End–tag). Giữa Start–tag và End–tag là nội dung của phần tử này. Nội dung có thể bao gồm dữ liệu văn bản hay có thể là một phần tử khác. Dưới đây là một file XML:

Quote: :
<?xml version="1.0"?>
<Catalog>
<Product>
<ProductID>F10</ProductID>
<ProductName>Shimano Calcutta </ProductName>
<ListPrice>47.76</ListPrice>
</Product>
<Product>
<ProductID>F20</ProductID>
<ProductName>Bantam Lexica</ProductName>
<ListPrice>49.99</ListPrice>
</Product>
</Catalog>

Một tài liệu HTML có thể tồn tại một số thẻ không đúng quy định (trình biên dịch sẽ bỏ qua những thẻ này). Tuy nhiên với một tài liệu XML thì điều này không thể xảy ra. Khi xây dựng một tài liệu XML, nó phải tuân thủ theo một số quy luật nào đó. Những tài liệu XML tuân thủ đúng những quy luật này được gọi là well-formed (tạm dịch là định dạng đúng). Với một tài liệu không phải là well–formed, Internet Explorer sẽ thông báo lỗi khi nạp tài liệu này.

Một tài liệu XML well–formed chưa chắc là một tài liệu hợp lệ. Một tài liệu XML được xem là hợp lệ nếu nó đảm bảo những quy tắc đặc tả trong tài liệu Document Type Definition (DTD) hay giản đồ (schema). Một DTD hay schema sẽ định nghĩa mọi thứ từ cấu trúc dữ liệu tới kiểu dữ liệu, những thuộc tính được yêu cầu, và những ràng buộc về thành phần và thuộc tính được kết hợp trong tài liệu. Phương thức kiểm tra tài liệu này thường được sử dụng trong giao tiếp giữa ứng dụng - ứng dụng, đảm bảo dữ liệu trao đổi hợp lệ tránh dẫn tới những ảnh hưởng của dữ liệu không hợp lệ trên toàn hệ thống.

---XSLT - (eXtensible Style Language Transforming)
XSLT là một phần của XSL (eXtensible Style Language). XSL là một ngôn ngữ nền tảng XML và ra đời với mục đích chuyển đổi một tài liệu XML thành một tài liệu XML khác hay chuyển một tài liệu XML thành những đối tượng có thể thể hiện được. Internet Explorer được tích hợp XSL transformer giúp tự động chuyển đổi tài liệu XML thành tài liệu HTML. Để sử dụng XSLT, chúng ta phải xây dựng tài liệu XSL chứa những template. Trong những template chúng ta sẽ kết hợp những phần tử HTML sẽ được xuất ra.


Bài 8: Công nghệ trong AJAX - XML và việc truyền dữ liệu bất đ
Bài 8: Công nghệ trong AJAX - XML và việc truyền dữ liệu bất đồng bộ - XMLHttpRequest
Các ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khi gửi yêu cầu đến server, điều này thường dẫn đến một sự ngắt quãng cho công việc của người dùng. Vì thế yêu cầu đặt ra là làm cho các request của server không đồng bộ và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời từ server. Giải pháp đầu tiên để giải quyết vấn đề này là dùng IFrame. Cho đến gần đây, XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả.

---XmlDocument và XMLHttpRequest
Các đối tượng XmlDocument và XMLHttpRequest không phải là các chuẩn DOM mở rộng của trình duyệt web nhưng vẫn được hỗ trợ bởi rất nhiều trình duyệt. Các đối tượng đều dựa trên ActiveX hay các đối tượng JavaScript. Các trình duyệt khác đều có thực thi các đối tượng trên có các chức năng tương đương và các lời gọi hàm API.

Một ví dụ sử dụng XmlDocument:
Quote: :
function getXMLDocument(){
var xDoc=null;
if(document.implementation&&document.implementation.
createDocument){
xDoc=document.implementation.createDocument("","",null);
}else if (typeof ActiveXObject != "undefined"){
var msXmlAx==null;
try{
msXmlAx=new ActiveXObject("Msxml2.DOMDocument");
}catch (e){
msXmlAx=new ActiveXObject("Msxml.DOMDocument");
}
xDoc=msXmlAx;
}
if (xDoc==null || typeof xDoc.load=="undefined"){
xDoc=null;
}
return xDoc;
}


Hàm vừa thực hiện trên sẽ trả về một đối tượng XmlDocument với các hàm API giống nhau trong các trình duyệt hiện nay.
Ví dụ sau có chức năng tương tự nhưng dùng cho đối tượng XMLHttpRequest.
Quote: :
function getXMLHTTPRequest() {
var xRequest=null;
if (window.XMLHttpRequest) {
xRequest=new XMLHttpRequest();
}else if (typeof ActiveXObject != "undefined"){
xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}


---Gửi một yêu cầu đến server
Gửi một yêu cầu đến server từ một đối tượng XMLHttpRequest rất dễ dàng. Tất cả những việc ta cần làm là truyền cho nó địa chỉ URL của server. Ta sẽ làm như sau:
Quote: :
function sendRequest(url,params,HttpMethod){
if (!HttpMethod){
HttpMethod="POST";
}
var req=getXMLHTTPRequest();
if (req){
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/
x-www-form urlencoded");
req.send(params);
}
}


XMLHttpRequest hỗ trợ một miền rất rộng các lời gọi HTTP, gồm các tham số truy vấn cho các trang web động.

---Dùng các hàm callback để giám sát các yêu cầu

Các hàm callback đón bắt các sự kiện trong cách tiếp cận lập trình hướng sự kiện trong hầu hết các bộ công cụ UI hiện nay – như nhấn bàn phím, click chuột, vì không thể biết được các sự kiện nào sẽ xảy ra, nên các lập trình viên phải đón bắt các sự kiện có thể xảy ra. Khi tạo các giao diện người dùng UI bằng JavaScript, ta gán các hàm onkeypress, onmouseover, và đặt tên tương tự cho các thuộc tính tương đương cho các đối tượng. Khi lập trình cho các yêu cầu cho server, chúng ta gặp các thuộc tính tương tự onload và onreadystatechange.



Search from ALEXA


put your ads here