PHÁT TRIỂN ỨNG DỤNG WEB T TRIỂN ỨNG DỤNG WEB 2 Xử lý trang web nâng cao Bài 7 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 3 Nội dung • AJAX

1

Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính

Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN

E-mail: [email protected], [email protected]: 0987.257.504

Bài giảng

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

2

Xử lý trang web nâng cao

Bài 7

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

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

• jQuery– jQuery là gì, vì sao sử dụng jQuery? – Xử lý sự kiện HTML– Thao tác HTML/DOM– Thao tác CSS– Xử lý AJAX– Hiệu ứng và hoạt cảnh– Các tiện ích

• 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


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– Thu nhận dữ liệu không đồng bộ sử dụng

XMLHttpRequest– Kết hợp các công nghệ sử dụng JavaScript


5

Web truyền thống <> Ajax Web


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 HTML mới được gửi đến client: mỗi yêu cầu phải được giải quyết dứt điểm trước khi có yêu cầu tiếp theo = đồng bộ.


7

Hoạt động của web truyền thống:Web client :Web Server

Yêu cầu 1

Đáp ứng 1

Yêu cầu 2

Đáp ứng 2

Yêu cầu 3

Đáp ứng 3

Xử lý

Xử lý

Xử lý

Sử dụng

Sử dụng

Sử dụng


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

– Không cần thiết vì có thể nhiều chi tiết trên trang mới vẫn như trang cũ

– Lượng thông tin trao đổi giữa client-server lớn ⇒ chi phí truyền thông (thời gian, băng thông) lớn.


9

Ajax Web

• Ajax engine được cài trên client, làm nhiệm vụ 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 không đồng bộ.


10

Hoạt động của Ajax web:Web Client :Web Server

Xử lý

Xử lý

Xử lý

Sử dụng

:Ajax engine

Yêu cầu 1

Đáp ứng 1

Yêu cầu 2 Yêu cầu 2

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

Yêu cầu 3

Yêu cầu 3

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


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.


12

Vì sao dùng Ajax

– Để tạo ra các ứng dụng web mà 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


13

Sử dụng AJAX

• Sử dụng Ajax Engine (đối tượng Javascript XMLHttpRequest) để gửi yêu cầu đến server và lấy dữ liệu về từ server.

• Sau khi XmlHttpRequest nhận được dữ liệu từ server, sử dụng javascript để sửa đổi trang web trên client với dữ liệu mới nhận được.


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!"); }

} }

return xmlHttp; }


15

XMLHttpRequest::readyState

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

0 Ch a thi t l p yêu ư ế ậc uầ

1 Đã thi t l p yêu c uế ậ ầ

2 Đã g i yêu c uử ầ

3 Đang tr l iả ờ

4 Đã tr l i xongả ờ


16

XMLHttpRequest.onreadystatechange

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() { //Noi dung xu ly}


17

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

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

xmlHttp.send(null);

Ví d :ụxmlHttp.open("GET", "time.php?zone=7", true);xmlHttp.send(null);


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

"application/x-www-form-urlencoded");xmlHttp.send(“zone=7”);


19

XMLHttpRequest.responseText

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 ContentType c a trang là ủ text/html (m c đ nh)ặ ị


20

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

$time = 100;echo $time;


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

}}


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 ContentType c a trang là ủ text/xml


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


24

Trình duyệt nhận và xử lý XML

xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status=200) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML = xmlDoc.getElementsByTagName("compname")

[0].childNodes[0].nodeValue; }}


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ử ụ ể ậ ố ượHi u v c u trúc tài li u XMLể ề ấ ệ

Hi u v c ch truy n thông gi a web server v i ajax ể ề ơ ế ề ữ ớengine.


jQuery


jQuery

• 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

• Các tính năng– Thao tác HTML/DOM– Xử lý sự kiện HTML– Thao tác CSS– Xử lý AJAX– Hiệu ứng và hoạt cảnh– Các tiện ích


Cài đặt jQuery

• Download thư viện jQuery (tệp .js) tại jQuery.com

• Bao hàm tệp thư viện jQuery trong trang HTML<script type=“text/javascript”

src="jquery.js"></script>


Cú pháp jQuery

• jQuery cho phép chọn các đối tượng tài liệu rồi thực hiện hành động trên đối tượng được chọn

• Cú pháp: $(selector).action();• jQuery sử dụng bộ chọn như CSS


Ví dụ

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

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


