Bài giảng Phát triển ứng dụng web Bài 7 Lê Đình Thanh

– Hoạt động của ứng dụng web với Ajax – So sánh web truyền thống với Ajax web – Các trình duyệt hỗ trợ Ajax – Ajax engine – Sử dụng Ajax với gửi/nhận text – Sử dụng Ajax với gửi/nhận xml

Trang 1

Lê Đình Thanh

Bộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tin Trường Đại học Công nghệ, ĐHQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com

Mobile: 0987.257.504

Bài giảng

PHÁT TRIỂN ỨNG DỤNG WEB

Trang 2

Xử lý trang web nâng cao

Bài 7

Trang 3

Nội dung

• AJAX

– AJAX là gì?

– Hoạt động của ứng dụng web với Ajax

– So sánh web truyền thống với Ajax web

– Các trình duyệt hỗ trợ Ajax

– Ajax engine

– Sử dụng Ajax với gửi/nhận text

– Sử dụng Ajax với gửi/nhận xml

• Viết lại URL

– Viết lại URL là gì?

– Lợi ích của viết lại URL

– Thực hành viết lại URL

Lê Đình Thanh, Bài giảng Phát triển ứng dụng web

Trang 4

AJAX là gì?

• AJAX (Asynchronous Javascripts and XML) là

một kỹ thuật kết hợp một số công nghệ web để xây dựng các ứng dụng web mà

tương tác giữa người dùng với ứng dụng được thực hiện không đồng bộ Các công nghệ bao gồm:

– Hiển thị dựa trên chuẩn sử dụng HTML và CSS

– Tương tác động sử dụng DOM

– Trao đổi và xử lý dữ liệu sử dụng XML, text

Trang 5

Web truyền thống <> Ajax Web

Trang 6

Web truyền thống

• Yêu cầu của người dùng được gửi trực tiếp từ

browser đến Web server thông qua HTTP request

• Khi nhận được HTTP request, Web server xử lý yêu cầu, sinh ra trang HTML mới, rồi gửi toàn bộ trang HTML (chứa HTML và CSS) mới đến

browser Browser xóa trang cũ và hiển thị trang mới.

• Từ khi gửi yêu cầu đi, người dùng không được làm thêm bất kỳ thao tác gì cho đến khi trang

Trang 7

Hoạt động của web truyền thống

:Web client :Web Server

Trang 8

Web truyền thống: Hạn chế

• Khi người dùng thao tác thì server “nghỉ”

và ngược lại

– Lãng phí thời gian, hiệu quả sử dụng thấp

– Người dùng phải vừa làm vừa đợi: gửi yêu cầu → đợi → nhận kết quả → gửi yêu cầu → đợi → … ⇒ Người dùng phải đợi lâu nếu yêu cầu xử lý lớn và server mất nhiều thời gian

xử lý + Hiển thị không liên tục, “nhấp nháy” gây khó chịu (! HCI).

• Toàn bộ trang HTML mới được gửi từ

server đến client

Trang 9

Ajax Web

giao tiếp trung gian giữa browser với web server

– Browser gửi yêu cầu đến Ajax engine bằng lời gọi Javascript

– Ajax engine chuyển yêu cầu của Client thành HTTP request và gửi cho web server

– Web server xử lý yêu cầu rồi gửi kết quả cho Ajax engine ở dạng XML

– Ajax engine biên dịch XML thành HTML và gửi HTML cho browser

• Một yêu cầu của người dùng chưa cần được giải quyết xong thì người dùng đã có thể đưa ra yêu cầu khác

– Trao đổi giữa Browser với Ajax engine và giữa Ajax engine với Server để thực hiện các yêu cầu diễn ra

Trang 10

Hoạt động của Ajax web

Đáp ứng 2 Đáp ứng 2

Yêu cầu 3

Đáp ứng 3 Đáp ứng 3

Trang 11

Ajax Web: Ưu điểm

• Người dùng và server thực hiện một cách song hành

– Không lãng phí thời gian, hiệu quả sử dụng cao

– Người dùng không phải vừa làm vừa đợi

– Hiển thị liên tục, không gây khó chịu (HCI).

• Chỉ phần khác biệt của trang mới so với trang cũ mới được gửi từ server đến client

– Lượng thông tin trao đổi giữa client-server tối thiểu ⇒ tiết kiệm chi phí (thời gian,

băng thông) truyền thông.

Trang 12

Vì sao dùng Ajax

giao tiếp của nó với người dùng diễn

ra như giao tiếp của ứng dụng Winform với người dùng: liên tục – hiệu quả trong sử dụng và trong

truyền thông

Trang 13

Sử dụng AJAX

