Ajax

🔯 Ajax

---

• Ajax는 'Asynchronous JavaScript And XML'의 약자이다.
  : 특정언어나 플랫폼 혹은 프레임워크나 라이브러리를 뜻하는 것이 아니라 Javascript로 원격지로부터 데이터를 읽어오는데 필요한 처리 기술들의 집합체라고 할 수 있다.
• 비동기 통신 처리를 의미라며, Javascript를 이용해 서버와 데이터를 주고받는 방식이다.

 

⦁  XMLHttpRequest 객체는 서버측 Javascript와 통신하기 위한 Ajax핵심 기술이며, Ajax의 가장 강력한 특징인 비동기성을 가능케 한다. 비동기 처리로인해 페이지는 사용자 이벤트를 처리하면서 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 된다.
  ➞  페이지 일부분을 업데이트 하기위한 정보를 서버에 요청 할 수 있다.
  ➞  서버로부터 받은 데이터로 작업을 한다.

 

• XMLHttpRequest(서버와 통신 담당) 객체를 사용하여 서버로부터 데이터를 가져오고, 그 내용을 페이지에 반영해 주기 위해 HTML 태그 요소를 제어하는 DOM 객체에 대한 처리 및 CSS처리의 병행을 보여준다
• 그래서 Ajax가 적용된 페이지는 전체 HTML페이지가 아닌 XML이나 JSON형식으로 구성된 새로운 내용만을 XMLHttpRequest(서버와 통신 담당) 객체를 통해 받아오기 때문에, 페이지 이동 없이 새로운 내용을 사용자에게 제공할 수 있다.

 

 

• 2번째 사진: 웹 브라우저에서 페이지 일부의 정보(b)가 변경 ➞ 서버에 페이지 업데이트를 요청 ➞ 서버는 요청받은 정보를 처리하고 모든 페이지 영역을 HTML로 재구성(a+b+c)하고 완성된 페이지 형태로 브라우저에 되돌려준다.
  = 이 방식은 페이지의 일부만 변경되더라도 서버가 나머지 불필요한 부분까지 전부 업데이트 처리하기 때문에 페이지 갱신의 퍼포먼스가 떨어질 수 밖에 없다.
• 또 한가지 문제점은 서버에서 응답이 돌아올 때까지 웹 브라우저는 아무런 작업도 하지 못하고 기다려야 한다는 점이다. 이러한 문제점을 개선하기 위해 고안된 방식이 Ajax이다.

 

 

🖤 Ajax로 하는 일

---

• text, HTML, XML, JSON 형식으로 작성된 문서 데이터를 HTTP프로토콜을 통해 서버에 요청할 수 있다.
• 구글 맵이나 유튜브 서비스와 같이 웹 페이지의 특정 영역에만 필요한 내용을 갱신할 수 있다.
• 일반적으로 프로그램의 프로세스는 동기화 처리를 한다. 예를 들면, a라는 작업이 끝난후에 b라는 작업을 진행하는 것이다. 사람이 한명이라면 그렇게밖에 일을 하지 못하지만, 사람을 추가로 고용하면 a작업과 b작업을 동시에 진행할 수 있다. 이러한 형태로 작업하는 것을 "비동기적인 처리"라고 하며, Javascript에서는 콜백 함수 형태로 처리한다.

 

 

🖤 jQuery를 이용한 Ajax 응용

---

함수 / 파라미터	설 명
$.ajax() 함수	웹 서버와의 통신 결과에 따라 success()와 error()함수를 선택적으로 호출한다.
xhr	Javascript에서 ajax처리를 위해 사용되는 XMLHttpRequest
textStatus	"error" 고정값을 갖는 문자열이 전달된다.
errorThrown	에러의 원인을 의미하는 문자열이 전달된다. 404에러일 경우 "Not Found"라고 전달되고, 500에러일 경우 "Server Error"라는 문자열이 전달된다.

$.ajax({
	url: "접속할 페이지 주소",
	type: "get/post",
	data:"파라미터 문자열",		//(예시: key=language&value=java)
	dataType: "text/xml/json",
	timeout: 밀리세컨드단위 제한시간,
	cache: 이전 요청에 대한 캐쉬 저장 여부(true: 사용함/false:안함),
	
	/*👌 파일 읽기에 성공한 경우 */
	success: function (data) {	
		// 통신이 성공했을 때 실행되는 함수
	},
	/*👎 파일 읽기에 실패한 경우(주소 오타,웹서버 중지 등) */
	error: function (xhr, textStatus, errorThrown) {
		// 통신이 실패했을 때 실행되는 함수
	}
});

