Bài viết sưu tầm

4.1. Giới thiệu về XML và XSLT

4.1.1 XML là gì?

Năm 1969, IBM đã cho ra đời GML là ngôn ngữ dùng để đặc tả cho ngôn ngữ khác. Về sau GML phát triển thành SGML là chuẩn lưu trữ và chuyển đổi dữ liệu. Nhưng quá phức tạp và tiêu tốn nhiều công sức trong việc hiện thực. XML ra đời kết hợp được sức mạnh của SGML và tính phổ dụng của HTML.

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

-         XML tương thích với SGML

-         Dễ dàng Viết được những chương trình xử lý tài liệu XML

-         Tài liệu XML dễ đọc và có tính hợp lý cao

-         XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn

-         XML dễ dàng được sử dụng trên Internet

-         XML hỗ trợ nhiều ứng dụng

-         Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML

4.1.3 Cấu trúc một tài liệu XML

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:

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

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

4.2  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. XMLHttpRequest đã được đưa ra như là một giải pháp mạnh mẽ và hiệu quả.

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

Ví dụ: Sử dụng XmlDocument.

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

Ví dụ: Sử dụng XMLHttpRequest

function getXMLHTTPRequest() { var xRequest=null; if (window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if (typeof ActiveXObject != "undefined"){ xRequest=new ActiveXObject("Microsoft.XMLHTTP"); } return xRequest; }

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

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.

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

4..3. Lập trình bằng JavaScript phía client

     JavaScript là một ngôn ngữ lập trình đa năng, nó là một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Kiểu tự do nghĩa là các biến không được khai báo cụ thể và các biến giống nhau có thể được gán bới các kiểu khác nhau. Thông dịch nghĩa là các mã nguồn không được biên dịch thành các đoạn mã nhị phân có thể thực thi được, và nó được thực thi trực tiếp, cụ thể là qua các trình duyệt. Đa năng nghĩa là ngôn ngữ này thích hợp để lập trình theo hầu hết các thuật toán và các tác vụ. Trong môi trường trình duyệt web, các chức năng cơ bản của trình duyệt, gồm CSS, DOM, và các đối tượng XMLHttpRequest, được coi là các phương tiện của JavaScript, cho phép các nhà phát triển điều khiển các trang ở các mức độ khác nhau.

4.4. Các đối tượng HTTP

4.4.1. Giới thiệu về XMLHttpRequest

        Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi request và xử lý các response. XMLHttpRequest chưa là chuẩn của W3C, vì thế phải dùng JavaScript theo nhiều cách để tạo một thể hiện của của XMLHttpRequest. Để tạo một thể hiện của đối tượng XMLHttpRequest. Công việc chỉ đơn giản là kiểm tra sự hỗ trợ đối tượng ActiveX của trình duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng ActiveX. Trường hợp khác, tạo đối tượng này bằng kỹ thuật tạo đối tượng JavaScript nguyên thủy.

Tạo một thể hiện của đối tượng XMLHttpRequest:

var xmlHttp; function createXMLHttpRequest() {    if (window.ActiveXObject) {       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }    else if (window.XMLHttpRequest) {       xmlHttp = new XMLHttpRequest();    } }

 

4.4.2. Phân tích các đặc tính của XMLHttpRequest

4.4.2.1 Các phương thức và thuộc tính

Phương thức	Thuộc tính	Ý nghĩa
Open	String  method, String url, boolean asynch, String username, String   password	Thiết lập một phiên gọi tới server. Khởi tạo một request. Nó có hai tham số yêu cầu và ba tham số tùy chọn
Send	content	Gửi request tới server. Nếu request được khai báo bất đồng bộ, kết quả được trả về ngay.
SetRequestHeader	String header, String value	Thiết lập giá trị cho phần header đã cho trong HTTP request.
Abort		Hủy request.
GetAllResponseHeaders		Trả  về  biến kiểu String chứa header của HTTPrequest
GetResponseHeader	Header	Tương tự phương thứ trên

4.4.2.1 Sự tương tác

Ta xét một ví dụ để tìm hiểu các tương tác của Ajax. Hình sau cho thấy mô hình tương tác chuẩn trong một ứng dụng Ajax.

Hình 1.4 Mô hình tương tác chuẩn Ajax

Quá trình tương tác:

1.      Một event client-side gây ra một sự kiện - Ajax event. Bất kỳ một tác động nào cũng có thể gây ra Ajax event, từ một sự kiện onchange đơn giản cho đến một số tác động của người dùng.

2.      Một thể hiện của XMLHttpRequest được tạo ra. Dùng phương thức open(), tạo lời gọi hàm - địa chỉ URL được thiết lập cùng với phương thức HTTP yêu cầu, thông thường là GET hay POST. Request được tạo ra qua việc gọi phương thức send().

3.      Một request được tạo và gửi đến server.

4.      Server xử lí các yêu cầu

5.      Response được trả về cho trình duyệt. Trường Content-Type được thiết lập ở dạng text/xml; XMLHttpRequest chỉ có thể xử lí kết quả dạng text/html.

6.      Cấu hình XMLHttpRequest để gọi hàm callback() khi kết quả xử lí được trả về. Hàm này kiểm tra thuộc tính readyState trên đối tượng XMLHttpRequest và sau đó xem xét mã trạng thái trả về từ server.

4.4.2.2 Các phương thức GET và POST

Trên lý thuyết, sử dụng GET khi request không thay đổi giá trị, tức là nhiều request sẽ trả về cùng kết quả. Trong thực tế, dùng GET để truy lục dữ liệu từ server; hay nói cách khác tránh được việc thay đổi trạng thái trên với lời gọi GET. Phương thức POST được dùng khi muốn thay đổi trạng thái trên server.

4.4.3. Remote Scripting

Chúng ta cùng xét một công nghệ gọi là remote scripting nó cung cấp một cơ chế dùng để tránh việc tái nạp các trang web.

Ví dụ:

iframe.html :

<html> <head> <title>Example of remote scripting in an IFRAME</title> </head> <script type="text/javascript"> function handleResponse() {    alert('this function is called from server.html'); } </script> <body> <h1>Remote Scripting with an IFRAME</h1> <iframe id="beforexhr" name="beforexhr" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe> <a href="server.html" target="beforexhr">call the server </a> </body> </html>

server.html:

<html> <head> <title>the server</title> </head> <script type="text/javascript"> window.parent.handleResponse(); </script> <body> </body> </html>

4.4.3.1.Tổng quan về Remote Scripting

Về cơ bản, remote scripting là một loại lời gọi các thủ tục từ xa. Sự tương tác với server vẫn như các ứng dụng Web thông thường, nhưng không tái nạp (refresh) toàn bộ trang web. Chỉ với Ajax, mới có thể sử dụng công nghệ bất kỳ phía server để có thể nhận các request, xử lí chúng và trả về kết quả. Với mỗi công nghệ phía server, có một số lựa chọn cho phía client để thực hiện remote scripting.

4.4.4. Gửi các request

Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là:

1.      Dùng một tham chiếu tới một thể hiện của XMLHttpRequest

2.      Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest.

3.      Gán các thuộc tính của request.

4.      Gửi request tới server.

Ví dụ: SimpleRequest.html

<!DOCTYPE   html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    <html   xmlns="http://www.w3.org/1999/xhtml">    <head>    <title>Simple   XMLHttpRequest</title>    <script   type="text/javascript">    var   xmlHttp;    function   createXMLHttpRequest() {       if (window.ActiveXObject) {          xmlHttp = new   ActiveXObject("Microsoft.XMLHTTP");       }       else if (window.XMLHttpRequest) {          xmlHttp = new XMLHttpRequest();       }    }    function   startRequest() {       createXMLHttpRequest();       xmlHttp.onreadystatechange =   handleStateChange;       xmlHttp.open("GET",   "simpleResponse.xml", true);       xmlHttp.send(null);    }    function   handleStateChange() {       if(xmlHttp.readyState == 4) {          if(xmlHttp.status == 200) {             alert("The server replied   with:"                         + xmlHttp.responseText);          }       }    }    </script>    </head>    <body>    <form action="#">    <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>    </form>    </body>    </html>

 4.5. DOM Level 3 và DOM

4.5.1 DOM Level 3

Một chuẩn mới được công bố: DOM Level 3 Load and Save Specification. Đặc tả này được thiết kế như một platform độc lập với các ngôn ngữ để thay đối nội dung một tài liệu DOM với XML.

4.5.2 DOM

            DOM là một đặc tả của W3C cho một platform độc lập với ngôn ngữ lập trình để truy cập và sửa đổi nội dung và cấu trúc của tài liệu. Một cách hiểu khác, nó là một cách thông dụng để biểu diễn và thao tác một tài liệu HTML hay XML. thiết kế của DOM dựa trên đặc tả của Object Management Group, cho phép sử dụng với bất kỳ ngôn ngữ lập trình nào. DOM là một mô hình đối tượng trong ngữ cảnh hướng đối tượng. DOM xác định các đối tượng cần thiết để biểu diễn và thay đổi tài liệu, các hành V và thuộc tính của các đối tượng này, và mối liên hệ giữa các đối tượng. Lợi thế của đặc tả DOM là nó cung cấp một chuẩn để tương tác với tài liệu.

4.6. Gửi các request và xử lý response

4.6.1 Giao thức HTTP

            Một HTTP message bắt đầu với một dòng request hay status, tiếp theo có thể là nhiều loại  headers và phần message body.

4.6.2 Cấu trúc của HTTP Message

HTTP là một giao thức kiểu client/server; client đưa ra các request, và server sẽ trả lời các request này. Cấu trúc các HTTP message vì thế cũng thay đổi theo yếu tố này. Có một định dạng cho HTTP request và cho các response.

Ví Dụ:

GET / HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) Host: www.ft.com Connection: Keep-Alive

