'프로그래밍/Ajax'에 해당되는 글 10건

제목 날짜
  • Ajax textStatusparsereoor Unexpected token A in JSON at position 0 에러 해결 방법 2019.09.12
  • PHP AJAX를 이용해 데이터를 가져와 볼까?(Json 이용, Json 이용하지 않기) 2019.05.19
  • onreadystatechange, onload, responseText 2015.12.28
  • Ajax open, send 메소드, get, post 의미 2015.12.27
  • XMLHttpRequest란? 2015.12.25
  • Ajax보안 2015.12.25
  • Ajax란 무엇인가 2015.12.24
  • .net 프레임워크로 ajax컨트롤 2012.05.31
  • Ajax객체 실행 2012.05.30
  • Ajax Iframe백그라운드로 조정 2012.05.29

Ajax textStatusparsereoor Unexpected token A in JSON at position 0 에러 해결 방법

Ajax textStatusparsereoor Unexpected token A in JSON at position 0 에러 해결 방법

최근에 사이트를 만들던 파악하기 힘들었던 에러를 경험했습니다. Ajax를 이용해 정상적으로 데이터를 가져오지 못하는 경우 Ajax에서 에러가 출력 되도록 코드를 작성하지 않았다면 오류에 대한 내용이나 반응이 전혀 나오지 않습니다.

그래서 Ajax를 사용하면서 아래 오류에 대한 내용을 경험하신다면 제가 작성한 글을 참고하시면 도움이 되실 겁니다.
- Ajax textStatusparsereoor 오류
- errorThrownSyntaxError: Unexpected token A in JSON at position 0 오류

해당 오류를 테스트하기 위해 직접 테스트 페이지 소스 코드를 간단히 작성하였습니다.

 

소스코드

<html>
<head>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
    $("#ajax_btn").click(function(){

		$.ajax({
    		url: "ajax_data.php",
    		type: "post",
    		dataType:"json",
    		data: $("form").serialize(),    		
    	    }).done(function(data){
        	    var ajax_server_data = data.result;
				alert(ajax_server_data);	    	
            }).fail(function (jqXHR, textStatus, errorThrown) {
				alert("jqXHR"+jqXHR +"\ntextStatus" + textStatus+"\nerrorThrown" + errorThrown);
	   		   });

	});
	
});
</script>
</head>
<title>test</title>
<body>

<div>
	<button id="ajax_btn">Ajax Test Btn</button>
</div>

</body>
</html>

 

소스 코드는 http://enjoyrank.com/blog_test_source/ajax_error.php URL에서 확인 가능하며 실제 제가 경험한 오류 화면은 아래 이미지와 같습니다.


 

제가 경험한 오류의 문제는 Ajax를 이용해 서버와 통신을 하는 과정에서 datatype을 JSON으로 지정하였는데 데이터를 보내주는 곳에서 JSON 형태로 데이터를 전달해 주지 않았기 때문에 생긴 오류였습니다.

소스 코드를 라인 단위로 확인하며 작업을 진행했다면 생기지 않았을 오류였는데 코드를 복사하고 붙여 사용하다 보니 해당 오류에 문제가 있을 거라는 생각을 하지 못하다 보니 조금 헤맸었던 기억이 납니다.

Ajax를 통해 실제 데이터를 전달해 주는 PHP 소스 파일도 간단히 작성하였습니다.

<?php
    header("Content-Type: application/json");
    $result = "json 형태로 지정했다면 보내주는 데이타를 json 형태로 보내주어야 함. ";
    echo(json_encode(array("mode" => $_REQUEST['mode'], "result" => $result)));
?>

 

그럼 아래 이미지와 같이 정상적으로 Ajax를 이용해 전달 받은 데이타를 확인하실 수 있습니다.


 

간단한 데이터를 주고받으시려면 JSON 방식을 이용하지 않고 Datatype JSON을 주석 처리하시고 실제 데이터를 전달해 주는 페이지에서도 JSON 방식을 사용하지 않고 echo 문만 작성해 주시면 간단히 데이터 전달이 가능합니다.


하지만 여러 데이터를 주고받고 확장할 가능성이 있다면 JSON 방식을 이용해서 코드를 작성하시면 좋을 것 같습니다.

저와 동일한 문제로 고민하고 있으실 분들에게 쉽게 해결되기를 바라는 마음으로 작성해 보았습니다. 필요하신 분들은 참고 하시기 바랍니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

PHP AJAX를 이용해 데이터를 가져와 볼까?(Json 이용, Json 이용하지 않기)

PHP AJAX를 이용해 데이터를 가져와 볼까? (JSON 이용, JSON 이용하지 않기)

개인적으로 만들고 있는 사이트가 있는데 페이지 전환 없이 데이터를 가져와야 할 경우가 많이 생기더군요.

 

모바일 환경과 PC 환경에서 동일한 화면을 보기 위한 반응형 웹사이트를 만들려고 하다 보니 자연스레 AJAX를 사용해서 화면에 보여줘야 될 것들이 많아졌습니다.

그래서 최근에 AJAX를 이용해 DB에 있는 데이터를 가져와 웹페이지를 만든 경험이 있는데 나중에 제가 참고할 용도로 작성하기도 했지만 필요하신 분들도 있을 거라는 생각에 나름대로 예제 코드를 간단히 작성해 보려고 합니다.

웹 개발을 진행하면서 다양한 방법이 있고 코딩 스타일도 모두 다르다 보니 제가 작성한 소스 코드가 형식에 맞지 않는 부분도 있고 부족한 부분도 있으니 고려하시고 참고하실 내용만 참고하시면 좋을 것 같습니다.

Ajax를 이용해 데이터베이스에 있는 데이터를 가져오기 위해 간단히 데이터베이스 테이블을 먼저 만들었습니다.

먼저 데이타베이스 테이블 하나를 만들고 INSERT 문을 이용해 테스트 데이터를 10개 넣어줬습니다. 

/* DB 테이블 생성 */ 
CREATE TABLE ajax_test(
    seq INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(10),
    age INT(1),
    email VARCHAR(30)
);

