Trong phần tr−ớc ta đã tập trung vào một phía hội thoại, trong đó server nói cho client biết những gì đang diễn ra. Trong hầu hết các ứng dụng, ng−ời sử dụng muốn giao tiếp với mô hình khi họ nhìn thấy nó. Trong môi tr−ờng đa sử dụng, ta muốn nhận đ−ợc những cập nhật với những thay đổi do ng−ời dùng tạo ra.
Có hai cơ chế đ−ợc sử dụng để cập nhật những thay đổi: đó là dạng HTML và đối t−ợng XMLHttpRequest.
4.1. Sử dụng dạng HTML
Trong các ứng dụng web cơ bản, các thành phần dạng HTML đ−ợc chuẩn hoá cho ng−ời dùng đ−a dữ liệu vào. Các thành phần Form có thể đ−ợc khai báo trong markup HTML:
<form method=”POST” action=”myFormHandlerURL.php”> <input type=”text” name=”username”/>
<input type=”password” name=”password”/> <input type=”submit” value=”login”/>
</form>
Đoạn mã trên hoạt động giống nh− một hộp hội thoại trống. Nếu ta nhập vào giá trị thì khi đó yêu cầu HTTP POST sẽ đ−ợc gửi tới
myFormHandlerURL.php với các thông tin về tên và password. Trong hầu hết các hệ thống lập trình web, ta sẽ không trực tiếp nhìn thấy dạng dữ liệu mã nh−ng ta có cặp giá trị tên d−ới dạng một mảng hoặc các biến “magic”.
Trong thực tế ta sẽ thêm vào một đoạn javaScript để biến đổi nội dung của nó tr−ớc khi thực hiện cập nhật nh− sau:
<form id=”myForm” method=”POST” action=”” onsubmit=”validateForm(), return false;”>
<input type=”text” name=”username”/> <input type=”password” name=”password”/> <input type=”submit” name=”login”/>
</form>
Khi đó ta sẽ có thể định nghĩa một lịch trình trong JavaScript cho trang nh− sau:
Function validateForm(){
Var form=document.getElementById(‘myForm’); Var user=form.element[0].value;
Var pwd=form.element[1].value;
If (user&&user.length>0 && pwd && pwd.leght>0){ Form.action=’myFormHanderURL.php’;
Form.submit(); }else{
alert(“please fill in before loggin in”); }
}
Với đoạn mã trên, URL chỉ đ−ợc thực hiện khi các giá trị đ−ợc điền đầy đủ và chính xác. Cũng có thể sử dụng JavaScript để thay đổi các dạng tác động bằng cách ẩn đi các button nhỏ nhằm hạn chế nhiều lựa chọn tr−ớc khi gửi các thông tin qua mạng.
Ta cũng có thể xây dựng một hàm cập nhật bằng cách tạo thêm một hàm nhập giá trị submitData() tr−ớc khi thực hiện cập nhật thông tin nh− sau:
Function addParam(form, key,value){
Var input=document.creatElement(“input”); Input.name=key; Input.value=value; Form.appenChild(input); } fuction submitData(url,data){ var form=document.creatElement(“form”); form.action=url; form.method=”POST”; for(var i in data){ addParam(form,i,data[i]); }
form.style.display=”none”;
document.body.appendChild(form); form.submit();
}
Tuy nhiên với kỹ thuật này sẽ không dễ dàng nhận đ−ợc phản hồi của server.
4.2 Sử dụng đối t−ợng XMLHttpRequest
Trong những phần tr−ớc, ta đã tìm hiểu về XMLHttpRequest. Sự khác nhau giữa việc đọc và việc cập nhật chính là khác nhau chút ít trong quan điểm mã client. Đơn giản ta chỉ việc chỉ định ph−ơng thức POST và chuyền nó cho tham số của ta.
Với cách thức chỉ những URL t−ơng ứng với dạng hành động cũng nh− hàm điều khiển cập nhật mới đ−ợc sử dụng. Trong HTTP thì ph−ơng thức, các tham số yêu cầu và loại nội dụng cũng đ−ợc chỉ định. Cần chú ý rằng nếu ta đ−a ra cặp giá trị khoá bằng POST, khi đó ta cần phải thiết lập loại nội dung là application/x-www-urlencoded. Nếu không chỉ định một nội dung cụ thể thì ta điều khiển nó một cách tự động. Ph−ơng thức HTTP đ−ợc chỉ định trong ph−ơng thức open() của XMLHttpRequest, các tham số thì chỉ định trong ph−ơng thức method(). Khi đó một lệnh gọi sẽ nh− sau:
Var loader=net.ContentLoader (
‘myFormHandlerURL.php’,showResponse,null,’POST’,’ username=sa&password=sa’);
Hàm trên thực hiện cùng yêu cầu với hàm submitData() ở trên. Một điều chú ý là các tham số đ−ợc truyền d−ới dạng một đối t−ợng chuỗi sử dụng trong chỗi hàng đợi URL.
Phần III. Xây dựng ứng dụng Ajax tại Công ty Điện Thoại Hà Nội 1
I. Khảo sát và đánh giá hiện trạng
1.1 Đặc điểm công ty
Công ty điện thoại Hà Nội 1 là đơn vị trực thuộc B−u Điện Hà Nội hoạt động trên lĩnh vực viễn thông. Địa bàn hoạt động của công ty dàn trải trên một diện tích rộng lớn, bao gồm một nửa Hà Nội tính theo đ−ờng tàu Quận Hoàng Mai đến các quận Hoàn Kiếm và ba huyện ngoại thành là Gia Lâm, Đông Anh và Sóc Sơn. Nhu cầu trao đổi thông tin giữa các đơn vị trong công ty là rất lớn. Do đặc thù địa bàn quản lý phân bổ tại nhiều địa điểm trên một phạm vi rộng lớn nên việc trao đổi thông tin không thực hiện theo cách thông th−ờng đ−ợc. Phần lớn các giao dịch đ−ợc thực hiện thông qua mạng máy tính với server đặt tại Công ty.
Một trong những thông tin đ−ợc trao đổi nhiều nhất chính là các báo cáo, cũng nh− các cập nhật thông tin của các đơn vị trong toàn bộ công ty. Thông qua các báo cáo và các thông tin cập nhật, các thành viên trong công ty thực hiện những chức năng nhiệm vụ của mình.
1.2 Bài toán
*) Mặc dù số l−ợng các báo cáo và các thông tin cập nhật trong công ty là rất lớn. Tuy nhiên chúng lại tuân theo một định dạng t−ơng đối giống nhau. Tất cả đều bao gồm những phần tiêu đề giống nhau, kèm theo các thành phần có thể thay đổi đ−ợc dùng để cập nhật, thay đổi. Nếu tiến hành xây dựng các ứng dụng web theo truyền thống, khi thực hiện những thao tác này sẽ dẫn đến tình trạng thực hiện công việc rất chậm, do phải load toàn bộ những thông tin có liên quan trong một trang. Với số l−ợng báo cáo và cập nhật mỗi ngày hàng
nghìn lần sẽ dẫn đến tình trạng quá tải. Mạng hoạt động sẽ rất chậm và không hiệu quả. Chính vì vậy, sử dụng kỹ thuật Ajax trong việc xây dựng ứng dụng web tại thời điểm này là hoàn toàn hợp lý.
*) Trong giai đoạn hiện nay, với việc phát triển mạnh mẽ của dịch vụ ADSL, việc nắm vững vị trí cũng nh− số l−ợng thiết bị điều khiển DSLAM tại các địa điểm khác nhau trên mạng là điều tất yếu. Để duy trì đ−ợc các thông tin này, hàng ngày, hàng tháng các kỹ thuật viên có nhiệm vụ cập nhật, thay đổi thêm các thông tin mới vào cơ sở dữ liệu.