Ajax

티스토리 뷰

web/Ajax

Ajax

자벌레 2018. 3. 6. 11:12

1. Ajax(Asynchronous JavaScript and XML)의 이해

- 비동기 자바스크립트와 XML기반 스크립트를 말합니다.

//비동기 통신 : A페이지에서 B페이지가 응답되면 페이지가 완전히 바뀌는 것이 아니라 B의 데이터만 받아서(Xml, Json, text등으로) A페이지 유지한 채 뿌려주는 것.

ex) 네이버 메인 페이지 뉴스변경 등.

//그리고 데이터가 오던말던 자기 할일 하면 되는 것임. 동기통신처럼 그것만 기다리고 있는 상태가 없음.

//동기 : 형이 청소하다가 동생 콜라시키고 자기는 올때까지 기다리는 것

//비동기 : 형이 청소하다가 동생 콜라시킨 뒤에도 청소하고 콜라가 오면 마시면서 청소하는 것

- 기존의 요청에대한 전체페이지가 응답되었다면,

Ajax를 쓰면 서버는 단지 페이지에서 필요한 데이터만 보내줍니다.

- Ajax는 2005년 Google이 제한하고 만들었습니다.

- Ajax 사용예 : Google Maps, Google Search, Gmail, YouTube, and Facebook
- Ajax 이름에 포함된 XML은 꼭 알아야 Ajax를 사용하는것은 아닙니다.
- Ajax는 동적이고 민첩한 Web page를 생성하기 위한 기술입니다.

2. Ajax의 주요 구성 요소

- XMLHttpRequest : 웹서버와 통신을 담당합니다.

사용자의 요청을 웹서버에 전송하고 웹서버로 부터 받은 결과를 웹 브라우저에 전달 합니다.

- DOM : 문서의 구조를 나타냅니다. 폼 등의 정보나 화면 구성을 조작할 때 사용됩니다.

- CSS : 글자색, 배경색, 위치, 투명도 등 UI와 관련된 부분을 담당합니다.

- 자바스크립트 : 사용자가 마우스를 드래그하거나 버튼클릭을 하면,
XMLHttpRequest객체를 사용해서 웹서버에 요청을 전송합니다.

또한 XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해서 화면을 조작합니다.

3. Ajax 방식

- 웹 브러우져가 아닌 XMLHttpRequest객체가 웹 서버와 통신을 합니다.

- 페이지 이동 없이 특정 HTML 콘트롤이 웹 서버와 통신을 하여 결과를 화면에
출력합니다.

- 웹서버의 응답 결과가 HTML이 아니라 XML 또는 단순 TEXT입니다.

HttpRequest 객체 생성, 통신 보냄 -------------> HttpRequest 받고 처리(post, get 정하기 등)

, response 객체 보냄

자바스크립트로 받은

데이터 처리, 업데이트 <---------------

1. XMLHttpRequest 객체

- 대부분의 브러우저가 지원함으로 XMLHttpRequest를 실행하는데 문제가 없습니다.

- XMLHttpRequest 객체는 reload 없이 서버에서 보내는 데이터를 웹페이지의 한부분을 수정합니다.

1) XMLHttpRequest객체의 함수

- open() - 요청의 초기화, GET/POST 선택, 접속할 URL입력합니다.

- send() - 웹서버에 요청을 전송합니다.

2) XMLHttpRequest객체의 속성

- onreadystatechange - 응답이 도착하면 특정 자바스크립트 함수를 호출해서 결과의 알맞은 작업을 합니다.

그때 사용할 자바스크립트 함수(callback 함수)를 지정합니다.

- readyState - XMLHttpRequest 객체의 요청에 대한 상태를 숫자로 표시합니다. 현재 상태 나타내는 함수

이상태의 변화(로딩중, 3처리중, 4처리완료)가 있을때마다 XMLHttpRequest 객체의
onreadystatechange속성에 설정된 callback함수가 호출됩니다.

- status - XMLHttpRequest객체는 웹서버가 전달한 http 상태코드를 status 속성에 저장합니다.

- responseText/responseXml - 응답의 결과값(텍스트/ XML DOM)을 참조하기 위해서 사용합니다.

2. XMLHttpRequest의 객체 생성(젤먼저 할 일! 메모리에 얘가 있어야 함수를 호출하던가말던가 할것임)

- Chrome, IE7+, Firefox, Safari, and Opera 브라우저는 XMLHttpRequest를 내장하고
있습니다.

객체 생성하는 2개지 방식

window.XMLHttpRequest이 인식가능하다면 새 객체를 생성한다.

위에는 버전에 따라 인식이 안될 수 도 있으므로 아래의 것도 적어두었다.

객체를 생성하면 이를 이용할 수 있는 것이다.

1. Ajax- Request, Response

- 아래의 소스는 Ajax를 사용하여 비동기 요청/응답합니다.

>>>> ajaxTest.html

