Ajax : Ajax특징, XMLHttpRequest클래스, txt 페이지 처리

Ajax ( Asynchronous Javascript and Xml) 특징

1. 비동기방식의 데이터 처리
2. 빠른 페이지 구성을 하기 위해 구현된 기술
   • 페이지 전체를 로드하지않고 페이지 일부부만 로드해서 처리가능하기때문에 빠르다.
3. 백그라운드 영역에서 서버와 통신한 뒤 -> 페이지 일부분에 표시한다.
4. 처리할 수 있는 데이터 형태 : XML, HTML, TXT, JSON
5. Ajax 프레임워크 : JQuery 프레임워크를 사용해서 주로 구현

장점 :

• 전체 데이터 로드 없이 일부분만 로드 가능.
• 페이지 로드 완료시에도 서버로 데이터전송/데이터받기 가능.
• 페이지가 깔끔해진다.

단점 :

• Ajax동작도 페이지 이동을 하는 것이므로 많으면 처리가 느려짐.
• 클라이언트풀링 방식 사용 : 클라이언트가 서버에 데이터를 요청하는 방식.
  • 따라서 서버푸시방식의 실시간 데이터 처리는 불가능.
  • 클라이언트풀링 : 사용자가 원하는 정보를 서버에 요청해서 해당정보를 받는 방식
  • 서버푸시 : 사용자가 원하지않아도 서버가 자동으로 특정 정보를 제공하는 방식
• 바이너리데이터(이진데이터) 전달 불가.
• Ajax스크립트가 포함되어있지 않은 서버로 요청 보낼수없음.
• 클라이언트 로컬PC로 요청보낼 수 없음.

동기방식의 데이터처리 vs 비동기방식의 데이터처리

동기방식 : 데이터를 전달/처리하기 위해선 페이지 이동이 필요하다 (화면전환발생)

• 페이지이동 하면서 서버갔다가 화면도 바뀜
• 서버에 신호를 보내고(요청) 응답을 받아야지만 데이터 처리가능

동기방식 :
http 프로토콜은 기본적으로 클라이언트 쪽에서 request를 보내고 server의 response를 받으면 이어졌던 연결이 끊기게 설계가 되어 있습니다.
그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response로 페이지 전체를 다시 받게 됩니다.
하지만 페이지 내용을 일부만을 업데이트 하고자 하는데 페이지 전체를 다시 로드하게 된다면 자원 낭비겠죠?
Ajax는 html페이지 전체가 아니라 필요한 부분만을 갱신할 수 있도록 XMLHttpRequset 객체를 통해서 요청합니다.
Json이나 xml 형태로 최소한의 필요한 데이터만 받아서 갱신하게 됨으로 자원낭비가 그만큼 줄어들기에 더 나은 서비스를 구현할 수 있습니다
출처 : Ajax란 무엇인가

비동기방식 : 데이터를 전달/처리하기 위해선 페이지 이동이 필요없음 (화면전환발생X)

• 페이지이동은 하면서 서버갔지만 화면이 바뀌지않음
• 서버에 신호를 보내고(요청) 응답결과와 상관없이 데이터 처리가능

XMLHttpRequest 객체

• 비동기방식으로 데이터 전송/수신 하는 객체
• Ajax방식의 데이터처리를 하는 핵심 객체
• 대부분의 브라우저들이 지원하는 객체 (크롬 사파리 오페라, IE …)
• 참고링크 : MDN

XMLHttpRequest.onreadystatechange 속성

• 이벤트 핸들러로 readyState 프로퍼티 전달함
• 통신상태가 변경될대마다 호출되는 이벤트핸들러
• 이 속성이 왜 필요할까?
• Ajax처리 방식은 서버의 응답시간을 알수 없기 때문에 서버의 응답을 처리해주는 이벤트 객체가 필요하기때문!.

XMLHttpRequest.readyState 속성

• http 통신 결과에 따라서 5가지 형태 결과
• return 0 : 초기화가 안된 상태(open 메서드 호출 안 한 상태)
• return 1 : 로드 중(open메서드 호출O, send메서드호출X)
• return 2 : 로드 완료(open메서드 호출O, send메서드호출O, 응답status/header 미처리)
• return 3 : 일부 응답처리가 완료(응답status/header 처리O, 본문 미처리)
• return 4 : 모든 응답 처리 완료

XMLHttpRequest.status 속성

• Http 통신의 상태를 표시하는 코드값
• return 200 : OK (정상처리)
• return 401 : Unauthorized(인증 필요)
• return 403 : Forbidden(액세스 거부)
• return 404 : Not Found(페이지 요청 자원 없음)
• return 505 : Internal Server Error(서버 내부 에러)
• 참고링크1 : http 응답코드
• 참고링크2 : http 응답코드

• XMLHttpRequest.responseText 속성 : 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환합니다.

• XMLHttpRequest.open() : 메서드 처리방식(get/post), URL, 동기(false)/비동식(true)

Ajax를 사용한 화면이동 방식 예시 : txt파일

버튼을 하나 생성해서 버튼 클릭시 서버에 있는 특정 파일의 정보를 불러와서 원하는 위치에 화면 전환없이 내용을 추가해보기

1. 임의의 sample.txt파일을 생성한다.
2. Ajax코드를 작성할 html파일을 생성한다.
3. 지역변수 선언 후 XMLHttpRequest객체생성함수 생성

