Hướng dẫn lập trình web bằng ASP.NET

Nếu async l à false thì các đoạn lệnh javascript kế tiếp sẽ không được thực hiện cho đến khi server gởi.. xong d ữ liệu về..[r]

Project1: ONLINE CLASS VIEWER Tài liệu hướng dẫn – Kỹ thuật AJAX

1 Giới thiệu

Bình thường, browser gởi yêu cầu lên server phải reload lại trang web, tức yêu cầu server gửi lại toàn trang web

Kĩ thuật Ajax (Asynchronous Javascript And Xml) giúp cho browser gửi yêu cầu đến

server nhận response mà khơng cần reload lại trang web Ngồi ra, request

thực cách bất đồng ( trình thực request, người dùng tương

tác với trang web)

Kĩ thuật sử dụng đối tượng XMLHttp để thực truy vấn lên server

2 Sử dụng lớp XMLHttp

Ta sử dụng javascript để thao tác đối tượng XMLHttp

2.1 Tạo đối tượng XMLHttp:

Bước cần phải thực việc sử dụng đối tượng XMLHttp phải tạo

Đối với trình duyệt khác việc tạo đối tượng khác

Đối với Internet Explorer (IE), đối tượng cài đặt dạng ActiveXObject

Do đó, để tạo nó, cần phải thực câu lệnh javascript sau:

var oXmlHttp = new ActiveXObject("Microsoft.XMLHttp");

Trong Microsoft.XMLHttp loại đối tượng ActiveXObject cần tạo

Tuy nhiên, có nhiều phiên IE khác nên để đối tượng XMLHttp có nhiều

phiên khác

Các phiên là:

 Microsoft.XMLHttp

 MSXML2.XMLHttp

 MSXML2.XMLHttp.3.0

 MSXML2.XMLHttp.4.0

 MSXML2.XMLHttp.5.0

Đối với trình duyệt : Mozilla Firefox, Safari, Opera câu lệnh javascript để tạo đối tượng XMLHttp giống nhau:

var oXmlHttp = new XMLHttpRequest();

Như vậy, để tạo đối tượng XMLHttp cho trình duyệt ta dùng đoạn javascript

2.2 Sử dụng đói tượng XMLHttp

Sau tạo đối tượng XMLHttp, ta bắt đầu thực việc tạo request đến server Bước gọi phương thức open, dùng để khởi tạo đối tượng Phương thức nhận vào tham số:

 Request Type: chuỗi cho biết loại request cần thực hiện, GET

POST

 URL: chuỗi URL cho biết địa cần gởi request đến

 Async: giá trị boolean, cho biết request có thực cách bất đồng

hay không

Tham số quan trọng, xác định cách thức mà javascript thực request Khi thiết lập true, request thực cách bất đồng bộ, đoạn lệnh

javascript tiếp tục thực mà không cần phải chờ response từ server Vì vậy,

ta cần phải cài đặt hàm xử lí kiện có nhiệm vụ chờ response từ server Nếu async false đoạn lệnh javascript không thực server gởi

xong liệu Nếu thời gian mà server trả response lâu gây bất tiện

người dùng khơng thể tương tác với trang web khoảng thời gian Vì vậy,

cách tốt gán cho async giá trị True gọi hàm open

Ví dụ: Để thực request yêu cầu server trả nội dung file info.txt nằm thư

mục chứa trang web server ta thực sau:

oXmlHttp.open("get", "info.txt", true);

Đối tượng XMLHttp có thuộc tính readyState, tham số thay đổi mà

request thực client nhận response từ server Thuộc tính có giá trị sau:

 (Uninitialized): Đối tượng đựơc tạo hàm open chưa gọi  (Loading): Hàm open gọi request chưa gởi

 (Loaded): Request vừa gởi

 (Interactive): Client nhận phần response từ server

 (Complete): Tất liệu server gởi client kết nối đóng lại

Mỗi lần thuộc tính readyState thay đổi giá trị kiện readystatechange phát

Trong đoạn lệnh trên, ta định nghĩa hàm onreadystatechange có chức hiển thị dialog box để thông báo

Bước cuối gọi hàm send(), hàm thực gởi request lên server Hàm có tham số, chuỗi chứa phần body request Đối với request loại GET khơng cần phần body này, đó, ta gọi hàm send với tham số NULL Đối với loại

request POST tham số khác null oXmlHttp.send(null);

Sau gọi hàm request gởi đi, tồn liệu nhận hàm onreadystatechange gọi đây, ta thực xử lí tương ứng với liệu

nhận Dữ liệu lấy thơng qua thuộc tính responseText

responseXML.

Thuộc tính responseText chứa chuỗi response responseXML chứa đối tượng

tài liệu XML Thuộc tính responseXML dùng loại liệu trả text/xml

