- reset: tạo nút thiết lập lại FORM và giá trị của các điều kiển trong FORM
Các bước thực hiện
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
22
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Giới thiệu
XmlHttpRequest là lớp thư viện của
javascript
XmlHttpRequest được dùng để yêu cầu (Http request) về Web Server và nhận phản hồi (Response) từ Web Server.
Dữ liệu phản hồi từ Web Server là xml hoặc text
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
23
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 1 : Khởi tạo đối tượng XmlHttpRequest
Bước 2 : Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server
Bước 3 : Nhận phản hồi từ Web Server và xử lý kết quả nhận được
Bước 4 : Viết xử lý ở Web Server
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 1 : Khởi tạo đối tượng XmlHttpRequest
//Biến toàn cục dùng để tham chiếu đến đối tượng XmlHttpRequest
var xmlHttp = null;
//Phương thức tạo đối tượng XmlHttpRequest
function createXmlHttpReques() { var kq; try{ kq = new XMLHttpRequest(); } catch(e){ //IE6 hoặc cũ hơn
kq = new ActiveXObject("Microsoft.XMLHttp"); }
}
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
25
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 2 : Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server Có 2 phương thức để gửi yêu cầu: GET và POST
//Gửi bằng phương thức GET
var request = "XuatLoiChao.aspx?hoten=" + hoten;
xmlHttp.open("GET", request, true);
//Tham chiếu đến hàm xử lý kết quả trả về
xmlHttp.onreadystatechange = HienThiLoiChao; //Gửi yêu cầu về Server
xmlHttp.send(null);
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
26
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 2 : Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server Có 2 phương thức để gửi yêu cầu: GET và POST
//Gửi bằng phương thức POST
var request = "XuatLoiChao.aspx";
xmlHttp.open("POST", request, true);
//Tham chiếu đến hàm xử lý kết quả trả về
xmlHttp.onreadystatechange = HienThiLoiChao;
//Gửi bằng phương thức POST phải gán Header cho Request
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//Gửi yêu cầu về Server
xmlHttp.send("hoten=" + hoten);
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
27
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 3 : Nhận phản hồi từ Web Server và xử lý kết quả nhận được
Có 2 phương thức để gửi yêu cầu: GET và POST
function HienThiLoiChao() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //nhận kết quả trả về var loi_chao = xmlHttp.responseText;
//Truy xuất đến vùng để hiển thị lời chào
var divLoiChao = document.getElementById("divLoiChao");
//Hiển thị
divLoiChao.innerHTML = loi_chao; } }
}
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
28
AJAX
Dùng Ajax với đối tượng XmlHttpRequest
Các bước thực hiện
Bước 4 : Viết xử lý ở Web Server
protected void Page_Load(object sender, EventArgs e) {
//Lấy họ tên mà Client gửi tới
string hoten = Request["hoten"];
//Tạo lời chào
string loi_chao = string.Format("Chào bạn {0}!", hoten);
//Gửi lời chào về Client
Response.Write(loi_chao);
//Kết thúc việc gửi dữ liệu về Client
//Nếu khơng có dịng này thì nó sẽ gửi ln phần html trong trang aspx
Response.End(); }
30/08/2011 Hệ thống web - Kỹ thuật Ajax Hệ thống web - Kỹ thuật Ajax
29 Hỏi đáp Hỏi đáp 30 ? ? ?