/* TEST용 데이타 추가~ */
INSERT INTO ajax_test(name, age,email) VALUES('에이유', 34, 'abcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('비에유', 45, 'babcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('씨에요', 24, 'cbcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('디에요', 18, 'dbcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('이에요', 17, 'ebcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('에프에요', 44, 'fbcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('지에요', 62, 'gbcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('에이치에요', 75, 'hbcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('아이에요', 11, 'ibcdaaa@email.com');
INSERT INTO ajax_test(name, age,email) VALUES('제이에요', 27, 'jbcdaaa@email.com');

 

데이터베이스에 테이블을 만들었고 테스트용 데이터들도 넣어줬으니 이번엔 HTML 페이지를 하나 만들어 보도록 하겠습니다.

저는 간단히 HTML의 TABLE 태그를 이용해 화면을 구성하였으며 버튼을 누를 때마다 없었던 내용이 추가되게끔 만들어 보고자 했습니다.

메인 페이지에서는 PHP 구문이 들어가지 않기 때문에 PHP 파일로 소스 파일을 만들지 않아도 잘 작동 합니다.

세 가지의 버튼이 있는데 첫 번째 버튼은 Ajax를 이용해 데이터를 가져오는 버튼이고 두 번째 버튼은 Ajax json을 이용해 데이터를 가져오기 위한 버튼입니다. 세 번째 버튼은 그냥 태그안 데이터를 없애기 위해 만든 버튼입니다.

jQuery 버튼 이벤트를 통해 각각의 버튼이 눌렸을 때 Ajax를 이용해 DB에 있는 데이터를 간단히 가져오는 화면이고 지금 보니 굳이 없어도 될 코드들도 있네요.

jQuery를 이용해 생성된 데이터를 넣어주는 간단한 구문입니다. document.ready를 작성해 주셔야 버튼 이벤트가 정상적으로 작동합니다. 참고하세요~ 

<html>
<head>
<title>Ajax 테스트 ㄱㄱ</title>
<!-- Ajax를 사용하려면 jquery를 사용하면 편합니다. -->
<script src="js/jquery.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
	//Json을 사용하지 않고 데이터를 가져와 보자.(첫번째 버튼)
	$('#no1').click(function(){
			
		$.ajax({
			url: "source_server_test.php",
			type: "post",
			data: $("form").serialize(),
		}).done(function(data){			
			$("#input_data").html(data);		
		});
		
	});

	//Json을 이용해서 데이타를 가져와 보자. (두번째 버튼)
	$('#no2').click(function(){
		
	    $.ajax({
			url: "source_server_second_test.php",
    	  	type: "post",		
   			data: $("form").serialize(),
   			dataType:"json",
		}).done(function(data){
			//json을 통해 가져온 데이타를 input_data tag에 넣어준다.
			var html = "";
			for(var i = 0; i<data.seq.length; i++){
				html += "<tr>";
				html += "<td>Json - "+data.seq[i]+"</td>";
				html += "<td>"+data.name[i]+"</td>";
				html += "<td>"+data.age[i]+"</td>";
				html += "<td>"+data.email[i]+"</td>";
				html += "</tr>";
			}
	
			$("#input_data").html(html);
 		}); 
          
	});

	//tbody 안에 있는 내용  지우기
	$('#no3').click(function(){
	    $("#input_data").empty();
	});
	
});
</script>
</head>
<body>
<table border="1">
    <thead>
        <tr>
          <th>번호</th>
          <th>이름</th>
          <th>나이</th>
          <th>이메일 주소</th>
        </tr>
    </thead>
    
    <!-- Ajax를 이용해 DB에서 가져온 데이타를 이곳에 넣어주자. -->
    <tbody id="input_data">
    </tbody>    
</table>
<hr>
<button id="no1">ajax 데이터 가져와</button>
<button id="no2">ajax json 이용해서 데이터 가져와</button>
<button id="no3">리셋</button>
</body>
</html>



 

첫 번째는 JSON을 이용하지 않고 데이터베이스에 있는 내용을 가져와서 보내주는 역활을 하는 PHP 소스입니다. 파일명은 source_server_test. php 입니다.


HTML 페이지에서 해당 버튼이 눌렸을 때 DB 접속 후 쿼리를 실행 후 실행한 쿼리 결과를 echo 문으로 단순히 출력하는 PHP 소스입니다.

간단히 JSON을 사용하지 않아도 DB에 있는 데이터를 가져올 수 있었습니다. 제가 테스트하는 환경에서는 한글의 경우 인코딩 형식이 맞지 않아 데이터가 깨져서 제대로 표시가 되지 않더군요. 그래서 iconv를 이용해 인코딩을 변환해 주었습니다.

<?php
//DB연결 mysqli_connect $conn = mysqli_connect("localhost", "데이타베이스이름", "DB 접속 비밀번호", "데이타베이스 접속정보");
include 'include/db_conn.php';

//DB 조회 쿼리문
$db_data_comeon_qr = "SELECT *
                      FROM ajax_test;";
//SQL 명령어 실행~
$db_data_comeon_rs = mysqli_query($conn, $db_data_comeon_qr);

//데이타베이스에 있는 정보를 가져오자~ 루프를 돌면서 전체 데이타를 HTML 만들어서 보내줘야지.
while($row = mysqli_fetch_array($db_data_comeon_rs)) {
    echo "<tr>";
    echo '<td>'.$row['seq'].'</td>';
    echo '<td>'.iconv("EUC-KR","UTF-8", $row['name']).'</td>';
    echo '<td>'.$row['age'].'</td>';
    echo '<td>'.$row['email'].'</td>';
    echo "</tr>";
}

mysqli_close($conn);
?>

 

이번에는 JSON을 이용해 데이터베이스에 있는 내용을 가져오는 역할을 하는 PHP 소스입니다. 파일명은 source_server_second_test. php 입니다.

소스 코드는 금방 작성했는데 JSON_encode로 데이터를 보내줄 때 한글이 제대로 인코딩이 되지 않아서 통신 응답 메시지는 200으로 성공 했는데 데이터가 제대로 표시되지 않아서 시간이 좀 더 걸렸습니다.

<?php
//DB연결 mysqli_connect $conn = mysqli_connect("localhost", "데이타베이스이름", "DB 접속 비밀번호", "데이타베이스 접속정보");
include 'include/db_conn.php';

//json을 php에서 사용하기 위해 필요한 구문
header("Content-Type: application/json");

//DB 조회 쿼리문
$db_data_comeon_qr = "SELECT *
                      FROM ajax_test;";
//SQL 명령어 실행~
$db_data_comeon_rs = mysqli_query($conn, $db_data_comeon_qr);

//DB에서 가져온 데이타를 PHP 배열에 각각 넣어서 JSON으로 전달해 주자.
$db_seq = array();
$db_name = array();
$db_age = array();
$db_email = array();
$test_array = array();

//한글은 iconv를 해줘야 안깨지더군요. 이부분은 환경에 맞춰서 각자 하시면 좋을듯.
while($row = mysqli_fetch_array($db_data_comeon_rs)) {
    array_push($db_seq, $row['seq']);
    array_push($db_name, iconv("EUC-KR","UTF-8", $row['name']));
    array_push($db_age, $row['age']);
    array_push($db_email, $row['email']);
}

//최종 결과를 json으로 전달해 주자.
echo(json_encode(array("mode" => $_REQUEST['mode'], "seq" => $db_seq, "name" => $db_name, "age" => $db_age, "email" => $db_email)));
mysqli_close($conn);
?> 

 

실제 실행 화면인데 제목을 표시하는 TABLE 태그가 기본적으로 표시되었고 가져온 데이터를 확인하기 위한 세 개의 버튼이 있습니다.

각각의 버튼을 누르게 되면 테이블 태그안 내용이 채워지게 됩니다.


 

첫 번째 버튼을 눌렀을 때 Ajax를 이용해 가져온 데이터의 내용이 테이블 태그에 채워지게 됩니다.


 

두 번째 JSON을 이용해 데이터를 마찬가지 방식으로 테이블 태그의 내용이 채워지게 됩니다.


 

마지막 세 번째 버튼을  누르게 되면 TABLE 태그안에 있던 데이터가 삭제 됩니다.


 

제가 작성한 코드가 완벽하지는 않겠지만 PHP Ajax JSON을 이용하는 방식과 이용하지 않고 데이터베이스에 있는 내용을 어떻게 가져오면 되는지 예제 소스 코드를 간단히 작성해 보았습니다.

 

작동 순서에 대한 내용도 간단히 작성해 보았습니다.
HTML 웹페이지 버튼 클릭 → Javascript(jQuery) 버튼 이벤트 감지 → Ajax를 이용해 PHP 소스 파일 접근 → PHP 소스 코드에서 DB 접속 후 DB 결과 전송 → Javascript(jQuery) 전송된 데이터를 받아서 HTML 구문을 만들어 준다.

제가 작성한 소스 코드가 아직 부족한 부분들도 있고 모든 내용에 대한 설명도 많이 부족 합니다만 나름대로 시간이 될 때마다 필요할 만한 소스 코드를 작성해 보려고 합니다.

개인적으로 두 가지 방식을 모두 다 이용해 소스 코드를 작성합니다. 그때그때 필요한 상황에서 저에게 편리한 방법을 사용하는 편인데 어쩔 수 없이 JSON 방식으로 호출받아야 되는 경우가 생기더군요. 예를 들어 데이터는 데이터대로 전달해야 하고 해당 데이터에 대한 상세 정보가 추가로 필요한 경우들이 있습니다.

특정 데이터의 특별한 설명이나 추가적인 부분을 JSON 방식을 이용하지 않아도 데이터를 전송해 줄 수 있긴 하지만 소스 코드가 훨씬 복잡해지고 하나씩 파싱을 해서 데이터를 가져와야 하다 보니 굉장히 불편해지더군요.

간단한 데이터의 경우는 JSON을 이용하지 않고도 Ajax를 이용해 데이터를 주고받을 수 있겠지만 데이터가 복잡해질 수록 JSON을 이용해 데이터를 전송하는 게 좋다고 생각하는 편입니다. 

 

JAVA를 이용해서 데이터를 JSON으로 데이터를 주고받을 땐 굉장히 편했는데 PHP 구문은 익숙지 않다 보니 사용하는 게 좀 더 불편한 것 같습니다.

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

onreadystatechange, onload, responseText

Ajax 서버 전송후 데이터 처리 및 응답 결과

onreadystatechange, onload, responseText, JSON


onreadystatechange

사용자가 요청이 보내면 서버에서 응답 결과를 보내 줍니다.

사용자가 요청을 보내면 언제 도착하는지 알아야 다음 작업을 진행할수 있다.

onreadystatechange이벤트를 통해서 데이터의 현재 상태가 어떠한 상태인지 처리 상태를 알수 있게 해주는 이벤트이다.


onreadystatechange 의 값이 4이면 모든데이터를 받았다는 상태이다.


exam

<script type="text/javascript">

    request.onreadystatechange = callbackFunction;

 

    function callbackFunction() {

        if (request.readyState == 4) {

            //서버에서 데이터가 모두 처리되어 문제가 없을때

        }

    }

</script>


서버에서 HTTP 상태 코드 기준 으로 처리 방법

exam

<script type="text/javascript">

    request.onreadystatechange = function () {

        if (request.readyState == 4 && request.status == 200) {

            //서버에서 데이터가 모두 처리되어 문제가 없을때

        }

    }   

</script>




onload

Ajax onload 이벤트는 응답 데이터를 다 읽어 들였을 때 발생 하는 이벤트 onreadystatechange 나 readyState 처럼 상태를 파악할 필요가 없다.

<script type="text/javascript">

    request.onload = function () {

        //서버에서 데이터가 모두 처리되어 문제가 없을때

    }

</script>





responseText

서버에서 데이터의 내용을 받아올때 사용하는 방법으로 서버에 요청을 보내 응답 결과를 문자열로 받아 낼수 있는 방법이다. 




저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Ajax open, send 메소드, get, post 의미

Ajax open, send  메소드, get, post 의미

Ajax open()

open() 메소드의 역활은 요청을 초기화, HTTP 메소드 및 URL을 설정 하는 역활을 한다.

예시

    request = createHttpRequest(); //XMLHttpRequest 오브젝트 생성한 함수를 request 변수에 담는다.

 

    //open메소드 첫번째 값은 GET 방식이냐? 아니면 POST 방식이냐를 지정한다

    //html <form></form> 에서 전송 하는 타입

    //open메소드 두번째는 같은 도메인에서 해당 값을 블러내

    request.open("GET","/test.xml"); //.으로 open 메소드 접근한다.


Ajax에 open()메소드는 세번째 인자는 기본적으로 설정을 하지 않는다면 비동기로 설정된다.





Ajax send()

Ajax open메소드를 통해 접속을 초기화 한뒤에 send()메소드를 통해 요청을 보내야 한다. 인수는 1개만 보낸다.


각 브라우져에서 오류 없이 전송하기 위해서 가장 적절한 방법은 아래와같은형 태로 보내는게 가장 안적적입니다.


request.send("");





Ajax GET / POST

웹에서 데이타를 보내는 방법은 2가지 입니다. get방식으로 데이터를 서버에 보낼것인지 post 방식으로 보낼것인지 Ajax에서 get 방식으로 데이터를 넘길때는 다음과 같이 표현한다.


GET

예시

//get으로 전송시엔 물음표 뒤에 이름과 값을 넣는다 & 표시는 또 다른 값을 추가하고자 할때 사용

    request.open("GET", "/test.php?value=페이지&check=게시판");

    request.send("");


HTML에서 form 전송시에 서버에선 자동으로 인코딩 처리를 해주어 인코딩을 신경 쓰지 않아도 되지만 XMLHttpRequest에서는 자동으로 해주지 않는다.

인코딩 형식이 맞지 않으면 영어는 문제 없으나 한글은 글자가 깨지기 때문에 인코딩 처리를 해주어야 한다.


예시

<script type="text/javascript">

    //encodeURIComponent = ecma 표준 URL 인코딩 메소드 문자를 UTF-8 인코딩 처리

    var value = encodeURIComponent("페이지");

    var check = encodeURIComponent("게시판");

   

    //setRequestHeader HTTP 요청 헤더를 작성

    request.setRequestHeader("Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8");

    request.open("GET", "/test.php?value="+value + "check=" + check);

    request.send("");

</script>




post

예시

request.open("POST", "/test.php");

    request.send("value=페이지&check=게시판");




저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

XMLHttpRequest란?

XMLHttpRequest란?

Ajax로 실행되는 HTTP 통신은 XMLHttpRequest 규격을 이용하고 있다.

이렇다할 표준은 아니지만 기본 통신 으로 가장 많이 사용되고 있다.


XMLHttpRequest를 지원하는 브라우저

Microsoft Internet Explorer 4.0이후 

Mozilla Firefox 1.0 이후

Netscape 7 이후

Opera 7.6이후

Safari 1.2 이후

Konqueror 3 이후



Ajax의 핵심인 XMLHttpRequest에 의한 송수신 흐름

사용자쪽에서 진행

1. XMLHttpRequest 오브젝트 작성

new XMLHttpRequest()

new ActiveXObject("Microsoft.XMLHTTP")

new ActiveObject("MSXML2.XMLHTTP")


2. HTTP요청 발생

open() 메소드

(POST, GET, 요청하는 url, 동기/ 비동기 지정)

send()메소드

(데이터송신)



서버측에서 진행

1. onreadystatechange 이벤트 (송수신 상태가 변할 때 시작)

  * IE 이외 브라우저에서는 콜백 스타일의 onload 이벤트도 이용 가능


2. readyState 프로퍼티(송수신 상태를 나타내는 값 "4" 송신 완료)

   * onload의 경우는 필요하지 않음


3. responseText 또는 responseXML(데이터를 텍스트 또는 DOMDocument로 수신)



XMLHttpRequest 작성법

윈도우 익스플로러 XMLHtttpRequest 선언문

var request = new ActiveXObject("Microsoft.XMLHTTP");

익스플로러 버전 4.0부터 5.5까지


또는

var request = new ActiveXObject("MSXML2.XMLHTTP");

익스플로러 버전 6.0부터 


MSXML2는 


윈도우 익스플로러 외에는 XMLHttpRequest 선언문

var request = new XMLHttpRequest();


소스코드

<script type="text/javascript">

    function createHttpRequest() {

       

        //윈도우 익스플로러 버전이 4,5,6 버전이라면

        if (window.ActiveXObject) {

            try{

                return new ActiveXObject("Msxml2.XMLHTTP");

            } catch (e) {

                try{

                    return new ActiveXObject("Microsoft.XMLHTTP");

                } catch (e2) {

                    return null;

                }

            }

            //아니면 Win Mac Linux ml, fl, 08 Mac sl Linux k3용

        } else if (window.XMLHttpRequest) {

 

        } else {

            return null;

        }

    }

</script>

 


저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Ajax보안

Ajax보안

Ajax가 이용하는 HTTP 통신은 크로스 도메인 보안을 위해, 요청하는 url이 요청을 요구하는 페이지와 같은 도메인에 있어야한다.


다른도메인에서 JavaScript로는 접근할 수 없게 되어 있는것과 같은 이야기다. 이것은 각 브라우저에 제한 사항 이므로 제작시 신경 써야 하는 부분은 아니다.


다른 도메인의 데이터를 가공하기 위해 서버측 프록시를 뛰워 도메인을 넘어 데이터를 가져오는 방법도 있다고 한다. 이러한경우느 프록시가 보안의 구멍이 되지 않도록 주의 해야한다.


크로스 사이트 스크립트

기본적으로 웹프로그래밍을 하다보면 크로스 사이트 스크립트에 주의 해야한다. 이점은 Ajax도 마찬가지다. 크로스 사이트 스크립트는 사용자가 실수나 또는 임의로 html 태그를 섞어서 응답 데이터를 보낼수도 있다.

이러한 코드를 사용하지 못하도록 정규 표현식을 이용하거나 html 태그가 들어가지 못하도록 문자를 걸러내는 점이 필요하다.


SQL/OS 명령어 삽입 공격(Injection)

SQL Injection 이라는 것은 디비 쿼리문을 통한 공격을 애기한다. 운영되고 있는 사이트에 디비에서 데이터를 호출하여 Ajax를 이용할때는 디비쿼리문을 삽입하여 공격하는것에 대해 주의 해야 한다.


사용자가 DROPT TABLE 형태로 sql을 삽입하여 테이블도 날려버릴수 있으므로 PHP를 예로 들자면 mysql_escape_string(), sqlite_escape_string() 함수를 이용해 특수문자를 처리해야 한다. 


OS 명령어를 주입하여 공격하는 일도 일어날수 있으므로 주의가 필요하다.

system(), 백워드(')등 쉘명령어를 이용할 경우 OS 명령어를 주입하여 공격이 일어날수 있다.

escapeshellcmd(), escapeshellarg() 함수를 이용하여 방어를 막아야 한다.


또한 php.ini에서 magic_quotes_gpc가 on 되어 있다면 자동으로 get/post/cookies 로 넘겨지는 것들을 작은 따옴표 큰따옴표 백슬래스 및 null을 자동적으로 처리되지만 실제로 동작을 체크해 보는것이 필요하고 신중해야한다.


악의 적인 코드가 자기가 관리하고 있는 곳에서 일어나지 않을것이라고 생각하지 않아야 하낟.



암호 파일 관리

암호가 들어있는 정보는 당연히 JavaScript에 넣어두면 안된다. 물론 서버측 스크립트에도 넣어두면 안된다.

HTTP 서버 장애 발생시 php 같은 서버측 코드가 그대로 보여질 가능성있다. 

서버측 암호 파일도 암호화해서 웹으로 공개되지 않는 디렉토리에 보관해야 할것이다.


스크립트 무효화


공격 

스크립트 

언어

대책 

SQL 삽입공격

MySQL 

PHP

$code = mysql_escape_string($_GET['code']);

OS 삽입 공격

Linux 

PHP 

$text = escapeshellarg($text); 

크로스 사이트 스크립트

PHP

$data = htmlspecialchars($data);


저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Ajax란 무엇인가

Ajax란 무엇인가

Ajax라는 말은 2005년 2월 18일에 Adaptive Path라는 회사에 일원이 올렸던 블로그 글하나가 계기가 되어 수식간에 세계로 퍼졌다고 합니다.


얼마 안되 전세계 웹 개발자들이 Ajax에 뜨거운 관심을 보였고 구글이 선도적으로 Ajax 채택으로 많은 개발자들이 구글 사이트에 쓰인 기술을 분석하여, 자바, PHP,Perl 등을 통해 Ajax 관련 툴과 실험사이트가 탄생 했습니다.


Ajax의 핵심은 HTTP 클라이언트를 이용합니다. 인터넷을 대표하는 프로토콜인 HTTP가 기본이 되기 때문에 응용 분야가 매우 넓습니다. 


Ajax는  Asynchronous JavaScript And XMl(비동기 자바 스크립트와 XML의 약자) Ajax에서 XML은 필수가 아니며 TEXT 나 JSON을 사용해도 됩니다.

XML이 굳이 아니어도 상관 없는데 이름은 그렇게 되어있네요.


Ajax의 첫글자 A는 Asynchronous 비동기를 뜻한다.

비동기라는 의미는 서버에 응답을 기다리지 않아도 된다는 의미입니다.


기본적으로 웹프로그램은 사용자가 서버에 요청을 보내면 응답이 올때까지 기다려야 합니다.


Ajax는 일방적으로 비동기 응답을 콜백(callback)으로 수신합니다. Ajax에서 readyState 값이 4라는 의미는 응답을 완전히 받은 상태일때 콜백이 일어나도록 한다고 되어있습니다.


정리 하자면 브라우저(사용자가 인터넷을 이용) -> 로그인시 서버에서 체크를 해봄니다. 그러면 이결과를 다시 브라우저에게 전달 -> 서버에 답변이 올때까지 대기........ 이때 인터넷 홈페이지는 페이지가 로딩되고 있죠 새로고침 하는것처럼 ajax는 이과정 없이 바로 답을 가져올수 있습니다. 페이지 리로딩도 없이 결과를 가져올수 있습니다.




Ajax의 장점과 단점

Ajax는 브라우저에 기본 내장되있는 JavaScript와 HTTP통신 기능을 사용하여 사용자의 페이지 전체를 리로드 하는일 없이 서버와 데이터를 송수신 할수 있습니다. 


장점

1. 페이지 이동 없이 고속으로 화면을 전환

html에 폼 버튼을 눌러 서버에 데이터를 보내면 그것을 받은 서버는 새로운 페이지를 브라우저에 전달하여 완전한 페이지가 됩니다.


하지만 Ajax는 페이지 전환 없이 필요한 부분만 데이터 송수신만을 자유롭게 몇번이고 할수 있습니다.

필요한 경우만 최소한의 데이터만을 서버와 주고 받을수 있어 효율적이고 빠르게 페이이지를 전환할수 있습니다.


2. 서버 처리를 기다리지 않고 비동기 요청이 가능

html에 폼 송신 버튼을 누르면 응답이 돌아올 때까지 보통 브라우저는 다음 작업을 할수 없는 상태이다.

이것을 동기 통신이라고 한다.


하지만 Ajax를 사용하면 비동기로 통신을 할수가 있다. 한번 전송을 보냈어도 인터넷을 사용하는 사람이 서버로 응답을 기다리지 않아도 다음 작업을 할수 있다는 장점이 있다.


3. PHP, ASP, JSP, .NET 등 서버측 처리를 각 PC에 분산 할수 있다.

위언어 처럼 대표적인 웹의 서버측 언어는 서버가 해당 요청을 분석하고 해석한 다음 HTML을 다시 브라우저에게 전달해 줍니다. 

Ajax는 최소의 데이터만 브라우저에 전달하려고 JavaScript 측에서 HTML과 벡터 그래픽도 작성할 수 있기 때문에 서버 작업을 어느정도 부담해줍니다.

모든 사용자가 붙었을때 모든 작업을 서버에서 감당하지 않고 일정부분을 클라이언트에서 가능 한부분은 Javascript를 통해 클라이언트에 일정부분 맡길수 있는 장점이 있다.


브라우저는 html, xhtml 같은 마크업 언어로 받는것이 일반적이다.

그에 반해 Ajax로는 수신 할수 있는 데이터는 텍스트 데이터로도 수신이 가능 하기 때문에 디비에서 받은 값을 조작하여 돌려주지 않아도 되기 때문에 전송량을 줄일수 있다.


4. Ajax 개발은 특별한 툴이 필요하지 않다.

브라우저에서 기본적으로 제공되는 Javascript로 구현 가능하기 때문에 개발하고 사용하는데 특별한 툴이 필요하 지 않다는 장점이 있다.



단점

1. 크로스 브라우저(익스플로러, 크롬, 파이어폭스, 사파리, 오페라등)에 완벽한 기동

브라우저에 내장된 Javascript에 의존하는것은 다양한 브라우저 간에 완전히 동일시 처리가 되지 않을수 있는 단점이 있다.

물론 ECMA나 W3C 표준에 브라우저가 많지만  모든 브라우저에서 완벽한 가동을 보이긴 어려울수 있으므로 유의 해야한다.


브라우저에서 Javascript 나 XMLHttpRequest 응답을 처리할수 없는 브라우저도 있으므로 그에대한 보안이 필요하다.


2. Javascript 언어는 오픈 소스이므로 차별화가 어렵다.

Javascript언어는 클라이언트측이므로 오픈 소스다. 


3. HTTP 클라이언트의 기능 한정

익스플로는 크로스 도메인 시큐리티(cross domain security) 모델이 채용 되어 있다.  이기능은 동일한 웹사이트로부터 데이터에 대해 여러개의 창이 열려 있을경우 보안상 클라이언트의 접근에 도메인을 사용하여 관리하는 기능이다. 요청 대상 url은 요청 하는 페이지와 같은 도메인에 있지 않으면 안된다는 뜻이다.


4. 보안상 주의

아무래도 페이지 이동 없이 비동기로 서버와 호출 하기 때문에 Ajax로 수신하는 데이터가 누군가 데이터를 조작하여 응답 데이터를 보낼수 있으므로 모니터링이 필요하고 접근 하지 못하도록 필터를 해야 할것이다.


5. 작업 처리 되고 있는 것에 대한 안내가 필요

아무래도 동기식 방식으로 호출할땐 페이지가 결과를 보낼때까지 사용자는 기다리면 되지만 Ajax로 호출할떄는 작업이 진행되고 있음에도 다른 작업을 진행할수 있다. 그러므로 Ajax로 데이터를 처리할때는 현재 데이터가 처리중이라면 처리중 메시지를 뛰우는등 작업 처리되는 과정을 사용자에게 보여야 작업이 처리 될것이다.


6. AJax는 서버측 일을 클라이언트에게 일정부분 주지만 역효과로 요청이 많으면 서버 부하가 생길수 있다.

서버측 부하가 없게 하려면 데이터 전송량, 요청회수, 서버 부하등 종합적인 진단과 튜닝이 필요하다.

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

.net 프레임워크로 ajax컨트롤

스크립트매니져 화면에 렌더링 되지 않음


ScriptManager

 - Ajax 처리에 관련된 모든 자바스크립트 코드를 자동으로 생성하는 역할


UpdatePanel

 - Ajax 처리를 하고 싶은 영역을 묶는 역할

페이지 전환 없이 동적으로 데이터를 주고받는다.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex07.aspx.cs" Inherits="Ex07" %>

 

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

   

       <br />

             <asp:ScriptManager ID="ScriptManager1" runat="server">

             </asp:ScriptManager>

             <br />

             이름 :

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

&nbsp;

             <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

             <br />

             <br />

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

             <br />

             <br />

             <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                           이름 :

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

                           &nbsp;

                           <asp:Button ID="Button2" runat="server" Text="Button" />

<br />

<br />

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

                    </ContentTemplate>

             </asp:UpdatePanel>

   

    </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 Ex07 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

       protected void Button1_Click(object sender, EventArgs e)

       {

             Label1.Text = TextBox1.Text + "님 . 현재 시간은 " + DateTime.Now.ToString() + "입니다.";

       }

       protected void Button2_Click(object sender, EventArgs e)

       {

             Label2.Text = TextBox2.Text + "님. 현재 시간은 " + DateTime.Now.ToString() + "입니다.";

       }

}

 





<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex08.aspx.cs" Inherits="Ex08" %>

 

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

                    Ex08.aspx<br />

                    <asp:ScriptManager ID="ScriptManager1" runat="server">

                    </asp:ScriptManager>

                    <br />

                    <br />

             </h2>

             <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                           <h2>

                                 아이디 :

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

                                 &nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button"

                                        Width="189px" />

                                 <br />

                                 <br />

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

                           </h2>

                    </ContentTemplate>

             </asp:UpdatePanel>

             <h2>

                    <br />

             </h2>

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <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 Ex08 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

       protected void Button1_Click(object sender, EventArgs e)

       {

             //아이디 중복검사

             if (TextBox1.Text == "hong" || TextBox1.Text == "test")

             {

                    Label1.Text = "이미 존재하는 아이디.";

             }

             else

             {

                    Label1.Text = "사용 가능한 아이디";

             }

       }

}

 




ajax컨트롤을 통하여 동적으로 생성 db접근도 실시간 접근 가능

DropDownList1 만 오토 포스트백을 True로 변경




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex09.aspx.cs" Inherits="Ex09" %>

 

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

                    Ex09.aspx</h2>

             <asp:ScriptManager ID="ScriptManager1" runat="server">

             </asp:ScriptManager>

             <br />

             <br />

             <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                           <h2>

                                 동이름 :

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

                                 &nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="검색"

                                        Width="135px" />

                                 <br />

                                 <br />

                                 선택 :

                                 <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"

                                        onselectedindexchanged="DropDownList1_SelectedIndexChanged1">

                                 </asp:DropDownList>

                                 <br />

                                 <br />

                                 결과 :

                                 <asp:TextBox ID="TextBox2" runat="server" Width="585px"></asp:TextBox>

                           </h2>

                    </ContentTemplate>

             </asp:UpdatePanel>

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <br />

             <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 Ex09 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

       protected void Button1_Click(object sender, EventArgs e)

       {

             //검색결과 출력

             SqlConnection con = new SqlConnection();

             con.ConnectionString = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;

 

             SqlCommand cmd = new SqlCommand();

             cmd.Connection = con;

             cmd.CommandText = string.Format("select ZIPCODE, '[' + ZIPCODE + '] ' + SIDO + ' ' + GUGUN + ' ' + DONG + ' ' + ISNULL(BUNJI,'') as [item] from zipcode where DONG like '%{0}%'", TextBox1.Text);

 

             con.Open();

             SqlDataReader reader = cmd.ExecuteReader();

 

             DropDownList1.Items.Clear();//초기화

             while (reader.Read())

             {

                    DropDownList1.Items.Add(reader["item"].ToString());

             }

 

             reader.Close();

             con.Close();

       }

 

       protected void DropDownList1_SelectedIndexChanged1(object sender, EventArgs e)

       {

             //결과 주소 1개 선택

             TextBox2.Text = DropDownList1.SelectedItem.ToString();

       }

}

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex10.aspx.cs" Inherits="Ex10" %>

 

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

                    Ex10.aspx<br />

                    <asp:ScriptManager ID="ScriptManager1" runat="server">

                    </asp:ScriptManager>

             </h2>

             <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                           <asp:GridView ID="GridView1" runat="server" AllowPaging="True"

                                 AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966"

                                 BorderStyle="None" BorderWidth="1px" CellPadding="4"

                                 DataSourceID="SqlDataSource1" Width="800px">

                                 <Columns>

                                        <asp:BoundField DataField="ZIPCODE" HeaderText="ZIPCODE"

                                              SortExpression="ZIPCODE" />

                                        <asp:BoundField DataField="SIDO" HeaderText="SIDO" SortExpression="SIDO" />

                                        <asp:BoundField DataField="GUGUN" HeaderText="GUGUN" SortExpression="GUGUN" />

                                        <asp:BoundField DataField="DONG" HeaderText="DONG" SortExpression="DONG" />

                                        <asp:BoundField DataField="BUNJI" HeaderText="BUNJI" SortExpression="BUNJI" />

                                        <asp:BoundField DataField="SEQ" HeaderText="SEQ" SortExpression="SEQ" />

                                 </Columns>

                                 <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />

                                 <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />

                                 <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

                                 <RowStyle BackColor="White" ForeColor="#330099" />

                                 <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

                                 <SortedAscendingCellStyle BackColor="#FEFCEB" />

                                 <SortedAscendingHeaderStyle BackColor="#AF0101" />

                                 <SortedDescendingCellStyle BackColor="#F6F0C0" />

                                 <SortedDescendingHeaderStyle BackColor="#7E0000" />

                           </asp:GridView>

                           <asp:SqlDataSource ID="SqlDataSource1" runat="server"

                                 ConnectionString="<%$ ConnectionStrings:conStr %>"

                                 SelectCommand="SELECT * FROM [zipcode]"></asp:SqlDataSource>

                           <h2>

                                 <br />

                                 <br />

                           </h2>

                    </ContentTemplate>

             </asp:UpdatePanel>

             <br />

             <br />

             <br />

   

    </div>

    </form>