4.6.2.1 HTTP Request

Mỗi request bắt đầu với một Request-Line. Dòng này chỉ ra phương thức mà client yêu cầu, tài nguyên, và phiên bản của HTTP mà client có thể hỗ trợ. Request-Line có thể có tiếp sau một hay nhiều header và một message body. Một HTTP request bắt đầu với một Request-Line và có thể bao gồm các header và message body. Phần header có thể mô tả quá việc truyền dữ liệu, xác định các yêu cầu hay phần message body kèm theo. Request-Line chứa ba mục phân biệt, đó là method, uri, và phiên bản HTTP, mỗi mục được phân tách bởi một hay nhiều khoảng trống. Một HTTP Request-Line có một  phương thức, một địa chỉ định danh tài nguyên (URI), và thông báo phiên bản HTTP. Mục tiếp theo trong Request-Line là Request-uri. Mục này cung cấp địa chỉ định danh tài nguyên cho một tài nguyên.

Mục cuối cùng trong Request-Line là phiên bản  HTTP

Tiếp sau Request-Line, một HTTP request có thể bao gồm một hay nhiều dòng message header. Một message header có thể chứa các loại general header, request header, hoặc entity header. General header áp dụng trong truyền dữ liệu; request header áp dụng cho các request cụ thể, và entity header áp dụng cho message body trong request. Một HTTP request luôn chứa một dòng trống sau Request-Line. Dòng trống - blank line rất quan trọng vì server xác định được phần kết của request, hoặc phần kết của header