Trong trường hợp yêu cầu nội dung file info.txt ví dụ ta cần dùng thuộc

tính responseText

Nếu sử dụng thuộc tính responseXML cần tìm hiểu thêm DOMDocument vì

responseXML đối tượng DOMDocument Có thể tìm thơng tin loại đối tượng MSDN 2003 với từ khóa “DOMDocument”

Một đoạn code ví dụ sử dụng thuộc tính responseXML

var xmldoc = httpRequest.responseXML;

var root_node = xmldoc.getElementsByTagName(root).item(0);

alert(root_node.firstChild.data);

Các vấn đề khác

Một vấn đề đặt là, sau thực hiện, request khơng thành cơng Chẳng

hạn như, ta yêu cầu server trả nội dung file info.txt server khơng có

file lỗi phát sinh

Để giải trường hợp bị lỗi, ta dùng thuộc tính khác lớp XMLHttp status statusText Nếu status có giá trị 200 request thành cơng, ngược lại, request thất

bại, đó, thơng tin lỗi chứa thuộc tính statusText

hàm getResponseHeader Phần thông tin quan trọng response header Content-Type, phần cho biết liệu lấy thuộc loại (text, html, image )

Cũng lấy tất thơng tin từ response header sau:

Trong thực request, ta thêm thơng tin vào phần header request, thơng tin

Zip Code: <input type="text" name="txtZipCode" value="" /><br /> Phone: <input type="text" name="txtPhone" value="" /><br /> E-mail: <input type="text" name="txtEmail" value="" /></p> <p><input type="submit" value="Save Customer Info" /></p> </form>

<div id="divStatus"></div>

You'll note that the onsubmit event handler has now changed to call the function sendRequest() (although the event handler still returns false to prevent actual form submission) This method first assembles the data for the POST request and then creates the XMLHttp object to send it The data must be sent in the format as a query string:

name1=value1&name2=value2&name3=value3

Both the name and value of each parameter must be URL-encoded in order to avoid data loss during transmission JavaScript provides a built-in function called encodeURIComponent() that can be used to perform this encoding To create this string, you'll need to iterate over the form fields, extracting and encoding the name and value The getRequestBody() function handles this:

function getRequestBody(oForm) { var aParams = new Array();

for (var i=0 ; i < oForm.elements.length; i++) {

var sParam = encodeURIComponent(oForm.elements[i].name); sParam += "=";

sParam += encodeURIComponent(oForm.elements[i].value); aParams.push(sParam);

}

return aParams.join("&"); }

This function assumes that you will supply a reference to the form as an argument An array (aParams) is created to store each individual name-value pair Then, the elements of the form are iterated over, building up a string and storing it in sParam, which is then added to the array Doing this prevents multiple string concatenation, which can lead to slower code execution in some browsers The last step is to call join() on the array, passing in the ampersand character This effectively combines all the name-value pairs with ampersands, creating a single string in the correct format

String concatenation in most browsers is an expensive process because strings are immutable, meaning that once created, they cannot have their values changed Thus, concatenating two strings involves first allocating a new string and then copying the contents of the two other strings into it Repeating this process over and over causes a severe slowdown For this reason, it's always best to keep string

oXmlHttp.open("post", oForm.action, true); oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) {

if (oXmlHttp.status == 200) {

saveResult(oXmlHttp.responseText); } else {

saveResult("An error occurred: " + oXmlHttp.statusText); }

} };

oXmlHttp.send(sBody); }

As with previous examples, the first step in this function is to get a reference to the form and store it in a variable (oForm) Then, the request body is generated and stored in sBody Next comes the creation and setup of the XMLHttp object Note that the first argument of open() is now post instead of get, and the second is set to oForm.action (once again, so this script can be used on multiple pages) You'll also notice that a request header is being set When a form is posted from the browser to a server, it sets the content type of the request as application/x-www-form-urlencoded Most server-side languages look for this encoding in order to parse the incoming POST data properly, so it is very important for it to be set

The onreadystatechange event handler is very similar to that of the GET example; the only change is the call to saveResult() instead of displayCustomerInfo() The last line is very important, as the sBody string is passed to send() so that it will become part of the request body This effectively mimics what the browser does, so all server-side logic should work as expected

3 Advantages and Disadvantages of XMLHttp

Undoubtedly, you can see the advantage of using XMLHttp for client-server communication instead of hidden frames The code you write is much cleaner and the intent of the code is much more apparent than using numerous callback functions with hidden frames You have access to request and response headers as well as HTTP status codes, enabling you to determine if your request was successful The downside is that, unlike hidden frames, there is no browser history record of the calls that were made The Back and Forward buttons not tie in to XMLHttp requests, so you have effectively cut off their use It is for this reason that many Ajax applications use a mixture of XMLHttp and hidden frames to make a truly usable interface