Đọc truyện AJAX Toàn Tập

♥ AzTruyen.Top - Trang đọc truyện hoàn toàn miễn phí!

AJAX Toàn Tập

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

AJAX Toàn Tập - Bài 04

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.

Bài 4 (tiếp): Các công nghệ trong AJAX - DOM - Làm việc với DOM bằng JavaScript.

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.

Trích:

<html>

<head>

</head>

<body>

<p id=’hello’>hello</p>

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

Trích:

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

Trích:

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[i].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.

Trong bài 5 anh em ta sẽ học về: Tìm kiếm một DOM Node, Tạo DOM Node.

AJAX Toàn Tập - Bài 05

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

Trích:

hay

Trích:

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 :

Trích:

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:

Trích:

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

AJAX Toàn Tập - Bài 06

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:

Trích:

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:

Trích:

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:

Trích:

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

AJAX Toàn Tập - Bài 06

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.

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:

Trích:

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:

Trích:

empty.style.border=”solid green 2px”;

empty.style.width=”200px”;

Sử dụng thuộc tính innnerHTML

Trích:

function addListItemUsingInnerHTML(el,text){

el.innerHTML+=”<div class=’programmed’>”+text+”</div>”;

}

AJAX Toàn Tập - Bài 07

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

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

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:

Trích:

<?xml version=”1.0″?>

<ProductName>Shimano Calcutta </ProductName>

</Product>

<ProductName>Bantam Lexica</ProductName>

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

AJAX Toàn Tập - Bài 08

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:

Trích:

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.

Trích:

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:

Trích:

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.

AJAX Toàn Tập - Bài 09

Bài 9: Công nghệ trong AJAX - Javascript

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

Trích:

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:D) của Ajax, JavaScript là chất kết dính các thành phần lại với nhau.

Học Javascript tiếng việt:

Trích:

http://crazivn.com/uds_JS.rar

Học bằng tiếng Anh:

Trích:

http://crazivn.com/Oreilly.Java.Script.And.DHTML.Cookbook.eBook-LiB.rar

Như vậy là chúng ta đã học xong tất cả các công nghệ trong AJAX, từ bài sau chúng ta bắt đầu nghiên cứu về Đối tượng XMLHttpRequest. và sau đó có lẽ sẽ là: Gửi các request và xử lý response.

AJAX Toàn Tập - Bài 09

Bài 9: Công nghệ trong AJAX - Javascript

Trích:

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

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:D) của Ajax, JavaScript là chất kết dính các thành phần lại với nhau.

Học Javascript tiếng việt:

Trích:

http://crazivn.com/uds_JS.rar

Học bằng tiếng Anh:

Trích:

http://crazivn.com/Oreilly.Java.Script.And.DHTML.Cookbook.eBook-LiB.rar

AJAX Toàn Tập - Bài 10

Bài 10: Đối tượng XMLHttpRequest - Giới thiệu.

Bâ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:

Trích:

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 sau chúng ta sẽ đi vào phân tích các đặc tính của XMLHttpRequest.

AJAX Toàn Tập - Bài 11

Bài 11: Đối tượng XMLHttpRequest - Phân tích các đặc tính - Phương thức và thuộc tính

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, …).

AJAX Toàn Tập - Bài 12

Bài 12: Đối tượng XMLHttpRequest - Phân tích các đặc tính - Sự tương tác

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.

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:

Trích:

<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 đó:

Trích:

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:

Trích:

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:

Trích:

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…

Bài sau chúng ta sẽ phân tích “Các phương thức GET và POST”.

AJAX Toàn Tập - Bài 13

Bài 13: Đối tượng XMLHttpRequest - Phân tích các đặc tính - GET & POST

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:

Trích:

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.

AJAX Toàn Tập - Bài 15

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.

Ví dụ về một Request đơn giản

Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi tạo một request bất đồng bộ gửi tới server. Server sẽ đáp ứng bằng cách gửi một file text đơn giản. Response được hiển thị nội dung trên một cửa sổ alert.

simpleRequest.html

Trích:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>Simple XMLHttpRequest</title>

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>

</body>

</html>

