• 회원가입
  • 로그인

[AJAX] JQ - load() 메서드 ★ - 파일 내용 가져오기. (= load메서드 = 아작스 로드메서드)

목차
  1. load() 구문
  2. load() 예제 - 파일 내용 전체 불러오기
  3. load() 예제 - 파일의 특정 부분 불러오기
  4. load() 예제 - 파일 불러온 후 추가로 함수 실행
  5. load() 관련 주소

 

 

load() 구문

 

$("선택자").load(URL data, callback(responseTxt, statusTxt, status, xhr, xhr.status));

 


[매개변수]

 

URL

필수.  불러올 내용이 있는 파일 주소.

 

data

선택.  URL 파일의 특정 내용을 불러올 선택자. 

※ URL 주소 뒤에 한 칸 띄우고 연이어 적어줌.


callback(responseTxt, statusTxt, xhr, xhr.status)

선택.  추가로 실행할 함수 (다른 매개변수 가질 수 있음).

※ 참고: load() 메서드로 서버와 통신 시, 결과는 responseTxt, statusTxt, xhr, xhr.status 변수 등에 담겨서 반환되는데, 이 변수들을 callback 함수의 매개변수로 사용 가능. 

 

responseTxt

선택. 서버에 요청 완료 시, 파일의 내용.

 

statusTxt

선택. 파일 요청 상태 표시.  (가능값 종류)
success : 호출 성공.

error : 호출 실패.

 

xhr

선택. 통신 결과를 XMLHttpRequest 객체 형태로 반환.

※ 에러 시, 어떤 에러 내용 반환. 

 

xhr.status 

선택. 요청 파일의 상태. 

200 : "OK (통신성공 상태)" ★

403 : "Forbidden (접근금지 상태)"

404 : "Not Found (찾을 수 없음)"

더 자세한 정보는 아래 좌표 참고 

https://homzzang.com/b/html-154 

 

 

※ test.txt 파일 내용. (= 아작스로 불러올 내용)

 

<h2>홈짱닷컴</h2>

<p id="domain">Homzzang.com</p>

 

 

load() 예제 - 파일 내용 전체 불러오기

 

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

<script>

$(document).ready(function(){

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

        $("#hz").load("test.txt");

    });

});

</script>


<div id="hz"><h2>여긴 어디?</h2></div>

<button>알려줘!</button>

 

 

load() 예제 - 파일의 특정 부분 불러오기

 

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

<script>

$(document).ready(function(){

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

        $("#hz").load("test.txt #domain");

    });

});

</script>


<div id="hz"><h2>여긴 어디?</h2></div>

<button>알려줘!</button>

  

 

load() 예제 - 파일 불러온 후 추가로 함수 실행

 

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

<script>

$(document).ready(function(){

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

        $("#hz").load("test.txt", function(responseTxt, statusTxt, xhr, xhr.status)

            if(statusTxt == "success" && xhr.status == 200) {

                alert("알고있지롱. 알려줄게.");

            } else { 

                alert("에러 발생: " + xhr.status + ": " + xhr.statusText);

            }

        });

    });

});

</script>


<div id="hz"><h2>여긴 어디?</h2></div>

<button>알려줘!</button>

 

※ 에러 발생 상태를 보려면, test.txt 부분을 다르게 임의로 변경.

 

load() 관련 주소

 

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

https://youtu.be/6560r0EoAoM

 

 

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

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