Ajax

Bài 2 : Ứng dụng tương tác của CSS
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 vàng.
Có thể khai báo thuộc tính CSS như sau:
HTML Code:
h1 {color: yellow;size:14}

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 3 : Công nghệp Ajax - 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
HTML Code:
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>.
HTML Code:
<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>.
HTML Code:
<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.
HTML Code:
<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:
HTML Code:
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
Bài 4 : Công nghệ Ajax - 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.
HTML Code:
<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:
HTML Code:
.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.
HTML Code:
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);
}
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: DOM - Tìm kiếm & Tạo DOM Node
DOM - Tìm kiếm & Tạo DOM Node
1.Tìm kiếm một DOM Node
ê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ư:

Code:
<span id='hello'>option</span>
or
HTML Code:
<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 :
Code:
var varhello=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:
HTML Code:
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.
HTML Code:
var tgn=getElementsByTagName("hello")
2.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;

HTML Code:
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.
HTML Code:
var txtNode=document.createTextNode("some text");
huẩ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.
Bài 6: Thêm style vào tài liệu - Sử dụng thuộc tính innnerHTML
Thêm style vào tài liệu - Sử dụng thuộc tính innnerHTML
6.1. 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:
HTML Code:
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:
HTML Code:
empty.style.border="solid green 2px";
empty.style.width="200px";
6.2 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:
HTML Code:
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 8 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ả.
8.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.

