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]
(1)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
(2)Đố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
(3)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
(4)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
(5)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
(6)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
(7)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