1. Trang chủ
  2. Công Nghệ Thông Tin

AJAX pot

13 175 0
AJAX pot

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

1 AJAX GV: Nguyễn Bá Phúc 1. Giới thiệu 1.1 Tổng quan về mô hình ứng dụng Web Kiến trúc của ứng dụng Web Một số đặc điểm: * Xử lý hệ khách (Client): + Ưu điểm: - Giao diện đẹp - Khả năng tương tác cao 2 - Giảm tải cho Server - Tốc độ xử lý nhanh + Hạn chế: - Khó phát triển - Đòi hỏi phần mềm hỗ trợ - Khả năng tương thích với trình duyệt không cao. * Xử lý hệ phục vụ (Server) + Ưu điểm: - Phát triển đơn giản - Triển khai và bảo trì dễ dàng - Chia sẽ được dữ liệu + Khuyết điểm - Giao diện người dùng thô sơ - Tính tương tác kém 1.2 Giới thiệu về AJAX Viết tắt của từ Asynchronous Javascript And XML là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng RIA (rich Internet application) Mô hình truyền thống tương tác giữa Client-Server 3 Mô hình AJAX trong tương tác giữa Client-Server Ví dụ: 2. Kỹ thuật lập trình AJAX 2.1. Xử lý hệ khách (Client) 2.1.1. Đối tượng XMLHTTPRequest Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với hệ phục vụ (Server). 4 Mô hình hoạt động của AJAX Khởi tạo đối tượng nhận/gửi các yêu cầu dữ liệu xml thuộc đối tượng XMLHTTPRequest: var xmlhttp Nếu sử dụng trình duyệt Web IE5, IE6: var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); Nếu sử dụng trình duyệt Web IE7 trở lên, Firefox, Chrome, Opera, Safari var xmlhttp = new XMLHTTPRequest(); 2.1.2. Các phương thức và thuộc tính của đối tượng XMLHTTPRequest Thuộc tính Mô tả onreadystatechange Xác định sự kiện (hàm) sẽ được gọi khi thuộc tính readState của đối tượng thay đổi readyState Cho biết trạng thái của đối tượng request: 0 = Chưa khởi tạo (uninitialized) 1 = đang tải dữ liệu 5 2 = đã tải xong dữ liệu 3 = đang tương tác 4 = hoàn tất responseText Dữ liệu được trả về bởi server dưới dạng chuỗi text responseXML Dữ liệu được trả về bởi server dưới dạng đối tượng dữ liệu (XML, …) status Mã trạng thái HTTP được trả về bởi server statusText Chuỗi trạng thái được trả về bởi server Phương thức Mô tả abort() Stops the current request Dừng gửi yêu cầu đến server getAllResponseHeaders() Trả về tất cả các tiêu đề (headers) dưới dạng chuỗi getresponseHeader(x) Trả về giá trị của tiêu đề (header) x dưới dạng chuỗi open('method','URL','a') specifies the HTTP method (for example, GET or POST), the target URL, and whether the request should be handled asynchronously (If yes, a='TRue'the default; if no, a='false'.) xác định phương thức của HTTP (GET hoặc POST), URL là đường dẫn gửi yêu cầu đến server (bất đồng bộ) (nếu a=’true’: mặc định) send(content) data gửi yêu cầu với tuỳ chọn POST setRequestHeader('x','y') Đặt tham số và giá trị x=y và gán nó vào tiêu đề và sẽ được gửi cùng với yêu cầu. 2.2. Xử lý hệ phục vụ (Server) Trong kỹ thuật AJAX, ở hệ phục vụ (server) giao diện hiển thị thông thường không có các thẻ <html>…</html> mà chỉ có chuỗi XML ASP.NET using System; using System.Data; 6 using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class BaiGiang_ServerSide : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string sXML = "<?xml version='1.0' encoding='UTF-8'?>"; sXML = sXML + "<Goc "; sXML = sXML + "ThongBao='Xin chào đến với AJAX'"; sXML = sXML + "/>"; Response.ContentType = "text/xml"; Response.Write(sXML); } } PHP <?php header('Content-Type: text/xml'); echo "<?xml version='1.0' encoding='UTF-8'?><Goc ThongBao='Xin chào đến với AJAX'/>"; ?> 3. Ví dụ Ví dụ 1: Nhập vào tên người sử dụng. Xuất thông báo chào 7 Mã nguồn: * Xử lý hệ khách: Bai1_XuatTBChao.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script language="javascript"> var xmlhttp function XuatThongBao() { var sTen = new String(); sTen = document.getElementById("txt_Ten").value; var ThamSo = "Ten=" + sTen; var URL = "./XuatThongBaoChao.aspx" + "?" + ThamSo; xmlhttp = GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); } xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",URL,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { var sThongBao = new String(); var xmlDoc=xmlhttp.responseXML.documentElement; sThongBao = xmlDoc.getAttribute("ThongBao"); alert(sThongBao); } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // dùng cho IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // dùng cho IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); 8 } return null; } </script> </head> <body> Nhập tên: <input id="txt_Ten" type="text" /> <br /> <input id="Button1" type="button" value="Xuất Thông Báo" onclick="XuatThongBao()"/> <div id="KetQua">&nbsp;</div> </body> </html> * Xử lý hệ phục vụ: XuatThongBaoChao.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="XuatThongBaoChao.aspx.cs" Inherits="clsXuatThongBaoChao" %> XuatThongBaoChao.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class clsXuatThongBaoChao : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string sTen; string sThongBao; sTen = Request["Ten"]; sThongBao = "Xin chào bạn " + sTen; //tạo chuỗi XML string sXML = "<?xml version='1.0' encoding='UTF-8'?>"; sXML = sXML + "<Goc "; sXML = sXML + "ThongBao='" + sThongBao + "'"; sXML = sXML + "/>"; Response.ContentType = "text/xml"; Response.Write(sXML); } } 9 Ví dụ 2: Nhập vào 2 số nguyên a và b. Tính tổng 2 số nguyên a và b Mã nguồn: * Xử lý hệ khách: Bai2_TinhTong2SoNguyen.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script language="javascript"> var xmlhttp function TinhTong() { var a, b = new Number(); var S = new Number(); var Chuoi = new String(); Chuoi = document.getElementById("txt_a").value; a = parseInt(Chuoi); Chuoi = document.getElementById("txt_b").value; b = parseInt(Chuoi); //gui ket qua ve server var ThamSo = "a=" + a + "&b=" + b; var URL = "./TinhTong2SoNguyen.aspx" + "?" + ThamSo; xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } xmlhttp.onreadystatechange=stateChanged; 10 xmlhttp.open("GET",URL,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { var xmlDoc=xmlhttp.responseXML.documentElement; S = xmlDoc.getAttribute("Tong"); Chuoi = "Tổng: " + S; var newChild = document.createTextNode(Chuoi); var oldChild = document.getElementById("KetQua").childNodes[0]; document.getElementById("KetQua").replaceChild(newChild, oldChild); } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // dùng cho IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // dùng cho IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } </script> </head> <body> <h1>Tổng 2 số nguyên</h1> a: <input id="txt_a" type="text" /> <br /> b: <input id="txt_b" type="text" /> <br /> <input id="Button1" type="button" value="Tính tổng" onclick="TinhTong()"/> <div id="KetQua">&nbsp;</div> </body> </html> [...]... liệu như sau: - Khi nhập giá trị vào ô tìm kiếm thì xuất hiện các tên học sinh tương ứng và cho phép chọn tên học sinh Sau đó hiển thị các học sinh tương ứng 12 Tài liệu tham khảo [1] SAMS Teach Yourself Ajax in 10 Minutes, SAMS, 2006 [2] MSDN 2005 [3] www.w3schools.com 13 . hình truyền thống tương tác giữa Client-Server 3 Mô hình AJAX trong tương tác giữa Client-Server Ví dụ: 2. Kỹ thuật lập trình AJAX 2.1. Xử lý hệ khách (Client) 2.1.1. Đối tượng XMLHTTPRequest. dữ liệu + Khuyết điểm - Giao diện người dùng thô sơ - Tính tương tác kém 1.2 Giới thiệu về AJAX Viết tắt của từ Asynchronous Javascript And XML là một nhóm các công nghệ phát triển web. 1 AJAX GV: Nguyễn Bá Phúc 1. Giới thiệu 1.1 Tổng quan về mô hình ứng dụng Web Kiến trúc của

Ngày đăng: 08/08/2014, 19:20

Xem thêm: AJAX pot

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan