diff options
Diffstat (limited to 'files/ko/web/guide/ajax')
| -rw-r--r-- | files/ko/web/guide/ajax/community/index.html | 21 | ||||
| -rw-r--r-- | files/ko/web/guide/ajax/getting_started/index.html | 296 | ||||
| -rw-r--r-- | files/ko/web/guide/ajax/index.html | 71 |
3 files changed, 388 insertions, 0 deletions
diff --git a/files/ko/web/guide/ajax/community/index.html b/files/ko/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..76af2fd193 --- /dev/null +++ b/files/ko/web/guide/ajax/community/index.html @@ -0,0 +1,21 @@ +--- +title: Community +slug: Web/Guide/AJAX/Community +tags: + - AJAX +translation_of: Web/Guide/AJAX/Community +--- +<p>AJAX와 관련된 유용한 mailing lists, newsgroups, 포럼, 다른 커뮤니티를 원한다면, 링크를 클릭하세요.</p> + +<h2 id="Ajax_Resources" name="Ajax_Resources">Ajax Resources</h2> + +<h2 id="Ajax_Workshops__Courses" name="Ajax_Workshops_&_Courses">Ajax Workshops and Courses</h2> + +<ul> + <li><a class="external" href="http://skillsmatter.com/go/ajax-ria">skillsmatter.com</a>: JavaScript, Ajax 그리고 Reverse Ajax 기술의 대한 강의와 이벤트</li> + <li><a href="https://www.telerik.com/forums/aspnet-ajax" rel="noopener">telerik.com</a>: Ajax의 관한 활발한 커뮤니티 포럼</li> + <li><a href="https://community.tableau.com/search.jspa?q=ajax" rel="noopener">community.tableau.com</a>: Ajax에 사용가능한 커뮤니티 지원 포럼 및 강좌</li> + <li><a href="https://www.codementor.io/community/search?q=ajax" rel="noopener">codementor.io</a>: Ajax 포럼 및 튜토리얼이 있는 소셜 플랫폼</li> + <li><a href="https://www.lynda.com/search?q=ajax" rel="noopener">lynda.com</a>: Ajax 기초를 배울 수 있는 튜토리얼 제공</li> + <li><a href="https://www.onlineinterviewquestions.com/ajax-interview-questions/" rel="bookmark">Ajax </a>인터뷰 질문 및 질문의 답변<span class="comment">Interwiki links</span></li> +</ul> diff --git a/files/ko/web/guide/ajax/getting_started/index.html b/files/ko/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..35ba540c6f --- /dev/null +++ b/files/ko/web/guide/ajax/getting_started/index.html @@ -0,0 +1,296 @@ +--- +title: Ajax 시작하기 +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +<div class="warning"><strong>중요</strong>: 해당 문서는 2018/07/31 (원문 : 2018/04/23) 에 마지막으로 번역되었습니다. 원문의 변경이 잦아 내용이 다를 수 있으니 참고하십시오.</div> + +<p><span class="seoSummary">본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다.</span></p> + +<h3 id="AJAX.EB.9E.80.3F" name="AJAX.EB.9E.80.3F">AJAX란?</h3> + +<p>AJAX란 비동기 자바스크립트와 XML (<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 <code><a href="/ko/docs/XMLHttpRequest">XMLHttpRequest</a></code> 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.</p> + +<p>AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줍니다.</p> + +<ul> + <li>페이지 새로고침 없이 서버에 요청</li> + <li>서버로부터 데이터를 받고 작업을 수행</li> +</ul> + +<h3 id="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request" name="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request">1단계 – HTTP request 만드는 방법</h3> + +<p>JavaScript를 이용하여 서버로 보내는 <a href="/ko/docs/Web/HTTP">HTTP</a> request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요합니다. <code>XMLHttpRequest</code> 가 그러한 Object의 한 예입니다. 이러한 로직은 Internet Explorer의 <code>XMLHTTP</code> 라고 불리는 ActiveX 객체로 부터 시작되었습니다. 이후, Mozilla, Safari 등 기타 브라우저들이 Microsoft사의 ActiveX 객체의 매서드와 프로퍼티를 지원하는 <code>XMLHttpRequest</code> 객체를 적용합니다. 그러는 동안, Microsoft도 XMLHttpRequest를 적용합니다.</p> + +<pre class="brush: js">// 구버전을 위한 호환성 코드입니다. 더 이상 이렇게 작성하지 않아도 됩니다. +var httpRequest; +if (window.XMLHttpRequest) { // 모질라, 사파리, IE7+ ... + httpRequest = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE 6 이하 + httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> + +<div class="note">주의: 위의 코드는 XMLHttp 인스턴스를 만드는데 사용된 간단한 버전의 코드입니다. 좀 더 현실적인 사용 예를 보려면 이 글의 3단계를 보십시오.</div> + +<p>서버에 요청(Request)을 하기에 앞서, 서버로 보낸 요청에 대한 응답을 받았을 때 어떤 동작을 할 것인지 정해야합니다. 위에서 생성한 httpRequest 의 <code>onreadystatechange</code> property에 특정 함수(<code>nameOfTheFunction</code>)를 할당하면 요청에 대한 상태가 변화할 때 특정 함수(<code>nameOfTheFunction</code>)가 불리게 됩니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction; +</pre> + +<p>주목할 사항으로는 위에서는 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다는 점입니다. 단순하게 그 함수를 지정하는 것이므로 그 함수로 어떠한 변수도 전달하지 않습니다. 또한 단순하게 함수를 연결하면 되기 때문에 아래와 같이 JavaScript에서 사용되는 "임의 함수(anonymous functions)"방법으로 직접적인 함수 본체를 기입해도 됩니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = function(){ + // 서버의 응답에 따른 로직을 여기에 작성합니다. +}; +</pre> + +<p>위와 같이 서버로 부터 응답을 받은 후의 동작을 결정 한 뒤에, 요청을 합니다. 아래와 같이 HTTP request 객체의 <code>open()</code>과 <code>send()</code>를 사용하면 요청을 할 수 있습니다.</p> + +<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(null); +</pre> + +<p><code>open()</code> 메소드의 파라미터</p> + +<ul> + <li>첫번째 파라미터는 HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식 ─ 입니다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기해야합니다. 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있습니다. HTTP 요구 방식의 보다 자세한 정보는 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 명세</a>를 참고하기 바랍니다.</li> + <li>두번째 파라미터는 요구하고자하는 URL 입니다. 보안상의 이유로 서드 파티 도메인 상의 URL은 기본적으로 호출할 수 없습니다. 요구하는 모든 페이지에 정확한 도메인 네임을 사용하십시오. 그렇지 않으면 <code>open()</code> 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있습니다. 일반적인 오류는 당신의 사이트에 <code>domain.tld</code> 와 같은 형태로 접근하는 것 입니다. 이러한 경우 <code>www.domain.tld</code> 와 같은 형태로 페이지를 요구하기 바랍니다. 만약 다른 도메인으로 요청을 보내고 싶다면 <a href="/ko/docs/Web/HTTP/Access_control_CORS">HTTP 접근 제어 (CORS)</a> 를 참고하기 바랍니다.</li> + <li>세번째 파라미터(생략 가능)는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 <code>true</code>(기본값) 으로 설정된 경우에는 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행됩니다. 이것이 AJAX 의 첫번째 A (Asynchronous : 비동기성) 입니다. + <ul> + <li><code>false</code>로 설정된 경우 동기적으로 작동합니다. (<code>send()</code> 함수에서 서버로부터 응답이 올 때까지 기다림)<sup>역자 덧붙임</sup></li> + </ul> + </li> +</ul> + +<p><code>send()</code> 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 합니다. 예를 들자면 아래와 같습니다.</p> + +<pre><code>"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"</code></pre> + +<p><code>multipart/form-data</code>, JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능합니다.</p> + +<p>만약 <code>POST</code> 형식으로 데이터를 보내려 한다면, 요청(request)에 MIME type을 먼저 설정 해야 합니다. 예를 들자면 <code>send()</code>를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 합니다.</p> + +<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> + +<h3 id="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response" name="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response">2단계 – 서버 응답에 대한 처리</h3> + +<p>서버로 요청(request)을 보내기 전에, 위(1단계 - HTTP Request 만들기)에서는 서버의 응답을 처리하기 위한 자바스크립트 함수의 이름을 지정했었습니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;</pre> + +<p>이 함수는 무슨 일을 수행해야 할까요? 먼저, 해당 함수에서는 요구의 상태값을 검사할 필요가 있습니다. 만약 상태값이 <code>XMLHttpRequest.DONE</code> (상수 4로 정의되어 있습니다.) 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.</p> + +<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) { + // 이상 없음, 응답 받았음 +} else { + // 아직 준비되지 않음 +} +</pre> + +<p><code>readyState</code> 가 가질 수 있는 모든 값의 목록은 <a href="/en-US/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a>에 작성되어있으며 아래와 같습니다:</p> + +<ul> + <li>0 (uninitialized) - (<strong>request가 초기화되지 않음</strong>)</li> + <li>1 (loading) - (<strong>서버와의 연결이 성사됨</strong>)</li> + <li>2 (loaded) - (<strong>서버가 request를 받음</strong>)</li> + <li>3 (interactive) - (<strong>request(요청)을 처리하는 중</strong>)</li> + <li>4 (complete) - (<strong>request에 대한 처리가 끝났으며 응답할 준비가 완료됨</strong>)</li> +</ul> + +<p>(<a class="external" href="/en-US/docs/Web/Guide/AJAX/Getting_Started#Step_2_%E2%80%93_Handling_the_server_response">원문</a> 참고)</p> + +<p>그 다음에는 <a href="/ko/docs/Web/HTTP/Status">HTTP 응답 상태 코드</a>를 검사해야 합니다. 가능한 모든 코드 값의 목록은 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> 에서 확인할 수 있습니다. 아래 예제에서는 AJAX 요청이 정상적으로 처리되었는지 아닌지만을 검사하기 위해 응답 코드가 <a href="/ko/docs/Web/HTTP/Status#%EC%84%B1%EA%B3%B5_%EC%9D%91%EB%8B%B5">200 OK</a> 인지 검사하는 예제입니다.</p> + +<pre class="brush: js">if (httpRequest.status === 200) { + // 이상 없음! +} else { + // 요구를 처리하는 과정에서 문제가 발생되었음 + // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나 + // 혹은 500 (Internal Server Error) 이 될 수 있음 +} +</pre> + +<p>이제 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있다. 그리고 응답 데이터에 접근하기 위한 옵션이 2가지 있습니다.</p> + +<ul> + <li><code>http_request.responseText</code> – 서버의 응답을 텍스트 문자열로 반환할 것이다.</li> + <li><code>http_request.responseXML</code> – 서버의 응답을 <code>XMLDocument</code> 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.</li> +</ul> + +<p>위의 단계는 비동기식 요구(asynchronous request)를 사용했을 경우에 대한 설명입니다(즉, <code>open()</code>의 세번째 변수가 생략되었거나 <code>true</code> 일 경우). 동기식(Synchronous) 방법을 사용한다면 함수(<code>nameOfTheFunction</code>)를 명시할 필요 없이 <code>send()</code> 호출에 의해 반환되는 data를 바로 사용 할 수 있습니다. 그러나 이는 스크립트가 <code>send()</code>를 호출할 때 멈춰지며 서버의 응답이 완료 될 때까지 기다리기 때문에 나쁜 UX를 제공하게 합니다.</p> + +<h3 id="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example" name="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example">3단계 – 간단한 예제</h3> + +<p>이제 이들을 한데 모아서 간단한 HTTP Request를 수행해보겠습니다. 우리가 작성할 자바스크립트는 "I'm a test." 라는 문장이 적힌 <code>test.html</code> 이라는 HTML 문서를 요청해서 문서의 내용을 파라미터로 <code>alert()</code> 함수를 호출할 것입니다. 이 예제는 vanilla Javascript(순수 자바스크립트 - jQuery도 포함되어 있지 않습니다.)로 작성되었습니다. 또한 HTML, XML, PHP 파일들은 같은 경로에 위치되어 있어야 합니다.</p> + +<pre class="brush: html"><button id="ajaxButton" type="button">Make a request</button> + +<script> +(function() { + var httpRequest; + document.getElementById("ajaxButton").addEventListener('click', makeRequest); + + function makeRequest() { + httpRequest = new XMLHttpRequest(); + + if(!httpRequest) { + alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ'); + return false; + } + httpRequest.onreadystatechange = alertContents; + httpRequest.open('GET', 'test.html'); + httpRequest.send(); + } + + function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('request에 뭔가 문제가 있어요.'); + } + } + } +})(); +</script> +</pre> + +<p><br> + 이 예제에서:</p> + +<ul> + <li>사용자는 브라우저 상의 "Make a request" 라는 버튼을 클릭합니다;</li> + <li>버튼의 클릭 이벤트 핸들러는 <code>makeRequest()</code> 함수를 호출합니다;</li> + <li>브라우저는 서버로 요구를 보내고 <code>onreadystatechange</code> 에 설정된 <code>alertContents()</code> 함수가 수행됩니다;</li> + <li><code>alertContents()</code> 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 정상적인 경우 <code>test.html</code> 파일의 내용을 파라미터로 <code>alert()</code> 함수를 호출합니다.</li> +</ul> + +<div class="note"> +<p><strong>주의</strong>: Internet Explorer에서 정적 HTML 파일이 아닌 XML 파일을 받기 위한 request를 보내려면 응답 헤더를 반드시 설정해주어야 합니다. 헤더에 <code>Content-Type: application/xml</code>을 설정해주지 않으면 IE는 XML 요소에 접근하고자 할 때 "Object Expected" 예외에러를 발생시킵니다.</p> +</div> + +<div class="note"> +<p><strong>주의 2</strong>: 헤더에 <code>Cache-Control: no-cache</code> 를 설정 하지 않는다면, 브라우저는 응답을 캐싱하고 다시 요청하지 않을 수 있습니다. 이는 디버깅하기 매우 어려워 질 수 있음을 기억하십시오. 또는 GET 파라미터로 timestamp(시간정보)나 난수를 추가하면 캐싱을 방지할 수 있습니다. (<a href="/ko/docs/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache" title="https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">캐싱 우회</a>를 참고하세요)</p> +</div> + +<div class="note"> +<p><strong>주의 3</strong>: 만약 <code>httpRequest</code> 변수가 전역적으로 사용되면, <code>makeRequest()</code> 함수를 호출하는 여러 함수들 사이에서 경쟁 상태(race condition)가 발생할 수 있으며, 이 경우 다른 데이터를 덮어쓰게 됩니다. <code>XMLHttpRequest</code> 인스턴스는 함수 내의 지역 변수로 선언하는 것을 권장합니다.</p> +</div> + +<p>통신 에러 (서버가 다운되는 상황 등) 상황에서, status 필드를 접근하려 하면 <code>onreadystatechange</code> 메서드에서 예외에러를 발생 시킬 것입니다. 이러한 문제를 예방하기 위해서 <code>if...then</code> 구문을 <code>try…catch</code> 구문으로 감싸주세요.</p> + +<pre class="brush: js">function alertContents() { + try { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } + catch( e ) { + alert('Caught Exception: ' + e.description); + } +} +</pre> + +<h3 id="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response" name="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response">4단계 – 추가 예제 1 (XML response)</h3> + +<p>앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object) 중 <code>reponseText</code> 프로퍼티를 사용했고, <code>reponseText</code>는 <code>test.html</code>파일의 내용을 가지고 있었습니다. 이제 <code>responseXML</code>을 사용해 봅시다.</p> + +<p>첫째로, 나중에 요구하게 될 XML 문서를 만들어 봅시다. 이 문서(<code>test.xml</code>)은 아래와 같은 내용을 담고 있습니다:</p> + +<pre class="brush: xml"><?xml version="1.0" ?> +<root> + I'm a test. +</root> +</pre> + +<p>3단계 예제의 스크립트의 내용도 바꿔줍니다.</p> + +<p>파일의 확장자를 <code>.html</code>에서 <code>.xml</code>로 변경합니다:</p> + +<pre>... +onclick="makeRequest('test.xml')"> +... +</pre> + +<p>그 다음, <code>alertContents()</code>함수에서 <code>alert()</code>함수를 실행하는 라인 <code>alert(httpRequest.responseText);</code>을 아래와 같이 바꿉니다:</p> + +<pre class="brush: js">var xmldoc = httpRequest.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> + +<p>이 방법은 <code>responseXML</code>에 의한 <code>XMLDocument</code> 객체를 가져오고 XML 문서에 포함된 데이터를 가져오기 위해 DOM 메서드들을 사용했습니다. <code>test.xml</code>는 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">여기</a>에서 볼 수 있으며 위와 같이 수정한 업데이트된 테스트용 스크립트는 <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">여기</a>에서 볼 수 있습니다. (해당 테스트 문서는 구버전이기 때문에 button이 아닌 클릭가능한 밑줄 문장으로 구성되어 있습니다.<sup>역자 덧붙임</sup>)</p> + +<h3 id="Step_5_–_추가_예제_2_(data)">Step 5 – 추가 예제 2 (data)</h3> + +<p>마지막으로, 서버에 HttpRequest를 전송할 때 data를 포함해보고 응답을 받아봅시다. 이번에는 동적인 페이지를 요청(Request)할 것입니다. 서버의 <code>test.php</code> 코드는 전송받은 data를 이용하여 "계산된" 문자열인 "Hello, [user data]!"를 반환해줄 것입니다. 그리고 <code>alert()</code> 으로 확인해봅시다.</p> + +<p>먼저 유저가 편집할 수 있는 HTML 구성요소인 텍스트박스를 추가합니다:</p> + +<pre class="brush: html"><label>당신의 이름을 입력해주세요 : + <input type="text" id="ajaxTextbox" /> +</label> +<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> + Make a request +</span></pre> + +<p>텍스트박스에 입력된 유저의 데이터를 얻기 위해 클릭 이벤트 핸들러에도 몇 줄 추가해줍니다. 유저의 데이터와 서버 측에서 실행시킬 스크립트의 URL을 담아 <code>makeRequest()</code> 함수를 호출합니다.</p> + +<pre class="brush: js"> document.getElementById("ajaxButton").onclick = function() { + var userName = document.getElementById("ajaxTextbox").value; + makeRequest('test.php',userName); + };</pre> + +<p>유저 데이터를 받아 서버로 전송시키려면 makeRequest() 함수를 수정해야 합니다. HTTP 요구 방식을 <code>GET</code> 에서 <code>POST</code> 로 변경하고, 유저 데이터를 <code>httpRequest.send()</code> 의 인자로 넣어줍니다:</p> + +<pre class="brush: js"> function makeRequest(url, userName) { + + ... + + httpRequest.onreadystatechange = alertContents; + httpRequest.open('POST', url); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.send('userName=' + encodeURIComponent(userName)); + } +</pre> + +<p><code>alertContents()</code> 함수는 <strong>3단계</strong>와 같이 작성한다면 서버가 반환한 모든 값을 출력하므로 내버려두어도 상관없습니다. 그러나 만약 서버가 "계산된 문자열"과 "유저 데이터" 두 항목을 반환한다고 가정하면 서버의 응답 데이터는 다음과 같을 것입니다(유저가 "우희"라고 작성한다면):</p> + +<p><code>{"userData":"우희","computedString":"안녕, 우희!"}</code></p> + +<p>이 응답 데이터를 <code>alertContents()</code> 에서 사용하려면, <code>responseText</code> 프로퍼티의 값만을 사용한 출력물은 좋은 출력물이라고 할 수 없습니다. (위 문장이 그대로 alert 됩니다.)</p> + +<p>우리는 <code>computedString</code>만을 출력시키기 위해 파싱(parsing : 구문 분석)을 해야만 합니다 (위와 같은 포맷을 JSON 포맷이라고 합니다. 아래의 코드에서는 JSON 내장 객체를 이용하여 파싱합니다.<sup>역자 덧붙임</sup>):</p> + +<pre class="brush: js">function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + var response = JSON.parse(httpRequest.responseText); + alert(response.computedString); + } else { + alert('request에 뭔가 문제가 있어요.'); + } + } +}</pre> + +<p><code>test.php</code> 파일은 아래와 같아야 합니다:</p> + +<pre class="brush: php"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; +$computedString = "안녕, " . $name . "!"; +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array);</code></pre> + +<p>DOM methods에 대한 더 자세한 사항은 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 문서를 확인하십시오.</p> diff --git a/files/ko/web/guide/ajax/index.html b/files/ko/web/guide/ajax/index.html new file mode 100644 index 0000000000..e94f129272 --- /dev/null +++ b/files/ko/web/guide/ajax/index.html @@ -0,0 +1,71 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - DOM + - JavaScript + - References +translation_of: Web/Guide/AJAX +--- +<div class="callout-box"><strong><a href="/ko/AJAX/Getting_Started">시작하기</a></strong><br> +AJAX를 소개합니다.</div> + +<p><span class="seoSummary"><strong>Asynchronous JavaScript + XML(AJAX)</strong>은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, <a href="/ko/docs/Web/HTML">HTML</a> 또는 <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/CSS">CSS</a>, <a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/ko/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ko/docs/Web/XML">XML</a>, <a href="/ko/docs/Web/XSLT">XSLT</a>, 그리고 제일 중요한 <a href="/ko/docs/Web/API/XMLHttpRequest">XMLHttpRequest 객체</a>를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.</span><br> + 이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다. 덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다.</p> + +<p>AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 {{glossary("JSON")}}을 더 많이 사용합니다. JSON과 XML 양쪽 모두 AJAX 모델에서 정보를 담을 때 사용합니다.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="문서">문서</h2> + +<dl> + <dt><a href="/ko/docs/Web/Guide/AJAX/Getting_Started">시작하기</a></dt> + <dd><small>AJAX 기초를 다룬 후에 간단한 연습 예제 두 개를 제공합니다.</small></dd> + <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest API 사용하기</a></dt> + <dd>{{domxref("XMLHttpRequest")}} API는 Ajax의 핵심입니다. 이 글은 몇 가지 AJAX 기술을 사용하는 법을 설명합니다. + <ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using {{domxref("FormData")}} objects</li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li> + <li>using Ajax within <a href="/en-US/docs/Web/API/Worker">Web workers</a></li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></dt> + <dd>The Fetch API provides an interface for fetching resources. It will seem familiar to anyone who has used {{domxref("XMLHTTPRequest")}}, but this API provides a more powerful and flexible feature set.</dd> + <dt><a href="/ko/docs/Web/API/Server-sent_events">서버발 이벤트</a></dt> + <dd>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/Web/API/Event">Events</a> + data</em> inside the web page. See also: <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd> + <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">이진 데이터 주고받기</a></dt> + <dd>The <code>responseType</code> property of the <code>XMLHttpRequest</code> object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd> + <dt><a href="/ko/docs/Web/XML">XML</a></dt> + <dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd> + <dt><a href="/en-US/docs/Parsing_and_serializing_XML">XML 분석 및 직렬화</a></dt> + <dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd> + <dt><a href="/en-US/docs/XPath">XPath</a></dt> + <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd> + <dt>{{domxref("FileReader")}} API</dt> + <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read. File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}.</dd> + <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest">XMLHttpRequest의 HTML</a></dt> + <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to {{domxref("XMLHttpRequest")}}, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX">View All...</a></span></p> + +<h2 class="Other" id="같이_보기">같이 보기</h2> + +<dl> + <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: A New Approach to Web Applications</a></dt> + <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd> + <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest 명세</a></dt> + <dd>WHATWG Living Standard</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="관련_주제">관련 주제</h2> + +<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/XML">XML</a>, <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/XSLT">XSLT</a>, <a href="/en-US/docs/Glossary/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p> +</div> +</div> |