• 회원가입
  • 로그인

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

목차

  1. $.ajax() 정의
  2. $.ajax() 구문
  3. $.ajax() 예제1 - txt 파일 불러오기
  4. $.ajax() 예제2 - xml 파일 불러오기
  5. $.ajax() 예제3 - 체크박스 체크 시, 보이기/숨기기 토글
  6. $.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

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

 

dataFilter (data, type)

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

 

dataType

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

 

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() 관련 주소

 

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

https://youtu.be/6560r0EoAoM

 


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

찾아주셔서 감사합니다. Since 2012