17/01/2014 10:22:07 PM

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

Bài 04 Lập trình bằng JavaScript phía client và các đối tượng HTTP

4.5. JavaScript

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

4.6.Các đối tượng HTTP

4.6.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.6.2.Phân tích các đặc tính của XMLHttpRequest

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

Phương thức	Thuộc tính	Ý nghĩ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		Trả về biến kiểu String chứa header của HTTPrequest
GetResponseHeader	Header	Tương tự phương thứ trên

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

Hì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.6.2.3 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.6.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>

function handleResponse() {

alert('this function is called from server.html');

}

</script>

<body>

<h1>Remote Scripting with an IFRAME</h1>

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>

window.parent.handleResponse();

</script>

<body>

</body>

</html>

4.6.3.1Tổ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.6.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">

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

<input type="button" value="Start Basic Asynchronous Request"

onclick="startRequest();"/>

</form>

</body>

</html>

4.6.5. DOM Level 3 và DOM

4.6.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.6.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.6. Gửi các request và xử lý response

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

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

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

a.W3C 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ị.

1.6.6.2.2 W3C 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 đó.

b. 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.6.7. 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.6.7.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.6.7.2 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

» Tin mới nhất: