ajax 이해

ajax란?

ajax란 Asynchronous JavaScript and XML 즉 비동기 자바스크립트와 XML 처리 기술을 말한다.
ajax 새로 생겨난 프로그래밍 언어는 아니다. 다만 이미 존재하고 있던 웹표준을 새로운 방식으로 사용하는 것이다.
ajax는 서버에서 데이터를 교환하는 기술로 전체 페이지를 새로 읽어들이지 않고 한 부분의 내용을 갱신할 수 있는 기술이다.

예를 들어 전체 레이아웃 페이지 이동 없이 게시판의 다른 페이지로 이동하거나 댓글을 저장하거나 글을 저장하거나 페이지 이동 없이 게시물의 본문을 특정 영역에 표시하거나 하는 등등의 일을 할 수 있도록 설계된 기술이 ajax 이다. 비동기적인 또는 비동시적인을 뜻하는 Asynchronous 가 이 기술의 용어에 사용된 것도 그 때문이다. 현재 페이지에서 어떤 작업을 하는 동시에 백그라운드로 다른 작업을 해서 그 결과를 페이지에 표시하거나 다른 작업을 처리할 수 있기 때문이다.

ajax 코드

실행테스트)

 

same origin policy

ajax 즉 XMLHttpRequest 객체를 사용하는 기술은 다른 파일을 페이지 이동 없이(직접 페이지 URL을 열지 않고도) 접근해서 결과값을 받아오거나 페이지에 포함된 스크립트 등을 처리할 수 있다.
이 기술의 근본적은 제약은 불러오려는 작업을 하는 페이지와 연결 대상이 되는 목적 페이지가 같은 도메인 상에 존재해야 한다는 것이다.

http://www.webskills.kr/examples/ajax1.html

위 링크에서 불러올 수 있는 파일의 경로는 아래와 같다.

http://www.webskills.kr/text/text.html
http://www.webskills.kr/examples/ajax/text/sample.php
….

그러나 아래의 경로들은 거부될 것이다.

http://ajax.webskills.kr/text.html  (주소가 www와 다른 host인 ajax에 존재하므로 다른 경로임)
https://www.webskills.kr/text.html (http와 https는 다른 프로토콜이다)
http://www.webskills.kr:8080/test.html (:8080과 같이 다른 포트를 사용한 경우)

이에 대한 보다 자세한 설명은 아래 링크를 참조해보자.

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

한 편 서로 다른 도메인 상에서도 ajax가 가능하도록 하는 방법들이 있는데 이는 아래 링크에서 살펴보기로 하자.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

 

jQuery ajax

대표적인 자바스크립트 라이브러리(Javascript Library)인 jQuery는 그 웹사이트의 표어 “write less, do more”에서 말하는 것처럼 아주 적은 스크립트로 많은 기능들을 구현할 수 있도록 미리 프로그래밍 해놓은 자바스크립트의 기능 덩어리라 할 수 있다. jQuery가 얼마나 적은 코드로 많은 기능을 구현할 수 있는지를 ajax 에서도 확인할 수 있다.

위에서 보여준 예제를 jQuery로 간단하게 구성해보자.

jQuery $.get() 함수를 이용해 텍스트 불러오기

실행테스트)

$.get() 

위 코드는 jQuery의 ajax 함수인 $.get() 함수를 사용했다.

$.get()은 jQuery.get()과 같다. 이 함수의  사용법은 아래 링크에서 자세히 알아보기로 하고 여기서는 약식으로 간단한 사용법만 알아보기로 하자.

http://api.jquery.com/jQuery.get/

사용법 : $.get( url, 성공 후 실행할 함수 );
사용예 : $.get( “ajaxtest.html”, function(data){ //결과값인 data를 활용한 코드 삽입 } );

$(function() {} );

위 예제에서 javascript, jQuery 코드는 $(function() {} ); 구조 안에 있다. 왜 이렇게 쓰는가? 이것은 다른 표현으로는 $(document).ready(function{}); 과 같다. 이것은 스크립트가 문서의 모든 내용을 다 읽어 들인 후에 작동한다는 뜻이다. 즉, 예기치 않게 코드가 쓰여진 순서대로 실행되어 에러가 발생하거나 오작동을 일으키는 것을 방지하기 위한 방법이다.
이는 일반적인 자바스크립트에서는 window.onload=function(){} 과 같다.

$(“#loadtext”).click(function(){ //codes… });

이 부분은 click 이벤트를 캐치하는 함수이다. 즉 id가 loadtext인 요소에 click 이벤트가 일어나면 그 이벤트를 캐치하는 역할을 한다. 여기서는 #loadtext 라는 버튼을 클릭했을 때 이 함수 안의 코드가 실행되게 된다.

$(“#myText”).html(data);

이 코드는 document.getElementById(“mytext”).innerHTML = data; 와 같다.

 

jQuery load() 함수를 이용해 텍스트 불러오기

load() 함수는 ajax 기능을 활용하 파일을 불러다 정해진 객체의 innerHTML을 변경해주는 일을 한다. 위의 ajax 함수인 $.get()과 유사하지만 조금 사용법이 다르다. 단순히 컨텐츠를 불러다 표시해주는 정도의 작업이라면 이 방법이 보다 간단하고 실용적일 것이다. 예제를 살펴보자.

실행예)

 

 

 

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기