</body>

</html>

 

 






<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex11.aspx.cs" Inherits="Ex11" %>

 

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

                    Ex11.aspx</h2>

             <asp:ScriptManager ID="ScriptManager1" runat="server">

             </asp:ScriptManager>

             <br />

             <br />

             <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                    <ContentTemplate>

                           <h2>

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

                                 <br />

                                 <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">

                                 </asp:Timer>

                           </h2>

                    </ContentTemplate>

             </asp:UpdatePanel>

             <br />

             <br />

             <br />

             <br />

             <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 Ex11 : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

       protected void Timer1_Tick(object sender, EventArgs e)

       {

             Label1.Text = DateTime.Now.ToString();

       }

}

 












다운받은것을 탭추가로 새로 탭을 만들어 항목 선택후 다운받은 dll파일을 추가하게되면 ajax 컨트롤들을 가져올수 있다.



저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Ajax객체 실행

//ajax.js

 

var myAjax; //전역변수

 

function CreateAjax() {

       //브라우저마다 ajax 객체 생성 방법이 상이

 

       if (typeof (ActiveXObject) == "function") {

             //ie6..예전 브라우저

             return new ActiveXObject("Microsoft.XMLHttp");

       }

       else if (typeof (XMLHttpRequest) == "function" || typeof (XMLHttpRequest) == "object") {

             //넷스케이프, ie최신

             return new XMLHttpRequest();

       }

       else {

             alert("브라우저가 Ajax를 지원하지 않습니다.");

             return null;

       }

}

 

