AJAX

Chia sẻ: Huongdanhoctot Huongdanhoctot | Ngày: | Loại File: PDF | Số trang:13

Thêm vào BST

Báo xấu

80
lượt xem 7
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'ajax', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: AJAX

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 1
- 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 2
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). 3
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ả Xác định sự kiện (hàm) sẽ được gọi khi thuộc tính readState của đối tượng thay onreadystatechange đổi Cho biết trạng thái của đối tượng request: readyState 0 = Chưa khởi tạo (uninitialized) 1 = đang tải dữ liệu 4
2 = đã tải xong dữ liệu 3 = đang tương tác 4 = hoàn tất Dữ liệu được trả về bởi server dưới dạng chuỗi text responseText Dữ liệu được trả về bởi server dưới dạng đối tượng dữ liệu (XML, …) responseXML Mã trạng thái HTTP được trả về bởi server status Chuỗi trạng thái được trả về bởi server statusText Phương thức Mô tả Stops the current request Dừng gửi yêu cầu đến server abort() Trả về tất cả các tiêu đề (headers) dưới dạng chuỗi getAllResponseHeaders() Trả về giá trị của tiêu đề (header) x dưới dạng chuỗi getresponseHeader(x) 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) data gửi yêu cầu với tuỳ chọn POST send(content) Đặt tham số và giá trị x=y và gán nó vào tiêu đề và sẽ được gửi cùng setRequestHeader('x','y') 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ẻ … mà chỉ có chuỗi XML ASP.NET using System; using System.Data; 5
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 = ""; sXML = sXML + ""; Response.ContentType = "text/xml"; Response.Write(sXML); } } PHP 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 6
Mã nguồn: * Xử lý hệ khách: Bai1_XuatTBChao.htm Untitled Page 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"); 7
} return null; } Nhập tên:   * Xử lý hệ phục vụ: XuatThongBaoChao.aspx 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 = ""; sXML = sXML + ""; Response.ContentType = "text/xml"; Response.Write(sXML); } } 8
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 Untitled Page 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; 9
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; } Tổng 2 số nguyên a: b:   10
* Xử lý hệ phục vụ TinhTong2SoNguyen.aspx TinhTong2SoNguyen.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 clsTinhTong2SoNguyen : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int a; int b; int S; string chuoi; chuoi = Request["a"]; a = int.Parse(chuoi); chuoi = Request["b"]; b = int.Parse(chuoi); S = a + b; //tạo chuỗi XML string sXML = ""; sXML = sXML + ""; Response.ContentType = "text/xml"; Response.Write(sXML); } } 11
4. Bài tập Bài tập 1: Nhập vào 2 cạnh góc vuông a và b của tam giác vuông. Tính chiều dài cạnh huyền của tam giác. Bài tập 2: Nhập vào 2 số nguyên a và b. Tính tổng, hiệu, tích, thương 2 số thực a và b Bài tập 3: Nhập vào 2 cạnh a,b của hình chữ nhật. Hãy tính chu vi và diện tích của hình chữ nhật đó. Bài tập 4: Nhập vào 2 phân số A, B. Hãy tính tổng, hiệu, tích, thương của 2 phân số. Bài tập 5: Nhập vào 3 số nguyên a, b, c. Kiểm tra a,b,c xem có phải là 3 cạnh của tam giác không? Nếu là tam giác cho biết loại tam giác (thường, vuông, cân, đều, vuông cân, …) Bài tập 6: Xây dựng trang web tìm kiếm tên học sinh (tương tự như Google) với cơ sở dữ 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