BaiGiang AJAX

AJAX
GV: Nguyn B Phc
1. Gii thiu
1.1 Tng quan v m hnh ng dng Web
Kin trc ca ng dng Web
Mt s c im: * X l h khch (Client): + u im: - Giao din p - Kh nng tng tc cao

1
- Gim ti cho Server - Tc x l nhanh + Hn ch: - Kh pht trin - i hi phn mm h tr - Kh nng tng thch vi trnh duyt khng cao.
* X l h phc v (Server) + u im: - Pht trin n gin - Trin khai v bo tr d dng - Chia s c d liu + Khuyt im - Giao din ngi dng th s - Tnh tng tc km
1.2 Gii thiu v AJAX

Vit tt ca t Asynchronous Javascript And XML l mt nhm cc cng ngh pht trin web c s dng to cc ng dng web ng hay cc ng dng RIA (rich Internet application)
M hnh truyn thng tng tc gia Client-Server

2
M hnh AJAX trong tng tc gia Client-Server
V d:
2. K thut lp trnh AJAX

2.1. X l h khch (Client)
2.1.1. i tng XMLHTTPRequest i tng XMLHttpRequest trao i d liu mt cch khng ng b vi h phc v (Server).
3
M hnh hot ng ca AJAX
Khi to i tng nhn/gi cc yu cu d liu xml thuc i tng XMLHTTPRequest:

var xmlhttp
Nu s dng trnh duyt Web IE5, IE6:

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Nu s dng trnh duyt Web IE7 tr ln, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHTTPRequest();
2.1.2. Cc phng thc v thuc tnh ca i tng XMLHTTPRequest

Thuc tnh
onreadystatechange
M t Xc nh s kin (hm) s c gi khi thuc tnh readState ca i tng thay i Cho bit trng thi ca i tng request: 0 = Cha khi to (uninitialized) 1 = ang ti d liu
readyState
2 = ti xong d liu 3 = ang tng tc 4 = hon tt

responseText responseXML status statusText
D liu c tr v bi server di dng chui text D liu c tr v bi server di dng i tng d liu (XML, ) M trng thi HTTP c tr v bi server Chui trng thi c tr v bi server
Phng thc
abort() getAllResponseHeaders() getresponseHeader(x) open('method','URL','a')
M t Stops the current request Dng gi yu cu n server Tr v tt c cc tiu (headers) di dng chui Tr v gi tr ca tiu (header) x di dng chui 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'.) xc nh phng thc ca HTTP (GET hoc POST), URL l ng dn gi yu cu n server (bt ng b) (nu a=true: mc nh)
send(content) setRequestHeader('x','y')
data gi yu cu vi tu chn POST t tham s v gi tr x=y v gn n vo tiu v s c gi cng vi yu cu.
2.2. X l h phc v (Server)

