• 회원가입
  • 로그인
  • 구글아이디로 로그인

[AJAX] JQ - $.ajax() 메서드 ★ - 비동기식 AJAX 요청수행. (= ajax메서드 = 아작스메서드)

목차

  1. $.ajax() 정의
  2. $.ajax() 구문
  3. $.ajax() 예제1 - txt 파일 불러오기
  4. $.ajax() 예제2 - xml 파일 불러오기
  5. $.ajax() 예제3 - 체크박스 체크 시, 보이기/숨기기 토글
  6. $.ajax() 예제4 - JSON 형태로 값 반환
  7. $.ajax() 관련 주소

 

$.ajax() 정의

 

비동기 HTTP(Ajax) 요청을 수행.

 


 

1. 비동기 (= 요청과 반환이 동시에 발생 X) 의미.

http 요청이 있을 때 일단 받아서 서버 뒷편에서 조용히 처리 후 그 반환값을 페이지 전체의 새로고침 없이 해당 요청이 있는 자리로 반환해 해당 부분만 바꿈.

 

2. $.ajax() 공식 매뉴얼

https://api.jquery.com/jquery.ajax/

 

 

$.ajax() 구문

[예제]

 

$.ajax({파일경로, 동기화 여부, 성공 시 할일});

$.ajax({url: '파일경로', async: true, success: function(result){...}});

 


[구문]

 

$.ajax({name:value, name:value, ... })

 


[매개변수]

 

async

요청을 비동기적으로 처리할 지 여부 참거짓값.

  • true : 비동기로 처리. (기본값)
  • false : 동기로 처리.

 

beforeSend (xhr)

요청을 보내기 전에 실행할 함수.

 

cache

브라우저가 요청된 페이지를 캐시해야하는지 여부 참거짓.

  • true : 캐시 O. (기본값)
  • false : 캐시 X

  

complete (xhr, status)

요청 완료시 실행할 함수. (성공 및 오류 함수 후)

 

contentType

서버에 데이터를 보낼 때 사용되는 콘텐츠 유형

  • 기본값: "application / x-www-form-urlencoded"

 

context

모든 AJAX 관련 콜백 함수에 대한 "this"값 지정.

 

data

서버로 보낼 데이터를 지정.

  • { a: "bc", d: "e,f" } 경우, "a=bc&d=e%2Cf" 형태로 전달됨.
  • { a: [1,2] } 경우, "a%5B%5D=1&a%5B%5D=2" 형태로 전달됨.

 

dataFilter (data, type)

XMLHttpRequest의 원시 응답 데이터를 처리하는 데 사용되는 함수.

 

dataType

서버 응답에 필요한 데이터 유형.

 

 

  • xml - jQuery를 통해 처리할 수 있는 XML 문서를 반환.
  • html - HTML을 일반 텍스트로 반환. 포함된 스크립트 태그는 DOM에 삽입될 때 평가됨.
  • script - 응답을 JavaScript로 평가하고 일반 텍스트로 반환.
  • json - 응답을 JSON 형태로 평가 후, JS 객체 반환. (jQuery 1.9부터 빈 응답 불가. null 또는 {} 반환해야 함.)
  • text - 일반 텍스트 문자열 형태로 반환.
  • 공백으로 구분해 여러 데이터타입 지정 가능

 

error (xhr, status, error)

요청이 실패 할 경우 실행할 함수.

 

global

요청에 대한 전역 AJAX 이벤트 핸들을 트리거할지 여부 참거짓. 

  • true : 트리거 O (기본값)
  • false : 트리거 X

 

ifModified

마지막 요청 이후 응답이 변경된 경우에만 요청이 성공할지 여부를 지정하는 참거짓. 

  • TRUE : 변경된 경우만 요청 성공.
  • FALSE : 그외에도 요청 성공. (기본값)

 

jsonp

jsonp 요청에서 콜백 함수를 재정의하는 문자열.

 

jsonpCallback 

jsonp 요청에서 콜백 함수의 이름을 지정.

 

password

HTTP 액세스 인증 요청에 사용할 암호를 지정.

 

processData

요청과 함께 전송 된 데이터를 쿼리 문자열로 변환할지 여부를 지정하는 참거짓.

  • TRUE : 쿼리 문자열로 변환 O. (기본값)
  • FALSE : 쿼리 문자열로 변환 X.

 

scriptCharset

요청에 대한 문자 집합을 지정.

 

success (result, status, xhr)

요청이 성공했을 때 실행할 함수.

 

