STUDY/jQuery

[jQuery] AJAX 설명과 기본 사용 방법 정리

ReCode.B 2022. 9. 30. 15:57
728x90

 

정리 참고 링크 :http://www.tcpschool.com/ajax/ajax_intro_basic

이전에 알아야할 개념 ↓ 

제이쿼리 정의 : https://rebornbb.tistory.com/entry/jQuery-jQuery-%EC%A0%95%EC%9D%98%EC%99%80-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC

 

 AJAX  

동적으로 데이터를 가져오는 작업들

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.

 - JSON

 - XML

 - HTML

 - 텍스트 파일 등

Ajax의 특징

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.

2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.

3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

• 순수 javascript를 이용한 ajax는 브라우저 마다 사용방법이 달라 브라우저 마다 다른형태로 구현해야 하는 부담이 있다.
• jQuery AJAX의 경우 $.ajax()함수를 이용해서 모든 브라우저에서 돌아 가도록 구현 할 수 있다.
• $.ajax()로 모든 AJAX형태를 구현할 수 있고 좀더 쉽게 구현 할 수 있도록  load, get, post, getjson, getxml를 구현하였다.
 

 AJAX 기본 사용 방법 

$. ajax() 함수에 웹서버로 보내기 위한 요청설정정보와, 통신이 성공했을경우에 실행될 함수,

통신에 실패했을 경우 실행될 함수를 설정한다.

$.ajax({
    url: '접속할 페이지 주소',
    type: '전송 방식 (GET / POST)',
    data: '전송할 데이터 - 파라미터 문자열 key=value&key=value',
    dataType: '요청한 데이터 형식 (html / xml / json / jsonp)',
    timeout : '밀리세컨드단위 제한시간',
    cache : '이전요청에대한 캐쉬저장여부 (true=사용함, false=사용안함)',
    succes: function(data){ 
        // 전송에 성공하면 이 콜백 함수를 실행 (data 에는 응답받은 데이터가 저장된다)
    },
    error: function(){
        // 전송에 실패하면 이 콜백 함수를 실행
    }
});

 

load()함수

TEXT나 다른 HTML을 읽어오기위한 코드 축약

$("CSS셀렉터").load(
"읽어올 대상의 URL"
[, function() {...읽기에 성공한후 실행될 함수}]
);

 

load()함수는 TEXT파일이나 HTML 파일의 전체내용을 읽어와 특성요소안에 풀력하는 것을 기능으로 하지만, 

어떠한 HTML페이지의 특정요소에 대한 내용만을 읽어오는것도 가능한데, 특정 id값을 선별 단위 기준으로 한다.

 

아래코드는 readme.html파일의 전체내용중에서 #my라는 id값을 갖는 요소만을 읽어올 경우에 대한 ㄷ대상 url의 지정방법을보여준다.(주의할점 : 대상 url과 id값을 의미하는 #기호사이에 공백이있어야함)

$("출력할 대상의 셀렉터").load("readme.html #my");

 

Content-Type의 종류

Content-Type 설명
text/text 일반 텍스트 파일
text/xml XML형식
application/json JSON형식
application/javascript javascript소스코드, JSONP일경우 사용한다.

 

웹프로그램에게 파라미터 전달하기

요청에있어 브라우저는 웹프로그램이 결과를 생성하는데 필요한 조건값을 전송할수있는데 이를 파라미터라고한다.

$.ajax() 함수에서는 이 파라미터를 "data"속성을 통해 전달하며, 이값들은 웹프로그래머에 의해 정의된다.

구성형식은 일반적으로 다음과 같다.

data: "이름1=값1&이름2=값2&...이름n&값n"

$.ajax()함수에서는 URL파라미터를 다음과 같이 JSON형식으로도 구성할수있다.

data : {
이름1: 값, 이름2: 값2, ... 이름n: 값n
}

 

DOM트리구조 XML문서

XML은 HTML과 같이 문서구조를 트리형태로하여 객체화할수있는데 이러한 객체형태를 DOM(document object model)이라 한다.

100ajax.zip
0.10MB

 

 

100ajax.zip 예제파일을 열때 오류뜰 경우 해결방법 ↓

프로젝트 properties > JavaBuildPath > Libraries > Add Library

ServerRuntime > 아파치톰캣 선택 > Finish

 

728x90