Lab04 1. Mục tiêu ỨNG DỤNG AJAX Ứng dụng Ajax vào Website ASP.Net với môi trường Microsoft Visual Studio 2010 Xây dựng ứng dụng web với đối tượng XmlHttpRequest 2. Tạo mới Website Dùng Ajax với đối tượng XmlHttpRequest dùng HTML Control 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 <input id="xuat" size="" style="width: 184px" type="button" value="xử LÝ" onclick ="Xuly_xuat();" /> Bước 1 : Khởi tạo đối tượng XmlHttpRequest (Xử lý ở clienr): Button XỬ LÝ gọi hàm Xuly_xuat <script language ="javascript" type ="text/javascript" > //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; kq = new XMLHttpRequest(); catch(e) //IE6 hoặc cũ hơn kq = new ActiveXObject("Microsoft.XMLHttp"); 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 Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 1/8
//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); 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ề </script> 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; 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 luôn phần html trong trang aspx Response.End(); Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 2/8
3. Tạo mới Website Dùng Ajax với đối tượng XmlHttpRequest sử dụng Server Control Sự kiện OnClientClick gọi hàm Xuly_tinh() <asp:button ID="Tinh" runat="server" Text="=" Width="48px" OnClientClick ="return Xuly_tinh();" OnClick="Tinh_Click" Font-Size="14pt" /> <script language ="javascript" type ="text/javascript" > //1. Khai bao bien toan cuc, dung de tham chieu den dt XmlHttpRequest var xmlhttp = null; var txtso1, txtso2, txtkq, toantu; //tham chieu den cac Sever Control function window_load() txtso1 = document.getelementbyid("<%= So1.ClientID %>"); txtso2 = document.getelementbyid("<%= So2.ClientID %>"); txtkq = document.getelementbyid("<%= Ket_qua.ClientID %>"); toantu = document.getelementbyid("<%= Toan_tu.ClientID %>"); //2. Tao doi tuong XmlHttpRequest function createxmlhttprequest() var xmlrequest=null, e; xmlrequest = new XMLHttpRequest(); catch(e) xmlrequest = new ActiveXObject("Microsoft.XMLHttp"); catch(e) //Neu khong tao duoc doi tuong XmlHttpRequest if (xmlrequest==null) alert("khong tao duoc doi tuong Request"); return xmlrequest; //3. Viet xu ly tinh toan function Xuly_tinh() //Lay gia tri 2 so va phep tinh var so1 = txtso1.value; var so2 = txtso2.value; var pheptinh = toantu.value; //Tao doi tuong XmlHttpRequest de goi yeu cau va nhan ket qua xmlhttp = createxmlhttprequest(); if (xmlhttp!=null) Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 3/8
//Dung XmlHttpRequest de goi yeu cau ve Server, goi bang phuong thuc GET xmlhttp.open("get","bai_02.aspx?so1="+so1+"&so2="+so2+"&pt="+pheptinh, true); //Tham chieu ham xu ly ket qua tra ve xmlhttp.onreadystatechange = HienThiKetqua; //Goi yeu cau ve server xmlhttp.send(null); return false; //4. Viet xu ly ham duoc tham chieu function HienThiKetqua() if (xmlhttp.readystate ==4) if (xmlhttp.status==200) //nhan ket qua tra ve var chuoi = xmlhttp.responsetext; //Hien thi ra ma ra man hinh txtkq.value = chuoi; </script> Xử lý ở Webserver protected void Page_Load(object sender, EventArgs e) //5. Viet xu ly o Server //Lay gia tri do Client goi den if (!string.isnullorempty(request["so1"])) double so1 = double.parse(request["so1"]); double so2 = double.parse(request["so2"]); string pheptinh = Request["pt"]; //kiem tra double ketqua = ThucHienPhepTinh(so1, so2, pheptinh); //Goi loi chao ve client Response.Write(ketqua); //Ket thuc viec goi du lieu ve Client //Neu khong co dong nay, no se goi luon phan Html trong trang aspx Response.End(); private double ThucHienPhepTinh(double so1, double so2, string phep_tinh) double kq = 0; switch (phep_tinh) case "cong": kq = so1 + so2; break; case "tru": kq = so1 - so2; break; case "nhan": kq = so1 * so2; break; case "chia": if (so2 == 0) kq = 0; else kq = so1 / so2; break; return kq; Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 4/8
4. Tạo mới Website Dùng Ajax với đối tượng XmlHttpRequest trả về Client dưới dạng XML Sự kiện OnClientClick gọi hàm Xuly_Xuat() <asp:button ID="Xuat" runat="server" Text="Load Danh sách môn học" Width="216px" OnClientClick ="return Xuly_xuat();" /> <script language ="javascript" type ="text/javascript" > //1. Khai bao bien toan cuc, dung de tham chieu den dt XmlHttpRequest var xmlhttp = null; var dsmh; //2. Tao doi tuong XmlHttpRequest function createxmlhttprequest() var xmlrequest=null, e; xmlrequest = new XMLHttpRequest(); catch(e) xmlrequest = new ActiveXObject("Microsoft.XMLHttp"); catch(e) //Neu khong tao duoc doi tuong XmlHttpRequest if (xmlrequest==null) alert("khong tao duoc doi tuong Request"); return xmlrequest; //3. Viet xu ly tinh toan function Xuly_xuat() //Tao doi tuong XmlHttpRequest de goi yeu cau va nhan ket qua xmlhttp = createxmlhttprequest(); if (xmlhttp!=null) //Dung XmlHttpRequest de goi yeu cau ve Server, goi bang phuong thuc GET xmlhttp.open("get","bai_03.aspx?dulieu=dsmonhoc", true); //Tham chieu ham xu ly ket qua tra ve xmlhttp.onreadystatechange = HienThiDanhsach; //Goi yeu cau ve server xmlhttp.send(null); return false; //4. Viet xu ly ham duoc tham chieu function HienThiDanhsach() if (xmlhttp.readystate ==4) Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 5/8
</script> if (xmlhttp.status==200) //nhan ket qua tra ve var xmldoc = xmlhttp.responsexml; //luu tru tai lieu XML //Hien thi ra man hinh var cacnut_monhoc = xmldoc.getelementsbytagname("monhoc"); var option,i; dsmh.length = 0; //xoa danh sach truoc do for (i=0; i< cacnut_monhoc.length; i++) option = document.createelement("option"); option.text = cacnut_monhoc[i].firstchild.nodevalue; dsmh.add(option); Xử lý ở Webserver protected void Page_Load(object sender, EventArgs e) //5. Viet xu ly o Server //Lay gia tri do Client goi den if (!string.isnullorempty(request["dulieu"])) //Tao chuoi XML de tra tra ket qua ve client Danh sach mon hoc string[] arrmonhoc = "ASP.Net", "PHP", "Joomla", "CSharp", "ADO.Net" ; StringBuilder stb = new StringBuilder(); stb.append("<monhocs>"); foreach (string mh in arrmonhoc) stb.appendformat("<monhoc>0</monhoc>",mh); stb.append("</monhocs>"); Response.ContentType = "text/xml"; //bat buoc phai khai bao neu tra ket qua duoi dang XML //Goi ket qua ve client Response.Write(stb); Response.End(); 5. Tạo mới Website Dùng Ajax với đối tượng XmlHttpRequest kết nối CSDL trả về Client dưới dạng XML Cho CSDL QLBansach có Table Chu đề có dữ liệu như sau: Chuỗi kết nối CSDL trong Webconfig <connectionstrings> Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 6/8
<add name="strconnectionstring" connectionstring="data Source=ITQUANGNAM;Initial Catalog=QLBANSACH;Integrated Security=True" providername="system.data.sqlclient" /> </connectionstrings > Sự kiện OnClientClick gọi hàm Xuly_Xuat() <asp:button ID="Xuat" runat="server" OnClientClick="return Xuly_xuat();" Text="Xuất DS chủ đề" Width="216px" Font-Bold="True" Font-Size="12pt" /> <script language ="javascript" type ="text/javascript" > //1. Khai bao bien toan cuc, dung de tham chieu den dt XmlHttpRequest var xmlhttp = null; var dscd; //2. Tao doi tuong XmlHttpRequest function createxmlhttprequest() var xmlrequest=null, e; xmlrequest = new XMLHttpRequest(); catch(e) xmlrequest = new ActiveXObject("Microsoft.XMLHttp"); catch(e) //Neu khong tao duoc doi tuong XmlHttpRequest if (xmlrequest==null) alert("khong tao duoc doi tuong Request"); return xmlrequest; //3. Viet xu ly tinh toan function Xuly_xuat() //Tao doi tuong XmlHttpRequest de goi yeu cau va nhan ket qua xmlhttp = createxmlhttprequest(); if (xmlhttp!=null) //Dung XmlHttpRequest de goi yeu cau ve Server, goi bang phuong thuc GET xmlhttp.open("get","bai_04.aspx?dulieu=dschude", true); //Tham chieu ham xu ly ket qua tra ve xmlhttp.onreadystatechange = HienThiDanhsach; //Goi yeu cau ve server xmlhttp.send(null); return false; //4. Viet xu ly ham duoc tham chieu function HienThiDanhsach() if (xmlhttp.readystate ==4) if (xmlhttp.status==200) //nhan ket qua tra ve var xmldoc = xmlhttp.responsexml; //luu tru tai lieu XML //Hien thi ra man hinh var cacnut_chude = xmldoc.getelementsbytagname("chude"); var option,i; dscd.length=0; //xoa di danh sach truoc do for (i=0; i< cacnut_chude.length; i++) Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 7/8
</script> option = document.createelement("option"); option.text = cacnut_chude[i].firstchild.nodevalue; dscd.add(option); Xử lý ở Webserver protected void Page_Load(object sender, EventArgs e) //5. Viet xu ly o Server //Lay gia tri do Client goi den if (!string.isnullorempty(request["dulieu"])) //Tao chuoi XML de tra tra ket qua ve client Danh sach mon hoc using (SqlConnection Con = new SqlConnection(ConfigurationManager. ConnectionStrings["strConnectionString"].ConnectionString )) SqlDataAdapter da = new SqlDataAdapter("Select * from Chude", Con); DataSet ds = new DataSet(); da.fill(ds, "ChuDe"); StringBuilder stb = new StringBuilder(); stb.append("<chudes>"); for (int i = 0; i < ds.tables[0].rows.count ; i++) stb.appendformat("<chude>0</chude>", ds.tables[0].rows[i]["tenchude"].tostring()); stb.append("</chudes>"); Response.ContentType = "text/xml"; //bat buoc phai khai bao neu tra ket qua duoi dang XML //Goi ket qua ve client Response.Write(stb); Response.End(); *********Hết********* Giảng viên Dương Thành Phết - http://www.thayphet.net Trang 8/8