Một ví dụ sử dụng XmlDocument:
HTML Code:
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.
HTML Code:
function getXMLHTTPRequest() {
var xRequest=null;
if (window.XMLHttpRequest) {
xRequest=new XMLHttpRequest();
}else if (typeof ActiveXObject != "undefined"){
xRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
return xRequest;
}
8.4 Gửi một yêu cầu đến server - Sending request
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:
HTML Code:
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.
8.5 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.
Bài 9 Javascript - Nghiên cứu class js
JavaScript là một ngôn ngữ lập trình đa năng, nó tương đối giống C. JavaScript được biết
dưới dạng 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ể như string, integer, hay object, và
các biến giống nhau có thể được gán bới các kiểu khác nhau. Ví dụ, đoạn mã sau là hợp
lệ:
HTML Code:
var x=3.1415926;
x='pi';
Biến x lúc đầu được định nghĩa là giá trị số và sau đó được gán lại bởi giá trị xâu kí tự.
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. Khi triển khai
một ứng dụng JavaScript, ta đặt mã nguồn trên web server, và mã nguồn này được truyền
trực tiếp qua Internet tới web browser.
Đ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ụ. JavaScript cơ bản hỗ trợ các kiểu số - number, string, date và time, array, các biểu
thức toán học được xử lí trong văn bản, và các hàm toán học như các hàm lượng giác và
bộ tạo số ngẫu nhiên. Hoàn toàn có thể định nghĩa cấu trúc một đối tượng bằng JavaScript,

điều này mang đến nguyên lý cơ bản cho lập trình và để viết lên nhưng đoạn mã phức tạp.
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.
Trong chồng công nghệ (tức là các công nghệ sử dụng liệt kê từ trên xuống dưới) của Ajax,
JavaScript là chất kết dính các thành phần lại với nhau.
Bài 10:Đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest
ây giờ ta sẽ xét vấn đề trọng tâm của Ajax: đối tượng XMLHttpRequest. XMLHttpRequest
được đưa ra ban đầu trong Internet Explorer 5 như là một ActiveX component. Nó chỉ hoạt
động trong Internet Explorer điều này làm cho số ít các nhà phát triển làm việc với
XMLHttpRequest, cho tới khi nó trở thành một chuẩn không chính thức trong Mozilla 1.0 và
Safari 1.2. Một điều rất quan trọng cần chú ý là XMLHttpRequest không là chuẩn của W3C,
mặc dù rất nhiều chức năng của nó được đề xuất trong các đặc tả: DOM Level 3 Load and
Save Specification.
Vì XMLHttpRequest không phải là một chuẩn, nên có những sự khác biệt nhỏ trong các
trình duyệt về hỗ trợ đối tượng này, tuy nhiên hầu hết các phương thức và thuộc tính của
nó đều được hỗ trợ.Hiện thời, Firefox, Safari, Opera, Konqueror, và Internet Explorer tất cả
đều hỗ trợ XMLHttpRequest tương tự nhau. Nếu một số lượng người dùng đáng kể vẫn
truy cập website với các trình duyệt phiên bản cũ, thì phải cân nhắc về sự lựa chọn công
nghệ sẽ ứng dụng.
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. Internet Explorer thực thi XMLHttpRequest như một đối tượng ActiveX,
và các trình duyệt khác như Firefox, Safari, và Opera thực thi nó như một đối tượng
JavaScript nguyên thủy. Vì sự khác nhau này, đoạn mã JavaScript phải chứa các cấu trúc
logic để tạo một thể hiện của XMLHttpRequest dùng kỹ thuật ActiveX hay đối tượng
JavaScript nguyên thủy.
Rất may mắn, trong trường hợp này không cần phải viết mã một cách tỉ mỉ để xác định kiểu
trình duyệt và làm thế nào để 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.Đoạn mã JavaScript sau dễ dàng tạo
ra các thể hiện của đối tượng XMLHttpRequest mà không quan tâm tới trình duyệt.
Tạo một thể hiện của đối tượng XMLHttpRequest:

HTML Code:
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
Việc tạo một đối tượng XMLHttpRequest khá là đơn giản. Trước tiên, tạo một biến toàn cục
(giả sử có tên là) xmlHttp để lưu trữ một tham chiếu đến đối tượng.Phương thức
createXMLHttpRequest thực hiện việc tạo một thể hiện của XMLHttpRequest. Đoạn
chương trình này chứa một câu lệnh rẽ nhánh đơn giản để xác định cách thức tạo một đối
tượng.
Lệnh gọi window.ActiveXObject sẽ trả về một biến kiểu object hay giá trị null, tương đương
với điều kiện true hay false của câu lệnh if, đây là dấu hiệu chỉ ra cho ta biết trình duyệt hỗ
trợ ActiveX control, đó là Internet Explorer. Nếu thế, XMLHttpRequest được tạo ra là một
thể hiện của ActiveXObject, truyền một chỉ báo kiểu string để xác định loại đối tượng
ActiveX cần tạo.Trong thể hiện này, ta cung cấp tham số Microsoft.XMLHTTP cho hàm tạo,
để chỉ ra rằng cần tạo một thể hiện của XMLHttpRequest.
Nếu lệnh gọi tới window.ActiveXObject không được thực thi (điều kiện false của lệnh if),
lệnh JavaScript sẽ rẽ nhánh tương ứng với lệnh else, để xác định rằng trình duyệt thực thi
XMLHttpRequest dưới dạng một đối tượng JavaScript nguyên thủy. Nếu
window.XMLHttpRequest tồn tại, sau đó một thể hiện của XMLHttpRequest được tạo ra.
Kiểu dữ liệu XMLHttpRequest của JavaScript tương thích với rất nhiều trình duyệt khác
nhau, có thể truy cập các thuộc tính và phương thức của một thể hiện của
XMLHttpRequest mà không cần quan tâm tới cách tạo các thể hiện này. Điều này làm cho
việc phát triển các ứng dụng đơn giản hơn và làm cho JavaScript không phụ thuộc vào
trình duyệt cụ thể.
Bài 11: Đối tượng XMLHttpRequest (Phần 2)
Phân tích các đặc tính của XMLHttpRequest:
Các phương thức và thuộc tính
Danh mục sau chỉ ra các phương thức điển hình của đối tượng XMLHttpRequest:

abort() Hủy request hiện thời.
getAllResponseHeaders() Trả về tất cả các response header cho HTTP request dưới
dạng cặp key/value.
getResponseHeader("header") Trả về giá trị kiểu string của header xác định.
open("method", "url") Thiết lập giai đoạn cho một lời gọi tới server. Tham số của method có
thể là GET, POST, hay PUT. Tham số url có thể là quan hệ hay trực tiếp. Phương thức này
còn có 3 tham số tùy chọn.
send(content) Gửi request tới server.
setRequestHeader("header", "value") Thiết lập header xác định cho giá trị cung cấp. open()
phải được gọi trước khi cố gắng thiết lập bất kỳ một header nào.
Bây giờ ta xét cụ thể các phương thức này:
* void open(string method, string url, boolean asynch, string username, string
password): Phương thức này thiết lập một phiên gọi tới server. Ý nghĩa của nó này là khởi
tạo một request. Nó có hai tham số yêu cầu và ba tham số tùy chọn; ta phải cung cấp đặc
tả của phương thức được triệu gọi (GET, POST, hay PUT) và địa chỉ URL của tài nguyên
được gọi. Cũng có thể truyền một biến chỉ báo kiểu Boolean, xác định việc truyền là bất
đồng bộ - giá trị mặc định là true, nghĩa là các request luôn bất đồng bộ theo mặc định. Nếu
truyền một giá trị false, quá trình xử lí sẽ phải đợi cho đến khi có phản hồi từ server.Việc
truyền dữ liệu bất đồng bộ là một lợi thế của việc dùng Ajax, vì vậy thiết lập tham số này ở
giá trị false đã thay đổi mục đích việc sử dụng XMLHttpRequest. Ta thấy nó rất hữu ích
trong một số trường hợp chẳng hạn như chứng thực người dùng (validating user) trong khi
trang web của không hề bị thay đổi. Hai tham số cuối tùy chọn, cho phép sử dụng
username và password.
* void send(content): Phương thức này thực hiện gửi request tới server. Nếu request
được khai báo bất đồng bộ, kết quả được trả về ngay, còn không nó sẽ đợi cho tới khi
nhận được response từ server. Tham số có thể là một thể hiện của một đối tượng DOM,
một luồng dữ liệu vào (input stream), hay một kiểu string. Nội dung truyền cho phương thức
này được gửi đi như một phần trong request.
* void setRequestHeader(string header, string value): Phương thức thiết lập giá trị cho phần
header đã cho trong HTTP request. Tham số bao gồm một biến kiểu string biểu thị header
được thiết lập và một string khác biểu diễn giá trị để thay thế trong header. Chú ý là nó cần
phải được gọi trước khi gọi đến open(). Trong hầu hết các phương thức thì cặp open() và
send() thường xuyên được gọi.
* void abort(): Phương thức này rất dễ hiểu, nó sẽ hủy request.

* string getAllResponseHeaders(): Trả về một biến kiểu string chứa response header của
HTTP request. Header bao gồm các trường Content-Length, Date, và URI.
* string getResponseHeader(string header): Phương thức này tương tự như
getAllResponseHeaders(); ngoại trừ việc nó nhận một tham số biểu diễn giá trị xác định
header mà ta cấn đón bắt, giá trị trả về cũng có kiểu string.
Ngoài những phương thức chuẩn này, đối tượng XMLHttpRequest còn có các thuộc tính
được liệt kê sau đây.Anh em chú ý ta sẽ phải sử dụng các thuộc tính mở rộng này khi làm
việc với XMLHttpRequest.
onreadystatechange Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi
trạng thái.
readyState Trạng thái của request. Có 5 giá trị là
0 = uninitialized,1 = loading, 2 = loaded, 3 = interactive, và 4 = complete.
responseText Response trả về từ server dưới dạng string.
responseXML Response trả về từ server dưới dạng XML. Đối tượng này có thể được
phân tách và khảo sát như một đối tượng tài liệu DOM.
status Mã trạng thái HTTP từ server (chẳng hạn 200 nếu không có lỗi, 404 cho lỗi Not
Found, …).
statusText Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not Found, …).
Sự tương tác giữa các đối tượng
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.

