[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 (찾을 수 없음)"
• 더 자세히 보기

 

※ 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