Ajax(Asynchronous JavaScript and Xml)

Ajax(Asynchronous JavaScript and Xml)

• Ajax 는 비동기 자바스크립트와 xml을 뜻한다. 비동기(Asynchronous)라는 말은 웹브라우저가 서버에 자료를 요청할 때 화면이 갱신되지 않고, 자료를 요청하며 전달받을 수 있음을 의미한다.

1. 비동기(Asynchronous)의 의미

• 비동기(Asynchronous)라는 말은 함수 호출이나 서버에 자료 요청시 함수가 반환될 때까지(서버가 응답할 때 까지) 기다리지 않고 바로 다음 코드를 실행하는 것을 의미한다. 함수를 호출하게 되면 바로 반환된다. 여기서 반환값은 존재하지 않는다. 대신 실제로 함수를 실행하는 다른 스레드에서 코드 실행이 완료되면 콜백 함수 호출의 형태로 함수 실행결과를 전달하게 된다.

2. Ajax의 기본 함수

• load() 함수

load("url", data, 콜백함수);

url : 요청을 보낼 주소
data : 전송할 데이터
콜백함수 : 요청 완료시 실행할 함수

예시

$(function() {
    $("newsWrap_1")
    .load("jquery_ajax_news.html #news_1");

    $("newsWrap_2")
    .load("jquery_ajax_news.html #news_2");
});

• $.ajax() 함수

$.ajax({
    url: "요청 보낼 url",
    data: 전송할 데이터,
    type: "GET or POST",
    dataType: "xml or json...(전송받을 데이터 형식)",
    success: function() {}, // 요청 성공시 실행할 콜백 함수
    error: function() {}    // 에러 발생시 실행할 콜백 함수
});

$.ajax() 함수에는 다양한 옵션들을 객체 형태로 전달하여 설정할 수 있다.

3. Ajax 규칙

• Ajax는 동일 출처 원칙을 가지고 있다. 동일 출처 원칙이란 Javascript 문서를 요청한 서버와 동일한 도메인으로 Ajax 요청을 할 수 있다는 것을 의미한다.

• 예를 들어 www.naver.com 에서 실행되는 자바스크립트에서는 동일 도메인 네이버에 존재하는 자료만을 ajax 기술로 요청할 수 있고, 다음과 같은 다른 도메인의 자료를 요청할 수 없다는 뜻이다.

• 만일 다른 도메인에 있는 자료를 Ajax 기술로 요청하고 싶다면, php나 jsp와 같은 서버사이드 기술을 통해 다른 도메인의 자료를 요청하는 스크립트를 작성한 다음, ajax 기술로 해당 스크립트를 요청에 반환값을 얻어오는 방법이 있다.

• 크로스 도메인이라는 기술을 이용할 수도 있다.