Ví dụ

• $("p").hide()

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

arr[i].hide();


Ví dụ

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

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

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


Lưu ý

• Cần sử dụng jQuery khi toàn bộ mã trang đã được tải

$(document).ready(function(){

// All jQuery methods go here...

});


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

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


Xử lý sự kiện

• Kích hoạt sự kiện trên đối tượng tài liệu $(selector).eventName();• Bắt và xử lý sự kiện trên các đối tượng tài liệu

$(selector).eventName(function(args){ // action goes here!!});

Mouse Events Keyboard Events

Form Events Document/Window Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload


Ví dụ

• Xử lý sự kiện kích chuột trên nút bấm$("#test").click(function () {

alert(“hello!”);

});

<script type=“text/javascript”>function dotest() { alert(“hello!”);}

</script><input type = “button” id = “test” onclick = “javascript:dotest();”/>


Ví dụ

• Khi người dùng gõ enter trên một ô nhập thì chuyển tâm điểm sang ô nhập tiếp theo

$("#name").keyup( function(e) {

if (e.keyCode ==13) $("#email").focus();

});

<script type=“text/javascript”>function processKeyup(e) {

if (windows.event) e= window.event;if (e.keyCode == 13)

document.getElementById(“email”).focus(); }

</script><input type=“text” id = “name” onKeyup = “javascript:processKeyup(event);” />


Thao tác DOM/HTML với jQuery

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


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

• Đọc nội dung văn bản của đối tượng tài liệu$(selector).text();

• Đọc nội dung HTML của đối tượng tài liệu$(selector).html();

• Đọc giá trị của đối tượng tài liệu$(selector).val()

• Độc giá trị thuộc tính của đối tượng tài liệu $selector().attr(att);


Ví dụ đọc text và html<script>

$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

});</script>

<p id="test">This is some <b>bold</b> text in a paragraph.</p><button id="btn1">Show Text</button><button id="btn2">Show HTML</button>


Ví dụ đọc giá trị

<script>$(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); });});

</script><p>Name: <input type="text" id="test"

value="Mickey Mouse"></p><button>Show Value</button>


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

<script>$(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); });});

</script><p><a href="http://www.w3schools.com"

id="w3s">W3Schools.com</a></p><button>Show href Value</button>


Đặ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});


Ví dụ đặt thuộc tính<script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!

</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });});</script>

<p id="test1">This is a paragraph.</p><p id="test2">This is another paragraph.</p><p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">Set Text</button><button id="btn2">Set HTML</button><button id="btn3">Set Value</button>


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

<script>$(document).ready(function(){ $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3schools.com/jquery", "title" : "W3Schools jQuery Tutorial" }); });});</script><p><a href="http://www.w3schools.com"

id="w3s">W3Schools.com</a></p><button>Change href and title</button>


Ví dụ đặt thuộc tính với hàm gọi lại

<script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });

$("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); });

});</script>

<p id="test1">This is a <b>bold</b> paragraph.</p><p id="test2">This is another <b>bold</b> paragraph.</p><button id="btn1">Show Old/New Text</button><button id="btn2">Show Old/New HTML</button>


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

• Ví dụ 1$("p").prepend(" <b>Appended text</b>.", "hello");

• Ví dụ 2var 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").append(txt1,txt2,txt3); // Append the new elements


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ụ 2var 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


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();


Xử lý CSS với jQuery


Đọ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",...});


Thay đổi lớp CSS

• Thêm lớp CSS được áp dụng$(selector).addClass(“cssclass”);

• Bỏ lớp CSS được sử dụng$(selector).removeClass(“cssclass”);

• Bật/tắt lớp CSS được sử dụng$(selector).toggleClass(“cssclass”);


Ví dụ thay đổi lớp CSS

<script>$(document).ready(function(){ $("button").click(function(){ $("#div1").addClass("important blue"); });});</script><style type="text/css">.important { font-weight:bold; font-size:xx-large; }.blue { color:blue; }</style>

<div id="div1">This is some text.</div>


Xử lý AJAX với jQuery

get, post, load, ajax


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ề


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

$("#test1").html(data);});


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

– url: Địa chỉ tệp được yêu cầu– 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ề


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) {$("#test2").html(data); });


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

– url: Địa chỉ tệp được yêu cầu– 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


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: "9” });


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

);


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) {}– …


jQueryUI