1. 서버를 통해서 데이터 가져오기 : 방식에 따른 open()과 send() 파라미터값
   1. GET방식 : 주소줄에 파라미터값 가지고 이동
      • xhttp.open(“GET”,”URL?name=홍길동&age=10”,true);
      • xhttp.send(null);
   2. POST방식 : 본문에 파라미터값 가지고 이동
      • GET방식과 달리 한글이 깨질 수 있으므로 setRequestHeader()사용
      • xhttp.open(“POST”, “URL”, true);
      • xhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
      • xhttp.send(“name=홍길동&age=10”);

<script type="text/javascript">
//비동기방식의 처리해야함 => XMLHttpRequest 객체 필요(Ajax처리, 데이터 송수신처리하는 객체)
let xhttp; //1.지역변수
	
//2.XMLHttpRequest객체생성함수
function createHttpRequest(){
	xhttp = new XMLHttpRequest(); //변수에 객체생성		
}

function mySend(){
	//3. createHttpRequest()함수 호출해서 XMLHttpRequest객체생성하기.
	createHttpRequest();
	
	//4. 서버이 응답처리 : onreadystatechange 프로퍼티
	//callFunc은 readyState상태값4, status값200일때 정상처리진행
	xhttp.onreadystatechange = callFunc;
	
	//6.원하는 파일을 읽어서 데이터 처리 : open()
	//open() 이 끝이 아니라 send()로 실제 페이지 요청해야함
	//6-1.get방식
	//send가 null인 이유는 get방식이기때문
	xhttp.open("GET","URL?name=홍길동&age=10",true);
	xhttp.send(null);
	//6-2.post방식
	xhttp.open("POST", "URL", true);
	xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");	   
	xhttp.send("name=홍길동&age=10");
	
}//mySend함수닫음

//5.서버와 클라이언트간의 통신을 완료한 시점을 결정하는 함수
function callFunc(){
	//5-1. onreadystatechange 리턴값 4 && 상태정보(status) 200일때 해당
	//sample.txt파일을 읽어와서 태그에 내용을 추가
	//5-2.응답데이터형식은 responseText 프로터티를 사용해서 일반 텍스트 파일의 값을 읽어오기
	if(xhttp.readyState == 4){
		if(xhttp.status == 200){
			var responseData = xhttp.responseText;
			//5-3.div태그에 전달받은 값추가
			document.getElementById("result").innerHTML = responseData;
		}
	}
}

</script>
</head>
<body>
<!-- 
   버튼을 하나 생성해서 버튼 클릭시 서버에 있는 특정 파일의 정보를 불러와서
   원하는 위치에 내용을 추가해보기 (화면 전환 X)	
 -->
<input type="button" value="파일 가져오기" onclick="mySend()">
<div id="result"></div>

Ajax를 사용한 화면이동 방식 예시

Ajax를 사용한 화면이동방식이 복잡하때문에 JQuery로 조금은 간단하게 나타낼 수 있다.

• 사용형태 :
  1. $.ajax(‘주소’, 옵션);
  2. $.ajax(옵션); 주로 이걸 사용함

• 형태 예시 :

//1번방법 예시
$.ajax('string1.jsp',{
	success : function(data){
		//alert("jsp페이지에서 갔다가 돌아옴 = 성공")
		//data라는 매개변수안에 string1.jsp정보를 다 가져온다
		//alert(data);
		//string1.jsp페이지에서 가져온 정보들 본문 body에 추가하기
		$('body').append(data);
	}
})//ajax닫음
	
//2번방법 기본형
$.ajax({
url:" 이동할 페이지 ",
type:" 전송방식(GET/POST)",
data:" 전송할 데이터",
dataType:" 요청한 데이터 타입 (주로 html, xml, text, json)",
success:function(data){
	데이터 전송 성공시 실행할 코드(즉 페이지 이동하고 돌아왔을때 실핼할 코드)
},
error:function(){
	데이터 전송 실패시 실행할 코드(주로 alert확인)
}

아래는 ajax()사용해서(비동기방식) string1.jsp페이지 정보 불러오기예제이다.

1. 임의의 데이터를 불러올 string1.jsp페이지생성
2. string1.html페이지생성하여 제이쿼리 작성할 준비하기
3. $.ajax(‘주소’, 옵션)방식으로 비동기페이지 처리하기
4. $.ajax(옵션)방식으로 비동기페이지 처리하기

<script src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
	//ajax()사용해서(비동기방식) string1.jsp페이지 정보 불러오기
	//3. $.ajax('주소', 옵션);
	$.ajax('string1.jsp',{
		success : function(data){
			//alert("jsp페이지에서 갔다가 돌아옴 = 성공")
			//3-1. data라는 매개변수안에 string1.jsp정보를 다 가져온다
			//alert(data);
			//3-2. string1.jsp페이지에서 가져온 정보들 본문 body에 추가하기
			$('body').append(data);
		}
	})//ajax닫음
	
	//4. $.ajax(옵션);
	let id = "admin";
	$.ajax({
		url:"string1.jsp",
		type:"POST",
		data: {name: id+"재무팀"},
		dataType:"text",
		success:function(data){
			$('body').append(data);
		},
		error:function(){
			alert("비동기 데이터처리 실패")
		}
	})//에이젝스닫음
	
});//제이쿼리닫음
</script>
</head>
<body>
여긴 html페이지.
<img src="../jq/4.jpg" width="200">
</body>