Ajax Iframe백그라운드로 조정

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">

#item1, #item2, #item3

{

border:1px solid gray;

width:0px;

height:20px;

margin-left:25px;

}

</style>

</head>

<body>

<div>

<h2>

Ex01.aspx<br />

<br />

[상황] ASPNET.tblCount 테이블의 데이터를 화면에 출력하시오.<br />

 <br />

       - 해당 테이블은 데이터가 잦은 변화가 있음.(계속 설문 진행..)<br />

       - 현재 보고있는 페이지의 수치와 테이블의 수치가 다를 가능성이 높음.<br />

<br />

       -> 최대한 테이블의 수치와 보고있는 페이지의 수치가 일치하도록..!!<br />

<br />

1. 새로 고침<br />

<br />

[질문]

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>

<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">

#item1, #item2, #item3

{

border:1px solid gray;

width:0px;

height:20px;

margin-left:25px;

}

</style>

</head>

<body>

<div>

<h2>

Ex02.aspx</h2>

<br />

<h2>

[질문]

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

<br />

<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>

<br />

</h2>

</div>

</form>

</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">

</head>

<body>

<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">

#Button1

{

width: 129px;

}

</style>

// <![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>

<div>

<h2>

Ex03.aspx</h2>

<br />

아이디 :

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<br />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<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;

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);

}

저작자표시

소스

Ajax Iframe백그라운드로 조정

티스토리툴바

Ajax Iframe백그라운드로 조정

'Programming/Ajax' Related Articles

티스토리툴바