• jQueryUI (http://jqueryui.com) là mở rộng của jQuery cho mục đích làm giao diện

– Tương tác: Kéo thả, thay đổi kích thước, lựa chọn, sắp xếp, …

– Wiget: autocomplete, menu, spinner, slider, …

– Hiệu ứng: hiển thị, hoạt cảnh, tô màu, … Tự

học


http://jqueryui.com/

Viết lại URL


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 phục vụ

• Rewrite Engine thực hiện viết lại URL– Apache: mod_rewrite

Web client

Web server

Rewrite

Engine

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


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

TRY IT YOURSELFhttp://www.tienphong.vn/xa-hoi/phong-su/602827/Vuot-thoat-mot-Con-Dao-chinh-minh.htmlhttp://www.tienphong.vn/xa-hoi/phong-su/602827/misc.htmlhttp://www.tienphong.vn/xa-hoi/phong-su/602827/does-not-matter.htmlhttp://www.tienphong.vn/xa-hoi/phong-su/602827/whatever-you-like.html


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

Luật 1

Luật 2

Luật n

URL0 (web client yêu cầu)

URL1

URL2

URLn-1

URLn (web server phục vụ)

Rewrite Engine thực hiện viết lại URL dựa trên tập luật được cấu hình trước

Luật cho biết cách sửa đổi URL, được viết theo biểu thức chính quy


Luật viết lại URL

(RewriteCond TestString CondPattern ([c-flags])?)*RewriteRule (!)? Pattern Substitution ([r-flags])?

URLi

URLi+1

Nếu URLi (không) khớp Pattern

[Nếu mọi TestString khớp CondPattern]URL

i+1 = Substitution

Luật i



• Pattern, CondPattern là xâu ký tự được viết theo biểu 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ảntext1|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



• 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


Biến server• HTTP_USER_AGENT

HTTP_REFERERHTTP_COOKIEHTTP_FORWARDEDHTTP_HOSTHTTP_PROXY_CONNECTIONHTTP_ACCEP

• DOCUMENT_ROOTSERVER_ADMINSERVER_NAMESERVER_ADDRSERVER_PORTSERVER_PROTOCOLSERVER_SOFTWARE

• API_VERSIONTHE_REQUESTREQUEST_URIREQUEST_FILENAMEIS_SUBREQHTTPS

• REMOTE_ADDRREMOTE_HOSTREMOTE_PORTREMOTE_USERREMOTE_IDENTREQUEST_METHODSCRIPT_FILENAMEPATH_INFOQUERY_STRINGAUTH_TYPE

• TIME_YEARTIME_MONTIME_DAYTIME_HOURTIME_MINTIME_SECTIME_WDAYTIME


Hàm ánh xạ• RewriteMap MapName MapType:MapSource

• Ví dụRewriteMap product2id txt:productmap.txt RewriteRule ^/product/(.*)$ /prods.php?id=${product2id:$1|NOTFOUND} [PT]

• productmap.txt#### Product to ID map file##

television 993stereo 198fishingrod 043basketball 418telephone 328



• c-flags:nocase| NC Không phân biệt hoa thường

khi so sánh TestString với CondPatternornext | OR Kết hợp theo logic OR với điều

kiện liền sau. “” Kết hợp logic AND với điều kiện liền

sau



• 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ácnext|NQuay về luật thứ nhấtforbidden|F Trả về response có mã 403 FORBIDDENgone|G Trả về response có mã 410 GONEredirect|R[=code] Chuyển hướngskip|S=num Bỏ qua num luật tiếp sau nếu luật hiện tại khớp


Một số chỉ thị khác

• RewriteBase URL-pathTiền tố của URL được dùng trong chỉ thị

RewriteRule thay thế đường dẫn tương đối

• RewriteEngine on|offBật hoặc tắt viết lại URL


Ví dụ

<IfModule mod_rewrite.c> Options +FollowSymLinks RewriteEngine onRewriteBase /labs/webapp-

development/cources/2013-spring-int3306-2/ RewriteRule ^std/[A-Za-z\-]+_(.*)\.html$

std/viewStd.php?std_id=$1

</IfModule>


Tiếp theoWeb Service


Documents

PHÁT TRIỂN ỨNG DỤNG WEB T TRIỂN ỨNG DỤNG WEB 2 Xử lý trang web nâng cao Bài 7 Lê Đình Thanh, Bài giảng Phát triển ứng dụng web. 3 Nội dung • AJAX