페이지 전환없이 시간을 서버에 요청하여 계속 출력 됨.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex04.aspx.cs" Inherits="Ex04" %>

 

<!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: 223px;

             }

       </style>

 

       <script src="ajax.js" type="text/javascript"></script>

       <script language="javascript" type="text/javascript">

// <![CDATA[

 

             function Button1_onclick() {

                    //1. ajax 객체 생성

                    myAjax = CreateAjax();

 

                    //2. 연결 설정(ajax객체가 서버의 어떤 페이지에게 데이터를 요청할지 설정)

                    //  (Method, URL, Async)

                    myAjax.open("GET", "Ex04Ok.aspx?dummy=" + new Date().getFullYear() + new Date().getMonth() + new Date().getDate() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + new Date().getMilliseconds(), true);

 

                    //3. 응답 이벤트 추가(데이터를 수신하는 순간 특정 이벤트 발생 -> 그 이벤트안에서 데이터를 받은 후 처리)

                    myAjax.onreadystatechange = GetData;

 

                    //4. 실행

                    // - 데이터 요청(+ 데이터 전송) -> 대화시도(데이터 주고 받음)

                    myAjax.send("");

             }

 

             function GetData() {

 

                    //if문 필수

                    if (myAjax.readyState == 4 && myAjax.status == 200) {

                           //응답받은 데이터?

                           var data = myAjax.responseText;

 

                           document.getElementById("Label1").innerText = data;        

                    }

             }

 