4.6.2.2 HTTP Response

HTTP Response khá giống với HTTP Request. Dấu hiệu khác biệt duy nhất là response bắt đầu với một dòng trạng thái status so với Request-Line. Status-Line, cũng giống như Request-Line, chứa ba mục ngăn cách bởi các khoảng trống.

Một HTTP response  bắt đầu với một Status-Line và có thể chứa các header và một message body. Header có thể mô tả quá trình truyền dữ liệu, xác định response, hoặc phần body kèm theo.

HTTP Status-Line  bắt đầu với chỉ báo HTTP, mã trạng thái, và một đoạn text mô tả response.

Hai mục còn lại trong Status-Line là Status-Code và Reason-Phrase. Status-Code là một bộ ba kí tự chỉ báo kết quả của request. Status-Code phổ biến nhất là 200. Giá trị này thông báo yêu cầu của client thành công.

4.6.3 Header Field

HTTP request và response có thể có một hay nhiều message header. Message header bắt đầu với tên trường và dấu (“:”). Trong một số trường hợp, chỉ có tên trường trong phần header. Trong hầu hết các trường hợp khác header chứa các thêm thông tin khác nữa, các thông tin này đi sau dấu “:”. Một message header kết thúc ở cuối dòng, nhưng nếu một client cần biểu diễn nhiều hơn một dòng thì dòng tiếp theo sẽ bắt đầu với một hay nhiều kí tự trống hay kí tự gạch ngang.