• $.ajax() 함수는 웹서버와의 통신 결과에 따라 success()와 error() 함수를 선택적으로 호출한다.
• 파일 읽기에 성공한 경우 success : success()함수의 파라미터로 서버에서 읽은 결과가 전달되며, dataType에 text,xml,json중 어떤 값을 지정하였는지에 따라 처리 방법이 변하게 된다.
• 파일 읽기에 실패한 경우 error : 세 개의 파라미터가 전달된다.- xhr : Javascript에서 Ajax처리를 위해 사용되는 XMLHttpRequest객체의 원본이다. 이 객체가 포함하는 status속성에 HTTP ERROR CODE (404 : Page Not Found, 500 : Server Error)값이 포함된다.- textStatus : "error"라는 고정값을 갖는 문자열이 전달된다. 
  - errorThrown : 에러의 원인을 의미하는 문자열이 전달된다. 404에러일 경우 "Not Found"라고 전달, 500에러일 경우 "Server Error"값이 포함된다

 

▶  $.ajax() 함수를 사용한 txt 읽기

$(function () {				
    // 버튼의 클릭 이벤트
    $("#mybtn").click(function () {
		
        $.ajax({
            url: "../ajax/txt/01.txt",	// 접속할 페이지 주소
            type: "get",			// get/post
            dataType: "text",		// text/xml/json
            timeout: 30000,		// 밀리세컨드단위 제한시간
            cache: false,		// 이전 요청에 대한 캐쉬 저장 여부(true: 사용함/false:안함)
                   
            /*👌 파일 읽기에 성공한 경우 */
            success: function (data) {
                // 통신이 성공했을 때 실행되는 함수
                //dataType값이 text일 경우에는 단순히 내용에 대한 문자열이라 직접 HTML요소에 출력할 수 있다
                $("#result").html(data);
            },
            /*👎 파일 읽기에 실패한 경우(주소 오타,웹서버 중지 등) */
            error: function (xhr, textStatus, errorThrown) {
                // 통신이 실패했을 때 실행되는 함수
                $("#result").html(textStatus + " (HTTP-" + xhr.status + "/" + errorThrown + ")");
            }
        });
    });
});	// $ 종료구문

<h1>$.ajax() 함수를 사용한 텍스트 읽기</h1>
<div class="exec">
	<input type="button" value="txt파일 가져오기" id="mybtn"/>
</div>
<div class="console" id="result"></div>

▶  $.ajax()함수를 사용한 HTML소스 읽기

$(function () {				
    $("#mybtn").click(function () {
		
        $.ajax({
            url: "../ajax/txt/02.txt",	// 접속할 페이지 주소
            type: "get",			// get/post
            dataType: "text",		// text/xml/json
            timeout: 30000,		// 밀리세컨드단위 제한시간
            cache: false,		// 이전 요청에 대한 캐쉬 저장 여부(true: 사용함/false:안함)
                   
            success: function (data) {
                //dataType값이 text일 경우에는 단순히 내용에 대한 문자열이라 직접 HTML요소에 출력할 수 있다
                $("#result").append(data);
            },
            error: function (xhr, textStatus, errorThrown) {
                $("#result").html(textStatus + " (HTTP-" + xhr.status + "/" + errorThrown + ")");
            }
        });
    });
});

<h1>$.ajax()함수를 사용한 HTML소스 읽기</h1>
<div class="exec">
	<input type="button" value="txt파일 가져오기" id="mybtn"/>
</div>
<div class="console" id="result"></div>

▶  $.ajax()함수를 사용한 XML 읽기

$(function () {				
    $("#mybtn").click(function () {
		
        $.ajax({
            url: "../ajax/xml/03.xml",
            type: "get",
           dataType: "xml",
            timeout: 30000,
            cache: false,
            
            success: function (data) {
                // 읽어온 XML파일안에 포함된 데이터를 추출
                let title = $(data).find("title").text();
                let time = $(data).find("time").text();
                let teacher = $(data).find("teacher").text();
                
                // 추출된 데이터를 화면에 출력하기 위한 HTML요소를 동적으로 생성
                let div = $("<div>");
                let p1 = $("<p>").html(title);
                let p2 = $("<p>").html(time);
                let p3 = $("<p>").html(teacher);
                
                // 메서드 체인을 사용한 동적 요소 결합. <div><p></p><p></p><p></p></div>
                div.append(p1).append(p2).append(p3);
                
                // 화면에 표시
                $("#result").html(div);              
            },

            error: function (xhr, textStatus, errorThrown) {
                $("#result").html(textStatus + " (HTTP-" + xhr.status + "/" + errorThrown + ")");
            }
        });
    });
});

<h1>$.ajax()함수를 사용한 XML 읽기</h1>
<div class="exec">
	<input type="button" value="xml파일 가져오기" id="mybtn"/>
</div>
<div class="console" id="result"></div>

추출되는 03.xml

<?xml version="1.0" encoding="UTF-8"?>
<school>
	<subject>
		<title>나의 하루 일과(교육원)</title>
		<time>매주 월 금 오전</time>
		<teacher>이솝</teacher>
	</subject>
</school>