// ]]>

       </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

       <h2>

                    Ex04.aspx</h2>

             <h2>

                    <br />

                    Ajax<br />

                    <br />

&nbsp;- 자바스크립트의 ajax 객체(XMLHttpRequest)<br />

&nbsp;- 소켓(Socket)을 사용해서 브라우저와 서버간에 데이터 교환(페이지 새로 고침)<br />

                    <br />

                    <br />

                    Ajax 구현 준비물<br />

                    <br />

&nbsp;1. 데이터를 요청하는 페이지(Ajax 구현) : A.aspx&nbsp; -&gt; Ex04.aspx<br />

&nbsp;2. 데이터를 응답하는 페이지 : B.aspx&nbsp; -&gt; Ex04Ok.aspx<br />

                    <br />

                    <br />

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

                    <br />

                    <br />

                    <input id="Button1" style="font-size: large; font-weight: bold" type="button"

                           value="현재 시간 출력하기" onclick="return Button1_onclick()" /><br />

                    <br />

                    <br />

                    <br />

                    <br />

                    <br />

                    <br />

             </h2>

             <br />

             <br />

             <br />

             <br />

             <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 Ex04Ok : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

             //이 페이지는 화면상에 출력하기 위한 용도X

             //ajax객체가 이 페이지를 요청하면 되돌려줄(응답) 데이터를 생성하는 페이지O

 

             //응답하는 데이터의 종류..

             // 1. text

             // 2. xml / html

             // 3. json

             // ...

 

 

             //웹페이지 반환x

             Response.ContentType = "text/plain";//txt MIME

 

             //직접 출력스트림(임시페이지)에 돌려줄 데이터를 기록

             Response.Write("현재 시간 : " + DateTime.Now.ToString());

 

             //종료(Render X)

             Response.End();

    }

}

 