Không giống như các cách tiếp cận kiểu request/response thông thường trong các chuẩn
Web client, một ứng dụng Ajax có những khác biệt, sau đây là mô tả 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. Ví dụ với đoạn mã sau:
HTML Code:
<input type="text" id="email" name="email" onblur ="validateEmail()";>
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(). Đoạn mã nguồn
sau thể hiện điều đó:
HTML Code:
var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);

}
3. Một request được tạo và gửi đến server. Có thể là một lời gọi tới một servlet, một CGI
script, hay một công nghệ phía server nào đó tương tự như ASP.NET, JSP, hay PHP…
4. Server xử lí các yêu cầu, chẳng hạn như truy cập cơ sở dữ liệu hay một tác vụ hệ thống
nào đấy.
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.Trong các thể hiện phức
tạp hơn, response khá rắc rối và bao gồm JavaScript, các thao tác trên đối tượng DOM,
hoặc các công nghệ liên quan khác.Chú ý là cũng cần thiết lập header vì thế trình duyệt sẽ
không lưu kết quả một cách cục bộ. Ta sẽ làm như sau:
HTML Code:
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
6. Trong ví dụ sau, 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. Mọi thứ hoàn toàn bình thường, hàm callback() có
thể làm nhiều việc trên phía client. Một phương thức callback thường có dạng sau:
HTML Code:
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}
Có một số khác biệt với mô hình request/response thông thường nhưng không quá lạ lẫm
đối với các lập trình viên Web. Rõ ràng, phải xem xét thêm về việc tạo và thiết lập một đối
tượng XMLHttpRequest và sau đó (hàm) callback sẽ kiểm tra các trạng thái. Thường thì
các lời gọi chuẩn này được đóng gói vào một thư viện để dùng trong ứng dụng, hay nói
cách khác là dùng một thư viện có sẵn để thực thi Ajax cho ứng dụng Web (có rất nhiều
thư viện như thế, ta sẽ xét trong các phần sau). Ajax là vấn đề tuy còn mới mẻ, nhưng đã
có một lượng đáng kể các thư viện và ứng dụng mã nguồn mở được công bố.

