티스토리 뷰

IT/웹 프로그래밍

[AJAX] AJAX 정의, 함수의 사용 형식, 주요 매개변수 옵션, 예제 코드

Riki 2020. 7. 10. 01:00

 

 

AJAX 정의

Ajax는 Asynchronous(비동기) JavaScript and XML의 약어로

비동기로 데이터 통신을 처리하기 위한 기술로

특정 언어나 플랫폼 혹은 프레임워크나 라이브러리를 뜻하는 것이 아닌 

자바스크립트로 원격지로부터 데이터를 읽어오는데 필요한 처리 기술들의 집합체를 뜻한다.

 

Ajax는 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아서 사용하는 기술로서 

HTTP 요청을 보내면 XML 문서를 응답으로 받게 되므로 사용자가 보고 있는 페이지를

새로 고침(refresh)할 필요 없이 서버에 요청하여 데이터를 가져와 특정 부분만을 변경하는 것이 가능하다.

 

 

 

 

AJAX 함수의 사용 형식

 

$.ajax({
  "url": "접속할 페이지 주소",
  "type": "get/post",
  "data": "파라미터 문자열 key=value&key=value",
  "dataType": "text, jsp, xml, json, jsonp(원격 스크립트 허용)",
  "timeout": 밀리세컨드단위 제한시간,
  "cache" : 이전 요청에 대한 캐시 저장 여부 (true=사용함, false=사용안함),
  "success": function (data) {
  … 통신이 성공했을 때 실행되는 함수 …
  },
  "error": function(xhr, textStatus, errorThrown) {
  … 통신에 실패했을 때 실행되는 함수 …
  }
});

 

 

 

 

 

 

 

 

AJAX 함수의 주요 매개변수 옵션

(1) type(String)
사용할 HTTP 메서드로 일반적으로 POST나 GET을 사용하며 기본값으로 GET을 사용한다.

 

 

(2) data(Object)
$.ajax 유틸리티 함수가 값의 인코딩을 처리하고 요청에 전달되는 프로퍼티를 가진 객체로 GET 요청이면 데이터는 쿼리 문자열로 제공하고 POST 요청이면 데이터는 요청의 본문으로 제공한다.

 

 

(3) timeout(Number)
Ajax 요청의 제한 시간을 밀리 초 단위로 설정하며 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나
error 콜백이 정의되어 있다면 호출된다.

 

 

(4) contentType(String)
요청에 명시되는 콘텐츠 타입으로 생략하면 application/x-www-form-urlencoded가 기본으로 설정되며 이는 폼 전송이 기본으로 사용하는 타입과 동일하다.

 

 

(5) success(Function)
- 응답이 성공 상태 코드를 반환하면 호출되는 함수이다.
- 함수의 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며 dataType 프로퍼티에 명시한 형태로 구성되고
- 두 번째 매개변수는 상태값을 나타내는 문자열이며 항상 success로 나타낸다.

 

 

(6) error(Funcction)
- 응답이 에러 상태 코드를 반환하면 호출되는 함수이다.
- 함수의 매개변수가 세 개 전달되는데 각각 XHR 인스턴스와 상태값이 향상 error 인 메시지 문자열 그리고
선택사항으로 XHR 인스턴스가 반환한 예외 객체다.

 

 

(7) comptete(Function)
- 요청이 완료되면 호출되는 함수이다.
- 함수의 매개변수 두 개가 전달되는데 각각 XHR 인스턴스와 success 혹은 error 를 나타내는 상태 메시지
문자열이다.
- succes나 error 롤백을 명시했다면 이 함수는 해당 콜백이 호출된 후에 실행된다.

 

 

(8) beforeSend(Function)
- 요청이 전송되기에 앞서 먼저 호출되는 함수이며 이 함수는 XHR 인스턴스를 전달받으며 사용자 정의 헤더를
설정하거나 요청 전에 필요한 연산을 수행하는 데 사용할 수 있다.

 

 

(9) processData(Boolean)
- false로 설정되면 URL 인코딩된 형태로 처리되어 전달되는 데이터를 금지한다.
- 기본값은 데이터가 application/x-www-form-urlencoded 타입의 요청에 사용하는 형태의 URL로 인코딩된다.

 

 

(10) ifModified(Boolen)
- true 일 때 Last-Modified 헤더를 확인하여 마지막 요청 이후에 응답 콘텐츠가 변경되지 않았다면 요청이 성공되며 만일 생략하면 헤더를 확인하지 않는다.

 

 

(11) dataType(String)
- 서버에서 응답의 결과로 반환되는 데이터의 형식으로 서버 자원은 올바른 content-type 응답 헤더를 설정해야 하며 이 프로퍼티를 생략하면 응답 텍스트는 어떠한 처리나 평가 없이 콜백에 전달된다.

 

 

 

 

 

 

 

 

AJAX 예제

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
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 파일 불러오기</title>
<script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- 요청으로 읽어올 파일의 경로를 ./test.txt 파일로 지정-->
    $(function( ) {
$("#mybtn").click(function( ) {
$.ajax({
                        url : "./test.txt",
                        type : "GET",
                        dataType : "text",
                        timeout : 30000,
                        cache : false,
                        success : function(data) {
                            $("#result").html(data);
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            $("div").html(
                                    "<div>" + textStatus + " (HTTP-"
                                            + xhr.status + " / " + errorThrown
                                            + ")</div>");
                        }
                    });
                });
    });
</script>
</head>
<body>
    <h3 class="title">$.ajax( ) 함수를 사용한 텍스트 읽기</h3>
    <input type="button" value="txt파일 가져오기" id="mybtn" />
    <br />
    <div class="console" id="result"></div>
</body>
</html>
 
 cs
 

 

url : "./test.txt",

ajax 요청으로 읽어올 파일의 경로를 ./test.txt 파일로 지정한다.

 

 

type : "GET",

HTTP 메서드 전송방식을 GET으로 지정한다.

 

 

dataType : "text",
데이터타입을 text로 지정한다.

 

 

timeout : 30000,
제한시간을 30000 밀리세컨드로 지정하며 30초가 제한시간이 설정된다.

 

 

cache : false,

false로 지정하므로 이전 요청에 대한 캐시를 저장하지 않는다.

 

 

success : function(data) { ~ },
파일 읽기에 성공한 경우에 실행한다. 파일에 작성되어 있는 내용이

success함수의 파라미터인 data로 전달되며 이 값을 result 요소에 출력한다.

 

 

$("#result").html(data);
dataType값이 text일 경우에는 단순히 내용에 대한 문자열이므로

직접 HTML 요소에 출력할 수 있다.

'IT > 웹 프로그래밍' 카테고리의 다른 글

[HTML5] 윤인성, 웹 프로그래밍 입문(한빛 미디어) 연습문제 정답(2장, 3장)  (0) 2020.11.22
[HTML5] 윤인성, 웹 프로그래밍 입문(한빛미디어) 연습문제 1장(시멘틱 웹, 웹2.0, WHATWG)  (0) 2020.07.14
[우분투 톰켓 ] 톰켓(Tomcat) Unknown version of Tomcat was specifed 해결  (0) 2019.04.20
[JSP session 코딩-1] 세션 저장, 삭제, 초기화  (0) 2019.04.12
[JSP 기본] JSP의 특징; 이식성, 서버 자원의 효율적 활용(스레드 기반의 아키텍처)  (0) 2019.04.08
공유하기 링크
'IT/웹 프로그래밍' Related Articles more
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함