• Sử dụng Ajax Engine (đối tượng

yêu cầu đến server và lấy dữ liệu về

từ server.

• Sau khi XmlHttpRequest nhận được

để sửa đổi trang web trên client với

dữ liệu mới nhận được.

Trang 14

Lấy đối tượng XMLHttpRequest

function getXmlHttpObject() { var xmlHttp = null;

try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest();

} catch (e) { // Internet Explorer try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {

try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) { alert(“Trinh duyet khong ho tro AJAX!");

Trang 15

if(xmlHttp readyState =

= 4 ) { // Đã nhận đủ trả lời

từ server

if ( xmlHttp.status ==

200 ) { //Đã thực hiện thành công trên server

//Dùng javascript để sửa đổi trang

} }

readyState Ý nghĩa

Trang 16

XMLHttpRequest onreadystatech ange

Là m t con tr hàm không đ i, đ ộ ỏ ố ượ c kích ho t m i khi ạ ỗ thu c tính readyState thay đ i ộ ổ

xmlHttp onreadystatechange = tenHamXuly; function tenHamXuly() {}

Ho c ặ

xmlHttp onreadystatechange = function() {

Trang 17

Gửi yêu cầu lên server theo GET

xmlHttp.open(“GET”, url?params, asynchronous);

Trang 18

Gửi yêu cầu lên server theo POST

xmlHttp.open(“POST”, url, asynchronous); xmlHttp.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded"); xmlHttp.send(params);

Ví d : ụ

xmlHttp.open(“POST", " time.php", true);

xmlHttp.setRequestHeader("Content-Type",

Trang 19

N i dung d ng ộ ạ text/html do server g i v ử ề

Mu n s d ng thu c tính này, server ph i thi t l p thu c ố ử ụ ộ ả ế ậ ộ

tính C ontentType c a trang là ủ text/html (m c đ nh) ặ ị

Trang 20

Server gửi dữ liệu dạng text

$time = 100;

echo $time;

Trang 21

Trình duyệt nhận và xử lý dữ liệu dạng text

xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 &&

xmlHttp.status==200) { document.write(xmlHttp.responseText); }

}

Trang 22

XMLHttpRequest responseXML.documentElement

N i dung d ng ộ ạ XML do server g i v ử ề

Mu n s d ng thu c tính này, server ph i thi t l p thu c ố ử ụ ộ ả ế ậ ộ

tính C ontentType c a trang là ủ text/xml

Trang 23

Server gửi dữ liệu dạng XML

echo "<?xml version='1.0' encoding=‘UTF-8'?>“; echo "<company>“;

echo "<compname>$companyname</compname>“; echo "</company>“;

Trang 24

} }

Trang 25

Thực hành kỹ thuật AJAX

Ngày nay, nh ng ng d ng web cao c p (nh các trang c a ữ ứ ụ ấ ư ủ

Google) đ u đ c làm theo k thu t AJAX ề ượ ỹ ậ

Đ s d ng t t k thu t AJAX ể ử ụ ố ỹ ậ

N m v ng n i dung m t trang web ắ ữ ộ ộ

Hi u rõ vai trò “trình thông d ch” c a web browser ể ị ủ

Hi u mô hình đ i t ng tài li u DOM ể ố ượ ệ

S d ng javascript đ truy c p các đ i t ng HTML ử ụ ể ậ ố ượ

Trang 26

jQuery

Trang 27

• jQuery là thư viện javascipt giúp cho việc lập trình javascript trở nên đơn giản, hiệu quả hơn

Trang 30

Ví dụ

• $("#test").hide()

document.getElementById(“test”).hide();

Trang 31

Ví dụ

• $("p").hide()

arr = document.getElementsByTagName(“p”); for (i = 0; i <arr.length; i++)

arr[i].hide();

Trang 32

Ví dụ

• $(".test").hide()

arr = document.getElementsByTagName(“*”); for (i = 0; i <arr.length; i++)

if (arr[i].className == “test”)

Trang 34

Xử lý sự kiện với jQuery

Kích hoạt sự kiện Bắt và xử lý sự kiện

Trang 35

dblclick keydown change resize

mouseenter keyup focus scroll

Trang 38

Thao tác DOM/HTML với

jQuery

Đọc, thay đổi thuộc tính Thêm, xóa đối tượng

Trang 39

Đọc thuộc tính đối tượng tài

Trang 43

Đặt thuộc tính đối tượng tài

liệu

• Đặt nội dung văn bản của đối tượng tài liệu

$(selector).text(“new text”);

$(selector).text(function(i, oldText) {return newText});

• Đặt nội dung HTML của đối tượng tài liệu

$(selector).html(“new html”);

$(selector).html(function(i, oldHtml) {return newHtml});

• Đặt giá trị của đối tượng tài liệu

$(selector).val(“new value”);

$(selector).val(function(i, oldValue) {return newValue});

• Đặt giá trị thuộc tính của đối tượng tài liệu

$selector().attr(“attr1”, “new value”);

$selector().attr({“attr1”:“new value1”, “attr2”:“new value2”, …});

$(selector).attr(“attribute”, function(i, oldValue) {return newValue});

Trang 44

Ví dụ đặt thuộc tính

$(document).ready(function(){

$("#btn1").click(function(){ $("#test1").text("Hello world!"); });

$("#btn2").click(function(){ $("#test2").html("<b>Hello world!

<p id="test2">This is another paragraph.</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

Trang 45

<button>Change href and title</button>

Trang 47

Thêm đối tượng con

• Thêm đối tượng con vào đầu (thành con cả)

$(selector).prepend(child1 [, child2, child3, …])

• Thêm đối tượng con vào cuối (thành con út)

$(selector).append(child1 [, child2, child3, …])

$("p").append(txt1,txt2,txt3); // Append the new elements

Trang 48

Thêm đối tượng anh/em

• Thêm nút anh liền trước

$(selector).before(presibling1 [, presibling2, presibling3, …])

• Thêm đối tượng con vào cuối (thành con út)

$(selector).after(nextsibling1 [, nextsibling2, nextsibling3, …])

• Ví dụ 1

$("p").before" <b>Appended text</b>.", "hello");

• Ví dụ 2

var txt1="<p>Text.</p>"; // Create element with HTML

var txt2=$("<p></p>").text("Text."); // Create with jQueryvar txt3=document.createElement("p"); // Create with DOMtxt3.innerHTML="Text.";

$("p").after(txt1,txt2,txt3); // Append the new elements

Trang 49

Xóa đối tượng

• Xóa tất cả các đối tượng con của đối tượng được chọn

$(selector).empty();

• Xóa đối tượng được chọn và tất cả

các đối tượng con của đối tượng được chọn

$(selector).remove();

Trang 50

Xử lý CSS với jQuery

Trang 51

Đọc và thay đổi từng thuộc tính CSS

• Đọc thuộc tính CSS

$(selector).css(" propertyname ");

• Đặt thuộc tính CSS

$ (selector).css({" propertyname ":" value ","

propertyname ":" value ", });

Trang 53

Trang 54

Xử lý AJAX với jQuery

get, post, load, ajax

Trang 55

jQuery AJAX Get

$.get( URL, [callback] );

• Gửi yêu cầu lên server theo phương thức GET và nhận kết quả về theo AJAX, sau đó thực hiện hàm callback

– url: Địa chỉ tệp được yêu cầu

– callback: Hàm được gọi sau khi tải xong Hàm có hai tham số là nội dung, trạng thái trả về

Trang 56

Ví dụ jQuery AJAX Get

• Yêu cầu nội dung trang "clone.php? v1=100&v2=101“ với các tham số theo phương thức GET, đặt nội dung nhận được cho đối tượng tài liệu có định danh test1.

$.get("clone.php?v1=100&v2=101", function (data, status) {

Trang 57

jQuery AJAX Post

$.post( URL, [data], [callback] );

• Gửi yêu cầu lên server theo phương thức POST và nhận kết quả về theo AJAX, sau

đó thực hiện hàm callback

– data: Các cặp tham số/giá trị được gửi

– callback: Hàm được gọi sau khi tải xong

Hàm có hai tham số là nội dung, trạng thái

trả về

Trang 58

Ví dụ jQuery AJAX Post

• Yêu cầu nội dung trang "clone.php” với các tham số v1=10, v2=12 theo phương thức POST, đặt nội dung nhận được cho đối tượng tài liệu có định danh test2.

$.post("clone.php", {v1: "10", v2: "12”}, function (data, status) {

Trang 59

jQuery AJAX Load

$( selector ).load( URL, [data], [callback] );

• Tải nội dung từ URL và đặt vào đối tượng được chọn (Tương đương gửi yêu cầu lên server theo phương thức GET và nhận kết quả về theo AJAX, sau đó đặt kết quả trả về vào innerHTML của đối tượng được chọn), sau đó thực hiện hàm callback

– data: Các cặp tham số/giá trị được gửi cùng url

– callback: Hàm được gọi sau khi tải xong Hàm có ba tham

số là nội dung, trạng thái trả về và đối tượng

XMLHttpRequest đã thực hiện các công việc của hàm load

Trang 60

Ví dụ jQuery AJAX Load

• Tải nội dung tệp văn bản “text.txt” và đặt vào innerHTML của đối tượng có định

danh test3

$("#test3").load("text.txt");

• Tải nội dung tại “clone.php?

v1=8&v2=9” và đặt vào innerHTML của đối tượng có định danh test4

$("#test4").load("clone.php", {v1: "8", v2:

Trang 61

Ví dụ jQuery AJAX Load

• Tải nội dung tại “clone.php?v1=8&v2=9” và đặt vào innerHTML của đối tượng có định danh test5, sau đó thông báo trạng thái

$("#test5").load("clone.php", {v1: "8", v2: "9“ },

function(content, statusTxt, xhr) { if(statusTxt=="success")

alert("External content loaded successfully!");

if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText);

} );

Trang 62

jQuery ajax

• $.ajax(url [, settings ]);

• Settings:

– type: POST/GET/HEAD, …

– data: {Các cặp tham số/giá trị}

– contentType: Kiểu nội dung và mã hóa được sử dụng

– dataType: Kiểu dữ liệu muốn nhận về từ server (xml, json, script, html)

– success: function (data, status, jqXHR) { },

– error: function (jqXHR, status, errorThrown) {}

Trang 64

Viết lại URL

Trang 65

Viết lại URL là gì?

• Viết lại URL (URL Rewrite) là sửa đổi URL do

web client yêu cầu trước khi web server

http://www.example.com/Blog/Posts.php?Year=2006&Month=12&Day=19 http://www.example.com/Blog/2006/12/19/

HTTP Response HTTP Request

Trang 66

Tại sao viết lại URL?

• Tạo liên kết

– gọn gàng, dễ nhớ, thân thiện với người dùng

– thân thiện với các search engines

• Che được chuỗi truy vấn đối với người dùng

• Cho site vẫn sử dụng được URL khi thay đổi

công nghệ phía dưới

Trang 67

Viết lại URL như thế nào?

hiện viết lại

URL dựa trên

Trang 68

Luật viết lại URL

(RewriteCond TestString CondPattern ([c-flags])?)*

RewriteRule (!)? Pattern Substitution ([r-flags])?

URLi

URLi+1

Luật i

Trang 69

thức chính quy

• Cú pháp biểu thức chính quy:

Bất kỳ ký tự nào

[chars] Bất kỳ ký tự nào thuộc “chars”

[^chars] Bất kỳ ký tự nào khác các ký tự thuộc “chars”

(text) Nhóm văn bản

text1|text2 text1 hoặc text2

? 0 hoặc 1 lần xuất hiện của văn bản phía trước

* 0 hoặc N lần xuất hiện của văn bản phía trước (N > 0)

+ 1 hoặc N lần xuất hiện của văn bản phía trước (N > 1)

^ Bắt đầu liên kết

$ Kết thúc liên kết

\char ký tự đặc biệt char

Trang 70

• TestString, Substitution là xâu ký tự

có thể chứa các cấu trúc mở rộng sau:

$N (0 <= N <= 9) Tham chiếu ngược đến nhóm thứ N trong Pattern

%N (0 <= N <= 9) Tham chiếu ngược đến nhóm thứ N trong CondPattern liền trước

${mapname:key|default} Giá trị ánh xạ

%{ NAME_OF_VARIABLE } Biến server

Trang 71

• TIME_YEARTIME_MONTIME_DAYTIME_HOURTIME_MINTIME_SECTIME_WDAYTIME

Trang 72

Hàm ánh xạ

• RewriteMap MapName MapType : MapSource

• Ví dụ

RewriteMap product2id txt:productmap.txt

RewriteRule ^/product/(.*)$ /prods.php?id=${product2id:$1|NOTFOUND} [PT]

Trang 73

Trang 74

• r-flags:

nocase| NC Không phân biệt hoa thường khi so sánh

chain|C Tạo chuỗi luật với luật tiếp theo Nếu một luật không khớp, các luật phía sau trong chuỗi sẽ bị bỏ qua.

last|L Dừng quá trình viết lại, không áp dụng thêm các luật khác

next|N Quay về luật thứ nhất

forbidden|F Trả về response có mã 403 FORBIDDEN

gone|G Trả về response có mã 410 GONE

redirect|R[= code ] Chuyển hướng

skip|S= num Bỏ qua num luật tiếp sau nếu luật hiện tại khớp

Tiêu đề	Xử Lý Trang Web Nâng Cao
Tác giả	Lê Đình Thanh
Trường học	Trường Đại Học Công Nghệ, Đhqghn
Chuyên ngành	Mạng và Truyền Thông Máy Tính
Thể loại	Bài Giảng

Định dạng
Số trang	77
Dung lượng	271,86 KB