------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<body>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp;

if (window.XMLHttpRequest) {

// code for modern browsers

xhttp = new XMLHttpRequest();

} else {

// code for IE6, IE5

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xhttp.onreadystatechange = function() {

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

//200 : 정상적인 요청(500, 404 아니라 ok), 4는 성공을 말함

alert(xhttp.responseText);

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.html", true); //요청초기화 get방식, 요청보낼 곳, true: 비동기통신

xhttp.send();

}

</script>

</body>

</html>

------------------------------------------------------------------------

>>> ajax_info.html

------------------------------------------------------------------------

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<p>Ajax는 새로운 프로그래밍 언어는 아닙니다.</p>

<p>Ajax는 민첩하고 동적인 웹페이지를 생성하는 기술 입니다.</p>

</body>

</html>

1) 서버에 요청을 보냅니다.

- open()와 send()를 사용합니다.
- open(GET/POST, 요청URL, true/false);

2) open()에 GET/POST 사용

- GET Request
: GET 방식은 POST 방식보다 간단하고 빠른 방식입니다. 요청 URL뒤에 파라메터를 보냅니다.

xhttp.open("GET", "demo_get2.jsp?fname=Henry&lname=Ford", true);

xhttp.send();

- POST Request
: 서버의 내용을 변경하고자 할때 사용하며, 서버로 보내는 데이터가 많을때 사용하는 방식입니다.
POST방식으로 데이터를 서버로 보낼때는 setRequestHeader()에 Content-type를 명시합니다.
xhttp.open("POST", "demo_post2.jsp", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("fname=Henry&lname=Ford");

3) open()에 동기/비동기 사용

- 동기방식
: 동기화 방식은 요청후 서버의 응답이 있을때까지 기다렸다가 응답이후에 다음작업을 실행합니다.
또한, 웹 서버의 접속자 폭주로 인한 지연,

통신 상태의 불안정한 상태등의환경에서 데이터 처리에 많은 취약한 점을 가지고 있습니다.

>>>>> 동기예제

<!DOCTYPE html>

<html>

<body>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.open("GET", "ajax_info.txt", false);

xhttp.send();

document.getElementById("demo").innerHTML = xhttp.responseText;

}

</script>

</body>

</html>

- 비동기 방식
: 요청후 응답이 있을동안 다음작업을 바로 실행합니다.
요청이 거부될시에 서버의 상태에 따라 다시 처리 요청을 하여 결과를 받아오는
방식으로 Ajax는 비동기 방식을 특징으로 가지고 있으며 비동기 방식을 권장하고 있습니다.

>>>>> 비동기 예제

<!DOCTYPE html>

<html>

<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

//응답이 있을시 받는 이벤트 처리 함수

xhttp.onreadystatechange = function() {

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

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

</script>

</body>

</html>

4) 서버에서 응답을 받습니다.
- XMLHttpRequest object 의 responseText, responseXML 속성을 사용합니다.

>>>>> responseText.html

<!DOCTYPE html>

<html>

<body>

<div id="demo"><h2>Let AJAX change this text</h2></div>

<button type="button" onclick="loadDoc()">Change Content</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

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

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

</script>

</body>

</html>

---------------------------------------------------------------------------------------
>>>> ajax_info.html

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

<p>Ajax는 새로운 프로그래밍 언어는 아닙니다.</p>

<p>Ajax는 민첩하고 동적인 웹페이지를 생성하는 기술 입니다.</p>

</body>

</html>

---------------------------------------------------------------------------------------
>>>>> responseXML.html

<!DOCTYPE html>

<html>

<body>

<h2>My CD Collection:</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>