Hầu hết các framework và toolkit Ajax trên các trang Web đều dùng các kĩ thuật cơ bản và
trừu tượng hóa các trình duyệt, và thêm vào một số component giao diện người dùng
(UI).Một số là các framework thuần client; còn lại làm việc trên server. Nhiều framework
trong số này mới được bắt đầu xây dựng, nhưng chúng liên tục có các phiên bản và có
thên các thư viện mới. Một số giải pháp để thực thi Ajax là các thư viện Ajax.NET, Atlas,
libXmlRequest, RSLite, sarissa, JavaScript Object Notation (JSON), JSRS, Direct Web
Remoting (DWR), và Ruby on Rails…
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ế, nếu phương thức tương ứng ở server thay đổi trạng thái
theo một vài cách, thì điều này không còn đúng nữa. Điều này có nghĩa, nó là một
chuẩn.Có rất nhiều sự khác biệt với chuẩn trong điều kiện kích thước của phần đệm
(payload) - trong nhiều trường hợp, các trình duyệt và server sẽ giới hạn độ dài của địa chỉ
URL sử dụng để gửi dữ liệu tới server. Tóm lại, 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. Không giống như
GET, phải thiết lập phần Content-Type header trên đối tượng XMLHttpRequest như sau:
HTML Code:
xmlHttp.setRequestHeader("Content-Type","application/
x-www-form-urlencoded");
POST không hạn chế kích thước của payload được gửi tới server, và POST request không
cần bảo đảm tính không đổi.
Hầu hết các request được thiết lập ở GET request; tuy nhiên trạng thái POST cũng luôn
sẵn sàng khi cần thiết.
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.
Có thể nhúng vào các đoạn Flash, Java applet, hay các ActiveX vào ứng dụng. Thậm chí

cũng có thể dùng một số công nghệ như XML-RPC, nhưng sự phức tạp của phương pháp
này làm giảm tính phổ biến của nó.Cách thực thi cơ bản đối với remote scripting bao gồm
phối hợp một cripting với một IFRAME và server trả về các đoạn mã JavaScript, các đoạn
mã này sẽ được chạy trong trình duyệt.
Microsoft có giải pháp riêng về remote scripting, được gọi là Microsoft Remote Scripting
(MSRS), cho phép gọi các server script giống như là chúng cục bộ.Một Java applet được
nhúng vào trang web để làm cho sự liên lạc với server được dễ dàng, một trang asp được
dùng để chứa các script phía server, một file .html quản lí bên phía client.
Có thể dùng các giải pháp của Microsoft với Netscape và Internet Explorer 4.0 trở nên. Các
lời gọi hàm này có thể đồng bộ hay bất đồng bộ. Tuy nhiên giải pháp này yêu cầu Java, có
nghĩa là cần có sự cài đặt thêm vào, và nó phụ thuộc vào trình Internet Information
Services (IIS), từ đó làm giảm sự lựa chọn cho phía server.
Bài 15: Đối tượng XMLHttpRequest - Gửi các request
Bây giờ ta sẽ thảo luận xem cách sử dụng đối tượng XMLHttpRequest. Ở các phần trước
đã đề cập đến cách tạo đối tượng này, bây giờ ta sẽ chỉ ra làm thế nào để gửi request tới
server và xử lí các response từ server.
Request đơn giản nhất là một request mà không chứa một thông tin nào cả, tức là các form
tham số truy vấn hay form gửi dữ liệu là trống.Trong thực tế thì luôn gửi các request mang
thông tin đến server.
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, có thể bằng cách tạo mới
hay truy cập vào một biến có 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. Ta hoàn thành việc này bằng cách thiết lập thuộc tính
onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript.
3. Gán các thuộc tính của request. Phương thức open() của đối tượng XMLHttpRequest
được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ
báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên,
một biến boolean chỉ báo request sẽ là bất đồng bộ.
4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên.
Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một
đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của
request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán
trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request.

Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng XMLHttpRequest,
chỉ ra xem nó cần làm gì khi thay đổi trạng thái, khi nào thì gửi các request và gửi như thế
nào, và cuối cùng là định hướng XMLHttpRequest để truyền request.
Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào
dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa chỉ
trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham số
qua con trỏ hàm rất linh động và mềm dẻo hay lưu trữ một con trỏ hàm trong một thuộc tính
của lớp.
Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ tới
hàm callback. Hàm callback được gọi khi trạng thái nội tại của đối tượng XMLHttpRequest
thay đổi.Khi một lời gọi bất đồng bộ được tạo ra, request được truyền đi, và script tiếp tục
xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp tục.Mỗi lần request
được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi.

Ajax

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Ajax

Similar to Ajax (20)

Ajax