<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex05.aspx.cs" Inherits="Ex05" %>

 

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

 

       <script src="ajax.js" type="text/javascript"></script>

       <script type="text/javascript">

             function Init() {

                    document.getElementById("TextBox1").onchange = IDCheck;

             }

 

             function IDCheck() {

                    //1. ajax 객체

                    myAjax = CreateAjax();

                    //2. 연결 설정

                    myAjax.open("GET", "Ex05Ok.aspx?id=" + document.getElementById("TextBox1").value, true);

                    //3. 받을 데이터 -> 이벤트 등록

                    myAjax.onreadystatechange = GetData;

                    //4. 전송

                    myAjax.send("");

             }

 

             function GetData() {

                    if (myAjax.readyState == 4 && myAjax.status == 200)

                    {

                           var result = myAjax.responseText;

                           if (result == "1")

                                 document.getElementById("Label1").innerText = "사용 가능한 아이디.";

                           else

                                 document.getElementById("Label1").innerText = "사용 불가능한 아이디.";

                    }

             }

       </script>

 

</head>

<body onload="Init();">

    <form id="form1" runat="server">

    <div>

   

       <h2>

                    Ex05.aspx</h2>

             <h2>

                    <br />

                    아이디 중복 검사 :

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

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

             </h2>

             <br />

             <br />

             <br />

             <br />

   

    </div>

    </form>