function loadDoc() {

var xhttp, xmlDoc, txt, x, i;

xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() { //이 함수는 5번 호출됨. readyState 에 따라

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

xmlDoc = xhttp.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName("ARTIST");

for (i = 0; i < x.length; i++) {

txt = txt + x[i].childNodes[0].nodeValue + "<br>";

}

document.getElementById("demo").innerHTML = txt;

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.send();

}

</script>

</body>

</html>

--------------------------------------------------------------------------------------------
>>>>> cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COMPANY>CBS Records</COMPANY>

</CD>

<CD>

<TITLE>Greatest Hits</TITLE>

<ARTIST>Dolly Parton</ARTIST>

</CD>

<CD>

<TITLE>Still got the blues</TITLE>

<ARTIST>Gary Moore</ARTIST>

<COMPANY>Virgin records</COMPANY>

</CD>

<CD>

<ARTIST>Eros Ramazzotti</ARTIST>

</CD>

<CD>

<TITLE>One night only</TITLE>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>Sylvias Mother</TITLE>

</CD>

<CD>

<TITLE>Maggie May</TITLE>

<ARTIST>Rod Stewart</ARTIST>

<COMPANY>Pickwick</COMPANY>

</CD>

<CD>

<TITLE>Romanza</TITLE>

<ARTIST>Andrea Bocelli</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>When a man loves a woman</TITLE>

<ARTIST>Percy Sledge</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

<CD>

<TITLE>Black angel</TITLE>

<ARTIST>Savage Rose</ARTIST>

</CD>

<CD>

<TITLE>1999 Grammy Nominees</TITLE>

<COMPANY>Grammy</COMPANY>

</CD>

<CD>

<TITLE>For the good times</TITLE>

<ARTIST>Kenny Rogers</ARTIST>

<COMPANY>Mucik Master</COMPANY>

</CD>

<CD>

<TITLE>Big Willie style</TITLE>

<ARTIST>Will Smith</ARTIST>

<COMPANY>Columbia</COMPANY>

</CD>

<CD>

<TITLE>Tupelo Honey</TITLE>

<ARTIST>Van Morrison</ARTIST>

<COMPANY>Polydor</COMPANY>

</CD>

<CD>

<TITLE>Soulsville</TITLE>

<COUNTRY>Norway</COUNTRY>

</CD>

<CD>

<ARTIST>Cat Stevens</ARTIST>

<COMPANY>Island</COMPANY>

</CD>

<CD>

<ARTIST>Sam Brown</ARTIST>

</CD>

<CD>

<TITLE>Bridge of Spies</TITLE>

<COMPANY>Siren</COMPANY>

</CD>

<CD>

<TITLE>Private Dancer</TITLE>

<ARTIST>Tina Turner</ARTIST>

<COMPANY>Capitol</COMPANY>

</CD>

<CD>

<TITLE>Midt om natten</TITLE>

<ARTIST>Kim Larsen</ARTIST>

<COMPANY>Medley</COMPANY>

</CD>

<CD>

<TITLE>Pavarotti Gala Concert</TITLE>

<ARTIST>Luciano Pavarotti</ARTIST>

<COMPANY>DECCA</COMPANY>

</CD>

<CD>

<ARTIST>Otis Redding</ARTIST>

<COMPANY>Atlantic</COMPANY>

</CD>

<CD>

<TITLE>Picture book</TITLE>

<ARTIST>Simply Red</ARTIST>

<COMPANY>Elektra</COMPANY>

</CD>

<CD>

<ARTIST>The Communards</ARTIST>

<COMPANY>London</COMPANY>

</CD>

<CD>

<TITLE>Unchain my heart</TITLE>

<ARTIST>Joe Cocker</ARTIST>

</CD>

</CATALOG>

----------------------------------------------------------------------------------------------------------------------

2. Ajax-The onreadystatechange Event

- onreadystatechange Event는 비동기 상태의 요청에 대한 응답시점을 인식할 수 있도록 합니다.
- onreadystatechange Event는 readystate값이 변경될때 마다 호출하는 callback함수를 연결합니다.
- XMLHttpRequest object는 세개의 중요한 프로퍼티를 가집니다.

1) onreadystatechange
   : 이 속성에 설정된 함수는 readyState의 값이 변경 될때 마다 호출됩니다. 이 속성
값을 통해 웹 서버와의 통신 상태를 체크할 수 있습니다.

2) readyState
: 5가지의 요청에 대한 상태를 전달받습니다. (0~4)
   - 0(UNINITIALIZED 객체생성됨): 객체만 생성되고 초기화 되지 않은 상태

- 1(LOADING, 요청중): 연결이 초기화 되었다는 의미 open()가 호출되고 아직 send()가 호출되지 않은 상태

- 2(LOADED 요청시작): 요청의 시작 send()메소드가 불렸지만 status와 헤더는 도착하지 않은 상태

- 3(INTERACTIVE 응답중): 서버가 요청처리를 거의 끝냈을때, 데이터의 일부를 받은 상태

- 4(COMPLETED 응답완료 ): 서버의 응답을 받아 사용할 준비가 되었을때, 데이터를 전부받은 상태

--------------------------------------------------------------------------------------------

open()호출 send()호출

-> 1 ---------- 요청 ----------- 2 ->

웹브라우저 서버

<- 4 ---------- 응답 ----------- 3 <-

응답완료 응답중...

--------------------------------------------------------------------------------------------

3) status

: 서버로부터 도착한 응답의 상태가 어떤지 정보를 가지고 있습니다.

- 200(OK): 요청 정상 처리

- 403(Forbidden): 접근 거부 (서버에서 권한이 없다고 빠꾸시킴)

- 404(Not Found): 페이지 없음

- 500(Internal Server Error): 서버 오류 발생

1. XMLHttpRequest 모듈

- Parameter상에 한글이 들어가면 손상됨으로 문자열을 "UTF-8"로 인코딩해주는

encodeURIComponent()함수를 사용 합니다.

>>>>> WebContent/basic/httpRequest.js

저작자표시

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

준빡블로그

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

자바칩 푸라푸치노

티스토리 뷰

Ajax

티스토리툴바