File response của server, simpleResponse.xml, chứa một dòng text duy nhất. Khi nhấn vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background (còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response của server cần vài giây để trả về, trình duyệt sẽ không thể đáp ứng người dùng trong thời gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục làm việc trong khi server tiếp tục làm việc với request trước trong background.

Khả năng liên lạc với server; không có lỗi ngắt; với luồng làm việc của người dùng đã mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như chứng thực dữ liệu nhập từ người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm chứng mà không cần ngắt quãng quá trình điền dữ liệu vào form nhập. Nếu nhập dữ liệu không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được gửi đến server để xử lí, điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu trên server, nội dung của form sẽ không được nạp lại sau một form đệ trình không thành công.

Vấn đề bảo mật:

Bất kỳ một công nghệ nào dựa trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt.

Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và cho phép người dùng sự lựa chọn có tiếp tục với request đó nữa hay không. Trình duyệt Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript.

Bài sau chúng ta sẽ cùng nhau thảo luận về: DOM Level 3 và DOM để kết thúc phần: Đối tượng XMLHttpRequest.

Đồng thời có tổng kết luôn.

AJAX Toàn Tập - Bài 16

Bài 16: Đối tượng XMLHttpRequest - DOM Level 3 và DOM.

DOM Level 3

Các giải pháp đã thảo luận ở trên không phải là các chuẩn. Mặc dù XMLHttpRequest đã được hỗ trợ rất rộng, song vẫn có thể thấy một số sự khác biệt với từng trình duyệt. Nhiều người tin rằng Ajax dựa vào sự hỗ trợ của W3C; tuy nhiên thực tế không phải vậy. W3C đã bắt đầu chú trọng vào điều này và 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. Phiên bản 1.0 được giới thiệu vào tháng 4/2004, nhưng hiện thời chưa trình duyệt nào thực hiện theo nó

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. Một điều quan trọng cần lưu ý là 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. Ban đầu DOM được thiết kế để làm cho JavaScript linh động với các trình duyệt, sau đó nó phát triển ra khỏi giới hạn này.

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 vi 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. Có thể coi DOM như một cây biểu diễn dữ liệu và cấu trúc của trang web, mặc dù thực tế nó có thể không theo cách như vậy.

Simple Table

Trích:

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

Có thể biểu diễn theo DOM của bảng trên. 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. Không có DOM, không thể thực thi được Ajax. DOM không chỉ cho phép duyệt và chỉnh sửa nội dung, mà còn làm cho trang web trở thành các trang động.

Kết luận cho các loạt bài về: Đối tượng XMLHttpRequest

Chúng ta vừa xem xét các kỹ thuật cơ bản và là “trái tim” của Ajax, đối tượng XMLHttpRequest.Với sự kết hợp giữa JavaScript và một số thao tác DOM, Ajax cho phép một mức độ tương tác chưa từng có từ trước đến nay. Với XMLHttpRequest ta không còn đợi quá trình tái nạp trang web và sự đồng bộ với server nữa.

Trong phần sau chúng ta sẽ cùng nhau nghiên cứu về: Gửi các request và xử lý response

Sau đó mới đến: Kỹ thuật lập trình với AJAX.

AJAX Toàn Tập - Bài 17,18,19

Bài 17,18,19: Gửi các request và xử lý response - Giao thức HTTP

Bài 17:

Trước hết chúng ta cùng tìm hiểu hoạt đông của giao thức HTTP truyền thống - Hypertext Transfer Protocol, xem xét các bản tin – message của giao thức này. Thay vì quan tâm đến các bit hay byte, chúng ta để ý đến các từ ngữ (thông báo) được xác định trong đặc tả HTTP và các quy tắc kết hợp chúng lại với nhau.

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.

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.

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.

Trích:

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

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.

Phương thức được xác định trên dòng đầu tiên của Request-Line. HTTP định nghĩa tất cả là 8 phương thức. Một HTTP server chỉ được yêu cầu hỗ trợ các phương thức GET và HEAD; nếu chúng hỗ trợ các phương thức HTTP khác, sự hỗ trợ đó phải được gắn với các quy tắc của HTTP. Đặc tả HTTP cũng có các mở rộng để các phương thức khác có thể được bổ sung trong tương lai.

Bảng HTTP Method (Xem file attach bài này)

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. Ví dụ, Request-uri là /, chỉ ra một request cho tài nguyên gốc. Cho các request không yêu cầu một tài nguyên cụ thể (như là TRACE request hay trong một số trường hợp cả OPTIONS request), client có thể dùng một dấu * cho Request-uri.

Mục cuối cùng trong Request-Line là phiên bản HTTP. Như trong ví dụ, phiên bản HTTP là 1.1 chứa trong đoạn text HTTP/1.1.

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 và bất kỳ header nào. Nếu request bao gồm một message body, phần body đi sau một dòng trống. 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. Không có dòng trống, server nhận các message sẽ không biết được các header khác nữa có tiếp tục được truyền không.

Bài 18

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.

Dòng bắt đầu với phiên bản cao nhất của HTTP mà server hỗ trợ.

Trích:

HTTP/1.1 200 OK

Date: Sun, 08 Oct 2000 18 12 GMT

Server: Apache/1.3.6 (Unix)

Keep-Alive: timeout=5, max=120

Connection: Keep-Alive

Content-Type: text/html<html>…

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.

Phân loại HTTP Status Code: (Xem file attach)

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 (ascii character 8). Ví dụ sau là của User-Agent header:

Trích:

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

Nếu một message header chứa một chuỗi giá trị phân tách bởi dấu “,”; ta có thể tách ra thành các dòng riêng, như ví dụ sau tách các giá trị của Accept-Encoding:.

Trích:

GET / HTTP/1.1

Accept: */*

Accept-Language: en-us

Accept-Encoding: gzip

Accept-Encoding: deflate

User-Agent: Mozilla/4.0

(compatible; MSIE 5.5; Windows NT 5.0)

Host: www.ft.com

Connection: Keep-Alive

Bảng sau thể hiện các HeaderField, phạm vi áp dụng của chúng trong các request hay response, hay trong message body (entity) đi kèm với request hay response.

Bài 19

AJAX Toàn Tập - Bài 20

Bài 20: Xử lí các response của server - Dùng thuộc tính innerHTML tạo nội dung động

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.

Dùng thuộc tính innerHTML

để tạo nội dung động

Truy cập vào response như một đoạn text đơn giản không thật mềm dẻo và linh động. Các đoạn text không có cấu trúc và rất khó phân tách một cách logic với JavaScript. Và 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. Thuộc tính innerHTML không phải là một chuẩn, đầu tiên nó được đưa ra trong Internet Explorer và sau đó xuất hiện trong nhiều trình duyệt khác. 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.

Ví dụ sau sẽ chỉ ra cách dùng hàm tìm kiếm sử dụng XMLHttpRequest, các thuộc tính responseText, và innerHTML của các phần tử HTML. Khi nhấn vào nút bấm sẽ khởi tạo một thao tác tìm kiếm trên server. Server sẽ trả về một bảng kết quả. Trình duyệt xử lí response bằng cách thiết lập thuộc tính innerHTML của phần tử div bằng giá trị của thuộc tính responseText của XMLHttpRequest.

Khi nhấn vào nút tìm kiếm, sẽ gọi đến hàm startRequest, đầu tiên nó gọi đến hàm createXMLHttpRequest để tạo một thể hiện của XMLHttpRequest.

Hàm startRequest thiết lập hàm callback với hàm handleStateChange.

Hàm startRequest tiếp tục sử dụng phương thức open() để thiết lập phương thức yêu cầu (GET) và tài nguyên đích cũng như việc thực hiện yêu cầu không đồng bộ.

Các yêu cầu sau đó được gửi bằng phương thức send() của XMLHttpRequest.

Mỗi lần trạng thái nội tại của XMLHttpRequest thay đổi, hàm handleStateChange được gọi. Mỗi lần nhận một response (được chỉ báo bởi thuộc tính readyState có giá trị là 4), thuộc tính innerHTML của các phần tử div được thiết lập bằng thuộc tính responseText của XMLHttpRequest.

Ví dụ Code xem bài viết dưới.

innerHTML.html

PHP Code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<head>

<title>Using responseText with innerHTML</title>

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”, “innerHTML.xml”, true);

xmlHttp.send(null);

}

function handleStateChange() {

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

document.getElementById(“results”).innerHTML = xmlHttp.responseText;

}

</script>

</head>

<body>

</form>

</body>

</html>

innerHTML.xml

PHP Code:

<tbody>

<tr>

<th>Activity Name</th>

<th>Location</th>

</tr>

<tr>

<td>Waterskiing</td>

</tr>

<tr>

<td>Volleyball</td>

<td>East Court</td>

</tr>

<tr>

<td>Hiking</td>

<td>Trail 3</td>

</tr>

</tbody>

</table>

Cũng phải nói thêm một chút: Dùng responseText và innerHTML làm đơn giản quá hóa việc chỉnh sửa nội dung trang web động. Cách tiếp cận này cũng có những nhược điểm, đó là innerHTML không phải là một thuộc tính chuẩn của HTML.

Tuy nhiên hầu hết các trình duyệt đều hỗ trợ thuộc tính này!!!

Đây là 7 trang và demo của nó mà theo tôi là tuyệt vời nhất để học thực hành AJAX. Các bạn có thể download hoặc copy script từ những trang này.

http://leftlogic.com/info/articles/jquery_spy

http://leftlogic.com/jquery_spy/spy.html

http://prototype-window.xilinus.com/

http://prototype-window.xilinus.com/samples.html

http://www.masugadesign.com/the-lab/scripts/unobtrusive-ajax-star-rating-bar/

http://www.dustindiaz.com/ajax-contact-form/

http://www.dustindiaz.com/testJax/

http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/

http://www.ajaxlessons.com/demo/workshop2.html

http://techfoolery.com/archives/2006/08/11/2021/

http://techfoolery.com/examples/scroller/

http://orangoo.com/labs/GreyBox/

http://orangoo.com/labs/greybox/examples.html

Đây là file hướng dẫn làm project về ajax!

Chỉ là bước đầu về ajax .. không dùng server side script, chỉ là html + javascript và kiến thức về xml thôi.

Post thêm thằng XML & XML DOM + Ví dụ cho đủ bộ để có thể làm AJAX một cách đơn giản.

Click to save

Bạn đang đọc truyện trên: AzTruyen.Top

Trước Sau

Tags: