Ajax.txt
Asynchronous JavaScript and XML
- 비동기 자바스크립트 & XML
- 웹브라우저가 비동기/동기 방식으로 네트워크 소켓을 사용하여 웹서버와 데이터를 주고 받는 기술. 그때의 데이터 형식은 XML으로 주고 받는다.
Ajax의 장점?
1. 페이지의 깜빡임이 새로고침이 가능(X) : 서버에서 데이터를 받아와서 출력
2. 비동기 통신이 가능
3. 최소의 데이터만 교환(***)
: 전체 페이지에 대한 라운드 트립이 없음.
4. Ajax 처리는 화면상에서 일부분만 갱신 필요 -> 적용
Ajax 발전
1. 새로고침
2. Frame 사용
3. iFrame 사용
4. Ajax 정리(**)
5. MS : ASP.NET Ajax 1.0
데이타 베이스의 값이 변경될때마다 동적으로 값이 변환 한다.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Ex01.aspx.cs"
Inherits="Ex01"
%>
<!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 runat="server">
<title></title>
<style
type="text/css">
#item1, #item2, #item3
{
border:1px solid gray;
width:0px;
height:20px;
margin-left:25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex01.aspx<br />
<br />
<br />
[상황] ASPNET.tblCount 테이블의 데이터를 화면에 출력하시오.<br
/>
<br />
- 해당 테이블은 데이터가 잦은 변화가 있음.(계속 설문 진행..)<br
/>
- 현재 보고있는 페이지의 수치와 테이블의 수치가 다를 가능성이 높음.<br />
<br />
->
최대한 테이블의 수치와 보고있는 페이지의 수치가 일치하도록..!!<br
/>
<br />
<br />
1. 새로 고침<br />
<br />
<br />
[질문]
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
1.
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<div id="item1" style="background-color:Red;"></div>
<br />
<br />
2.
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<div id="item2" style="background-color:Yellow;"></div>
<br />
<br />
3.
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
<div id="item3" style="background-color:Blue;"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</h2>
<br />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial
class Ex01 :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
//1. DB Select -> item1 ~
item3 수치
//2. Javascript 사용 -> <div> x 3개
접근
//3. CSS의 width를 DB값으로 세팅
//1.
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select
* from tblCount where seq=1";
con.Open();
SqlDataReader reader
= cmd.ExecuteReader();
int item1 = 0, item2 =
0, item3 = 0;
if (reader.Read())
{
item1 = (int)reader["item1Count"];
item2 = (int)reader["item2Count"];
item3 = (int)reader["item3Count"];
Label1.Text = reader["subject"].ToString();
Label2.Text = reader["item1"].ToString();
Label3.Text = reader["item2"].ToString();
Label4.Text = reader["item3"].ToString();
}
reader.Close();
con.Close();
//2. 가져온 수치를 <div>에 적용
string script = string.Format(@"<script
type='text/javascript'>
document.getElementById('item1').style.width
= '{0}px';
document.getElementById('item2').style.width
= '{1}px';
document.getElementById('item3').style.width
= '{2}px';
setTimeout('location.reload();', 1000);
</script>", item1*5, item2*5, item3*5);
this.ClientScript.RegisterStartupScript(this.GetType(), "count",
script);
}
}
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Ex02.aspx.cs"
Inherits="Ex02"
%>
<!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 runat="server">
<title></title>
<style
type="text/css">
#item1, #item2, #item3
{
border:1px solid gray;
width:0px;
height:20px;
margin-left:25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex02.aspx</h2>
<br />
<br />
<h2>
[질문]
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
1.
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<div id="item1" style="background-color:Red;"></div>
<br />
<br />
2.
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<div id="item2" style="background-color:Yellow;"></div>
<br />
<br />
3.
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
<div id="item3" style="background-color:Blue;"></div>
<br />
</h2>
</div>
</form>
<iframe
src="Ex02_background.aspx"
width="0"
height="0"></iframe>
</body>
</html>
ex01 과 같은 화면이지만 내부적으로는 iframe을 이용하여 백그라운드 페이지로 컨트롤 함.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Ex02_background.aspx.cs"
Inherits="Ex02_background"
%>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex02_background.aspx</h2>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial
class Ex02_background
: System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
//Ex02.aspx : 브라우저에 출력
//Ex02_background.aspx :
Ex02.aspx의
iframe
// string script =
string.Format(@"<script type='text/javascript'>
// top.document.getElementById('item1').style.width
= '200px';
// setTimeout('location.reload();',
1000);
// </script>");
//
this.ClientScript.RegisterStartupScript(this.GetType(),
"count", script);
//1.
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = "select
* from tblCount where seq=1";
con.Open();
SqlDataReader reader
= cmd.ExecuteReader();
int item1 = 0, item2 =
0, item3 = 0;
string i1, i2, i3, i4;
i1 = i2 = i3 = i4 = string.Empty;
if (reader.Read())
{
item1 = (int)reader["item1Count"];
item2 = (int)reader["item2Count"];
item3 = (int)reader["item3Count"];
i1 = reader["subject"].ToString();
i2 = reader["item1"].ToString();
i3 = reader["item2"].ToString();
i4 = reader["item3"].ToString();
}
reader.Close();
con.Close();
//2. 가져온 수치를 <div>에 적용
string script = string.Format(@"<script
type='text/javascript'>
top.document.getElementById('item1').style.width = '{0}px';
top.document.getElementById('item2').style.width = '{1}px';
top.document.getElementById('item3').style.width = '{2}px';
top.document.getElementById('Label1').innerText
= '{3}';
top.document.getElementById('Label2').innerText
= '{4}';
top.document.getElementById('Label3').innerText
= '{5}';
top.document.getElementById('Label4').innerText
= '{6}';
setTimeout('location.reload();', 1000);
</script>", item1 * 5, item2 * 5, item3
* 5, i1, i2, i3, i4);
this.ClientScript.RegisterStartupScript(this.GetType(), "count",
script);
}
}
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Ex03.aspx.cs"
Inherits="Ex03"
%>
<!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 runat="server">
<title></title>
<style
type="text/css">
#Button1
{
width: 129px;
}
</style>
<script
language="javascript"
type="text/javascript">
//
<![CDATA[
function
Button1_onclick() {
//입력 아이디
var id =
document.getElementById("TextBox1").value;
//Ex03_background.aspx?id=텍스트박스값
//location.href =
""; // 새로고침
document.getElementById("iframe1").src
= "Ex03_background.aspx?id=" + id;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex03.aspx</h2>
<br />
아이디 :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="아이디 중복 검사" onclick="return Button1_onclick()" /><br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
</div>
</form>
<iframe
id="iframe1"
width="0"
height="0"></iframe>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial
class Ex03_background
: System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
//Ex03_background.aspx
//DB
string[] member = { "test", "hong",
"admin" };
//요청
//Ex03_background.aspx?id=hong
bool result = true;
foreach (string item in
member)
{
if (item ==
Request.QueryString["id"])
{
//중복 아이디 발견!!
result = false;
break;
}
}
//결과
//Response.Write("<script>alert('"
+ result + "');</script>");
string script = string.Format(@"<script
type='text/javascript'>
top.document.getElementById('Label1').innerText
= '{0}';
</script>", result ? "사용가능한 아이디입니다." : "이미 아이디가 존재합니다.");
this.ClientScript.RegisterStartupScript(this.GetType(), "id",
script);
}
}