timeout

요청에 대한 로컬 제한 시간. (밀리 초)

 

traditional

전통적인 형식의 매개 변수 직렬화를 사용할지 여부 참거짓.

  • TRUE : 전통 형식 사용 O
  • FALSE : 전통 형식 사용 X

 

type

요청 유형을 지정. (GET 또는 POST)

 

url

요청을 보낼 파일 URL을 지정. (기본값: 현재 페이지.)

 

username

HTTP 액세스 인증 요청에 사용할 사용자 이름을 지정.

 

xhr

XMLHttpRequest 객체 생성에 사용되는 함수.

 

 

$.ajax() 예제1 - txt 파일 불러오기

※ test.txt 파일 내용

 

홈짱닷컴 Homzzang.com

 


※ test.php 파일 내용 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({

            url: "test.txt", 

            success: function(result){

                $("#hz").html(result);

            }

       });

    });

});

</script>


<div id="hz"><h2>홈짱닷컴 주소?</h2></div>

<button>알려줘!</button>

 

 

$.ajax() 예제2 - xml 파일 불러오기

※ level.xml 파일 내용

 

<레벨>

    <lv>1</lv>

    <lv>2</lv>

    <lv>3</lv>

    <lv>4</lv>

    <lv>5</lv>

</레벨>

 


※ level.php 파일 내용.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({

            url: "level.xml",

            type : "POST",

            success: function(xml){

                $(xml).find('레벨').find('lv').each(function(i, e){

                    console.log($(this).text());

                });

            }

       });

    });

});

</script>


<div id="hz"><h2>레벨 종류</h2></div>

<button>알려줘!</button>

 

200618 https://sir.kr/qa/364538

 

$.ajax() 예제3 - 체크박스 체크 시, 보이기/숨기기 토글

※ hz.php 파일 내용

<a href="https://homzzang.com">홈짱닷컴</a>

 


※ index.php 파일 내용

 

<script src="https://code.jquery.com/jquery-latest.js"></script>


<input class="show" type="checkbox" name="show" id="show"><label class="show" for="show">보이기</label></input>


<div id="showbox"></div>


<script>

$('.show').click(function() {

    //alert($(this).attr('id')); // 체크박스 ID 표시

    if(this.checked){ // 체크 O 경우

        $.ajax({

            type: "POST",

            url: 'hz.php',

            data: $(this).attr('id'), //다른 페이지에 체크박스 ID 보내기

            success: function(data) {

                //alert('정상 작동');

                //alert(data);

                $('#showbox').html(data);

            },

            error: function() {

                alert('오류 발생');

            },

            complete: function() {

                //alert('작업 완료');

            }

        });

    } else { // 체크 X 경우

        $('#showbox').html('');

    }

});

</script>

 

(140424) https://stackoverflow.com/questions/23269413

 

$.ajax() 예제4 - JSON 형태로 값 반환

1. ajax 파일

$sql = "SELECT * FROM g5_member WHERE `mb_id` = '{$member['mb_id']}' ";

$row = sql_fetch($sql);

 

$mb_id = $row['mb_nick'];

$mb_nick = $row['mb_nick'];

 

die("{\"mb_id\":\"{$mb_id}\",\"mb_nick\":\"{$mb_nick}\"}");

 


2. ajax 파일롤 값을 data 값을 보낸 파일.

 

...

success: function(response, textStatus) {

    $("#mb_id").val(response.mb_id); 

    $("#mb_nick").val(response.mb_nick);

}

...

 

PS. JSON 문법 보기

 

$.ajax() 관련 주소

 

바위처럼 님 jQuery 84 [ Ajax ] 제이쿼리 - load, $.ajax로 파일 내용 로드하기

https://youtu.be/6560r0EoAoM

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
Event JQ - blur() 메서드 ★ - 포커스 해제/제거(= blur메서드 = 블러메서드) ※ 포커스 시 아웃…
Event JQ - on() 메서드 ★★★★★ - 이벤트핸들러 부착 (= 여러이벤트・여러메서드 함께실행 = 이벤트부착…
Effect JQ - Hide/Show - hide() / show() / toggle() 메서드 ★ - 숨기기/보이기…
Effect JQ - Fade (페이드) ★ - fadeIn() / fadeOut() / fadeToggle() / fa…
Effect JQ - slideDown() / slideUp() / slideToggle() 메서드 ★ - 슬라이드메서드…
1/15
목록
찾아주셔서 감사합니다. Since 2012