</body>

</html>

 

 

 

 

보낸 결과값을 처리하는 페이지

Ex05Ok.aspx

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class Ex05Ok : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

             //Ex05Ok.aspx?id=hong

 

             //DB

             string[] member = { "test", "hong", "admin" };

 

             bool result = true;

 

             foreach (string item in member)

             {

                    if (item == Request.QueryString["id"])

                    {

                           //중복 아이디 발견!!

                           result = false;

                           break;

                    }

             }

 

            

             //result?

             Response.ContentType = "text/plain";

             Response.Write(result ? "1" : "0");

             Response.End();

    }

}

 

 

 

 




Ex06.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex06.aspx.cs" Inherits="Ex06" %>

 

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

             body, p, div, span, input, a

             {

                    font-size:12px;

             }

            

             #TextBox1

             {

                    border:7px solid lightgreen;

                    width:300px;

             }

            

             #search

             {

                    color:#343434;

                    border:1px solid gray;

                    width:301px;

                    position:absolute;

                    left:14px;

                    top:91px;

                    background-color:White;

                    display:none;

             }

            

             #searchFooter

             {

                    background-color:#CDCDCD;

                    padding:3px;

             }

            

             .item

             {

                    width:98%;

                    padding:1px;

                    padding-left:5px;

             }

            

             .item:hover

             {

                    background-color:#EDEDED;

                    cursor:pointer;

             }

            

             #searchContent

             {

                    padding-top:5px;

                    padding-bottom:3px;

             }

       </style>

 

       <script src="ajax.js" type="text/javascript"></script>

       <script type="text/javascript">

             var txt, list;

 

             function Init() {

                    txt = document.getElementById("TextBox1");

                    txt.onkeyup = Search;

 

                    list = document.getElementById("search");    

             }

 

             function Search() {

                    //ajax를 통해서 검색어 전송 -> 명단 출력

                    //1. 검색어

                    var search = txt.value;

 

                    if (search == "") {

                           list.style.display = "none";

                    }

 

                    //2. 완성형일때만 반응.. 정규식

                    var regex = /^[가-힣]{1,}$/g;

 

                    if (regex.test(search)) {

                           //3. 완성형으로 입력되었을때만 서버에게 요청

                           //4. ajax 객체

                           myAjax = CreateAjax();

                           //5. 연결 설정

                          myAjax.open("GET", "Ex06Ok.aspx?search=" + encodeURI(search), true);

                           //6. 응답 데이터 이벤트 추가

                           myAjax.onreadystatechange = GetData;

                           //7. 전송

                           myAjax.send("");

                    }

             }

 

             function GetData() {

                    if (myAjax.readyState == 4 && myAjax.status == 200) {

                           var data = myAjax.responseText;

 

                           //뒷처리

                           //가위|가위손|

                           var items = data.split('|');

 

                           document.getElementById("searchContent").innerHTML = "";

 

                           for (i = 0; i < items.length-1; i++) {

                                 //검색어 갯수만큼 -> <div class="item">

                                 var div = document.createElement("div");

                                 div.className = "item";

                                 div.innerText = items[i];

                                 div.onmousedown = function () {

                                        //검색어를 마우스로 선택했을때..

                                        txt.value = event.srcElement.innerText;

                                        list.style.display = "none";

                                 }

 

                                 document.getElementById("searchContent").appendChild(div);

                           }

 

                           list.style.display = "block";

                    }

             }

       </script>

 