4.6.4 Status Code

Một phần rất quan trọng của HTTP response là mã trạng thái - status code. Mã này xác định xem yêu cầu của client có được thực hiện thành công hay không và cung cấp thêm thông tin về request. Mỗi giá trị status code là một số ba kí tự.

4.7. Xử lí các response của server

XMLHttpRequest cung cấp hai thuộc tính để truy cập vào response của server. Thuộc tính đầu tiên, responseText, chỉ đơn giản là cung cấp response dưới dạng một biến string. Thuộc tính thứ hai, responseXML, cung cấp response dưới dạng đối tượng XML. Truy cập response dưới dạng text đơn giản rất thuận lợi cho các trường hợp sử dụng đơn giản, chẳng hạn như hiển thị response trong một alert hay response là một cấu trúc đơn giản thông báo thành công hay bị lỗi.

4.7.1 Dùng thuộc tính innerHTML để tạo nội dung động

Rất khó khăn khi dùng các response dạng text để tạo nội dung động cho các trang web. Thuộc tính responseText trở nên hữu ích nếu ta dùng nó chung với thuộc tính innerHTML của các phần tử HTML. Nó đơn giản là một xâu kí tự biểu diễn nội dung giữa một thẻ mở và thẻ đóng. Bằng cách dùng kết hợp responseText và innerHTML, server có thể đưa ra các đoạn mã HTML sẽ được hiển thị bởi các trình duyệt qua thuộc tính innerHTML.

4.7..2 Phân tách response theo chuẩn XML

Có thể server không cần thiết phải gửi response với định dạng XML. Nó hoàn toàn có thể gửi response dưới dạng text. Các cấu trúc dữ liệu phức tạp thường được gửi trong định dạng XML.

+3C Document Object Model

W3C Web định nghĩa về DOM:

Document Object Model (DOM) là một nền tảng hay là một giao diện ngôn ngữ trung gian cho phép các chương trình hay các script  truy cập và cập nhật động nội dung, cấu trúc, kiểu dáng của tài liệu (document). Tài liệu có thể được xử lí, và kết quả của quá trình xử lí này có thể kết hợp lại trong trang hiển thị.

+3C DOM và JavaScript:

Rất dễ nhầm lẫn W3C DOM với JavaScript. DOM là một tập các hàm API cho các tài liệu HTML và XML, cung cấp một câu trúc biểu diễn tài liệu và xác định xem cấu trúc tài liệu được truy cập qua script như thế nào. JavaScript là một ngôn ngữ được dùng để truy cập và thao tác DOM. Không có DOM, JavaScript không thể có các khái niệm về trang web và các phần tử đánh dấu trang web đó.

+Cập nhật nội dung động với W3C DOM

            W3C DOM cung cấp các thuộc tính và phương thức cho phép duyệt cấu trúc XML và khai phá dữ liệu yêu cầu.

4.8. Gửi các tham số request từ phía client

Nếu gửi request không kèm tham số, server sẽ không có biết được yêu cầu của client, và nó sẽ gửi các response giống nhau tới tất cả client.

Công nghệ AJAX yêu cầu việc gửi dữ liệu phải có ngữ cảnh (tức là có các tham số đi kèm).

4.8.1 Gửi các tham số request theo chuẩn XML

Có thể gửi dữ liệu dạng XML tới server như một phần của request body, giống như các câu truy vấn được gửi trong request body  trong một POST request. Server có thể đọc dữ liệu XML từ request body và làm việc với chúng.

4.8.1 Gửi dữ liệu tới server bằng JSON

JSON là một chuẩn định dạng text độc lập với các ngôn ngữ, có thể dùng tượng tự như các ngôn ngữ họ C như C, C#, JavaScript,…. JSON được xây dựng theo hai cấu trúc dữ liệu hỗ trợ tất các ngôn ngữ lập trình hiện đại:

-         Một tập các cặp name/value. Trong các ngôn ngữ hiện đại chúng được biết dưới các kiểu object, record, hay dictionary.

-         Một danh sách có thứ tự, như là một mảng.

 

NGUYỄN MINH NHẬT