• Q&A
  • 회원가입
  • 로그인

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

목차

  1. $.ajax() 구문
  2. $.ajax() 예제1 - txt 파일 불러오기
  3. $.ajax() 예제2 - xml 파일 불러오기

 

$.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

 

PS.

 

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

https://youtu.be/6560r0EoAoM

 


오늘도 즐겁게 열심히 .....

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