</head>

<body onload="Init();">

    <form id="form1" runat="server">

    <div>

   

       <h2>

                    Ex06.aspx</h2>

             <br />

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

             <br />

             <br />

    </div>

 

       <%-- 추천검색어 목록 --%>

       <div id="search">

             <div id="searchContent">

             </div>

             <div id="searchFooter">

                    <div style="float:left;">추천 검색어</div>

                    <div style="float:right;">| 도움말</div>

                    <div style="clear:both;"></div>

             </div>

       </div>

 

    </form>

</body>

</html>

 

 


요청 URL 처리하는 페이지.

Ex06Ok.aspx

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 Ex06Ok : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

             //Ex06Ok.aspx?search=가나

             SqlConnection con = new SqlConnection();

             con.ConnectionString = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;

 

             SqlCommand cmd = new SqlCommand();

             cmd.Connection = con;

             cmd.CommandText = string.Format("select item from tblItem where item like '{0}%'", Request.QueryString["search"]);

 

             con.Open();

 

             //검색 결과 -> 가나|가나초콜렛|가나어쩌구

             string result = "";

 

             SqlDataReader reader = cmd.ExecuteReader();

 

             while (reader.Read())

             {

                    result += reader["item"].ToString() + "|";

             }

 

             reader.Close();

             con.Close();

 

             //반환값 생성

             Response.ContentType = "text/plain";//클라이언트에게.. 현재 돌려받은 내용이 텍스트파일입니다.

             Response.Write(result);

             Response.End();

    }

}

 




 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

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

 

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

&nbsp;<br />

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

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

&nbsp;&nbsp;

                    <br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -&gt; 최대한 테이블의 수치와 보고있는 페이지의 수치가 일치하도록..!!<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 />

&nbsp;</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>

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

    }

}

 

 




 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }
이전페이지 다음페이지
방명록 : 관리자 : 글쓰기
zzarungna's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라

HOME

프로그래밍 코드를 좋아하고 생활속에 필요한

유용한 IT 정보를 작성 하려고 노력 하고 있습니다.

  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • 소스 (1521)
    • 프로그래밍 (409)
      • HTML (22)
      • CSS (30)
      • XML (14)
      • Javascript (27)
      • Jquery (13)
      • Ajax (10)
      • ASP (12)
      • PHP (23)
      • Java (36)
      • JSP (8)
      • 안드로이드 (9)
      • C# (52)
      • Winform (32)
      • WPF (13)
      • ADO.NET (8)
      • ASP.NET(4.0) (24)
      • LINQ (2)
      • ORACLE (9)
      • MS - SQL (24)
      • SERVER (10)
      • Programming Exam (6)
      • MySQL (3)
      • EditPlus (6)
      • 재미삼아만든 프로그램 (3)
    • IT 정보 (385)
    • 스마트폰 정보 (216)
      • 안드로이드 (117)
      • 아이폰 (72)
      • 애플리케이션 (21)
    • 게임 (106)
      • PC (50)
      • PS4 (36)
      • 핸드폰 (17)
    • 윈도우 (60)
    • Sony PlayStation (54)
      • PS4 (35)
      • PS5 (10)
      • PS VITA (3)
      • PlayStation Network (6)
    • SNS (61)
      • 카카오톡 (39)
    • 금융 (50)
    • 개인방송 (33)
    • 유튜브 (35)
    • 만화 (19)
    • 스포츠 (12)
    • IT 용어 (5)
    • 다운로드 (3)
    • 노래 (12)
    • 엑셀 (5)
    • 일상 (50)

카테고리

PC화면 보기