Trong k thut AJAX, h phc v (server) giao din hin th thng thng khng c cc th <html></html> m ch c chui XML
ASP.NET
using System; using System.Data;
5
using using using using using using using using
System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; 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 cho n vi 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 cho n vi AJAX'/>"; ?>
3. V d
V d 1: Nhp vo tn ngi s dng. Xut thng bo cho
M ngun: * X l h khch: 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) { // dng cho IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // dng cho IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP");
7
} return null; } </script> </head> <body> Nhp tn: <input id="txt_Ten" type="text" /> <br /> <input id="Button1" type="button" value="Xut Thng Bo" onclick="XuatThongBao()"/> <div id="KetQua"> </div> </body> </html>
* X l h phc v: XuatThongBaoChao.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="XuatThongBaoChao.aspx.cs" Inherits="clsXuatThongBaoChao" %>
XuatThongBaoChao.aspx.cs
using using using using using using using using using using System; System.Data; System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; 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 cho bn " + sTen; //to chui string sXML sXML = sXML sXML = sXML sXML = sXML XML = "<?xml version='1.0' encoding='UTF-8'?>"; + "<Goc "; + "ThongBao='" + sThongBao + "'"; + "/>";
Response.ContentType = "text/xml"; Response.Write(sXML); } }
V d 2: Nhp vo 2 s nguyn a v b. Tnh tng 2 s nguyn a v b
M ngun: * X l h khch: 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 { var var var TinhTong() a, b = new Number(); S = new Number(); 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 = "Tng: " + S; var newChild = document.createTextNode(Chuoi); var oldChild = document.getElementById("KetQua").childNodes[0]; document.getElementById("KetQua").replaceChild(newChild, oldChild); } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // dng cho IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // dng cho IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } </script> </head> <body> <h1>Tng 2 s nguyn</h1> a: <input id="txt_a" type="text" /> <br /> b: <input id="txt_b" type="text" /> <br /> <input id="Button1" type="button" value="Tnh tng" onclick="TinhTong()"/> <div id="KetQua"> </div> </body> </html>
10
* X l h phc v TinhTong2SoNguyen.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TinhTong2SoNguyen.aspx.cs" Inherits="clsTinhTong2SoNguyen" %>
TinhTong2SoNguyen.aspx.cs
using using using using using using using using using using System; System.Data; System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; 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; //to chui string sXML sXML = sXML sXML = sXML sXML = sXML XML = "<?xml version='1.0' encoding='UTF-8'?>"; + "<Goc "; + "Tong='" + S.ToString() + "'"; + "/>";
Response.ContentType = "text/xml"; Response.Write(sXML); } }
11
4. Bi tp
Bi tp 1: Nhp vo 2 cnh gc vung a v b ca tam gic vung. Tnh chiu di cnh huyn ca tam gic. Bi tp 2: Nhp vo 2 s nguyn a v b. Tnh tng, hiu, tch, thng 2 s thc a v b Bi tp 3: Nhp vo 2 cnh a,b ca hnh ch nht. Hy tnh chu vi v din tch ca hnh ch nht . Bi tp 4: Nhp vo 2 phn s A, B. Hy tnh tng, hiu, tch, thng ca 2 phn s. Bi tp 5: Nhp vo 3 s nguyn a, b, c. Kim tra a,b,c xem c phi l 3 cnh ca tam gic khng? Nu l tam gic cho bit loi tam gic (thng, vung, cn, u, vung cn, ) Bi tp 6: Xy dng trang web tm kim tn hc sinh (tng t nh Google) vi c s d liu nh sau:
- Khi nhp gi tr vo tm kim th xut hin cc tn hc sinh tng ng v cho php chn tn hc sinh. Sau hin th cc hc sinh tng ng.
12
Ti liu tham kho

[1] SAMS Teach Yourself Ajax in 10 Minutes, SAMS, 2006 [2] MSDN 2005 [3] www.w3schools.com
13

BaiGiang AJAX

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

BaiGiang AJAX

Uploaded by

Copyright:

Available Formats

AJAX

GV: Nguyn B Phc

Kin trc ca ng dng Web

Mt s c im: * X l h khch (Client): + u im: - Giao din p - Kh nng tng tc cao

1.2 Gii thiu v AJAX

M hnh truyn thng tng tc gia Client-Server

M hnh AJAX trong tng tc gia Client-Server

2. K thut lp trnh AJAX

M hnh hot ng ca AJAX

Khi to i tng nhn/gi cc yu cu d liu xml thuc i tng XMLHTTPRequest:

Nu s dng trnh duyt Web IE5, IE6:

2.1.2. Cc phng thc v thuc tnh ca i tng XMLHTTPRequest

2 = ti xong d liu 3 = ang tng tc 4 = hon tt

data gi yu cu vi tu chn POST t tham s v gi tr x=y v gn n vo tiu v s c gi cng vi yu cu.

2.2. X l h phc v (Server)

using using using using using using using using

System.Configuration; System.Collections; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Web.UI.HtmlControls;

M ngun: * X l h khch: Bai1_XuatTBChao.htm

Response.ContentType = "text/xml"; Response.Write(sXML); } }

V d 2: Nhp vo 2 s nguyn a v b. Tnh tng 2 s nguyn a v b

M ngun: * X l h khch: Bai2_TinhTong2SoNguyen.htm

Response.ContentType = "text/xml"; Response.Write(sXML); } }

Ti liu tham kho

You might also like