[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