AJAX의 기술은 요즘들어 페이지에 없어서는 안될 부분으로 상당히 많이 사용되곤 한다. 물론 아직까지는 대형 사이트의 경우 JQUERY를 그다지 선호호지 않기 때문에 순수 JAVASCRIPT 를 이용하여 자체 스크립팅된 코드를 사용한다.
하지만 알다시피 일개미 개발자에게 주어진 시간이란게 없고 일부 JAVASCRIPT 라이브러리들은 JQUERY 를 요구하기에 사용하는 편이 정신 건강에 좋다.
이번에 소개하는 메소드도 AJAX와 관련된 $.load() 라는 메소드이다. 이 메소드는 전에 잠깐 본적은 있지만 실제로 사용해 본적은 없어서 추후 사용할 목적으로 포스팅을 남기고자 한다.
$.load() 메소드는 JQUERY API 에서는 아래와 같이 소개가 되고 있다.
API 문서를 보면 알다시피 AJAX 요청시 보단 축소된 형태이며 비슷하다면 할 수 있는데 $.get() 메소드와 비슷하다고는 할 수 있겠으나 이녀석은 특정 요소에 결과를 보여주는게 목적으로 서로간 비슷한 관계 정도로만 보면 될 것 같다.
| .load( url [, data ] [, complete ] ) |
API 문서에도 잘나와있지만 직접 실행해보니 몇가지 중요한 부분이 있어 아래와 같이 각 인자값들을 설명하고자 한다. 인자값중 중요한 부분은 data 부분이다. 보내는 형태에 따라 GET 또는 POST 전송이 정해지니 주의해야한다.
|
url (필수) |
Type: string
|
|
data |
Type: PlainObject or String
|
| complete |
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
|
위와 같이 인자값을 조금 자세하게 정의를 해두었고 조금더 나아가 아래의 예제를 통해 상세하게 살펴보도록 하자
기본방식은 url 만 보내서 해당 페이지의 내용을 그대로 받는 방법이다. 물론 실제 테스트를 위해서는 server.php 파일도 구현이 되어있어야한다.
<!-- @파일: index.php -->
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 결과를 받을 요소 -->
<div id="load"></div>
<!-- 스크립트 -->
<script>
$("#load").load("server.php");
/*
@결과
안녕하세요!
*/
</script>
<!-- @server.php
<h1>안녕하세요!</h1>
-->
위의소스를 이용하여 실제 테스트를 해보면 #load 요소에 server.php 에 입력된 `안녕하세요!` 라는 텍스트가 출력이 된다.
$.load() 메소드의 장점이라면 할 수 있겠지만 ajax 통신 페이지 내용에서 특정 요소만(선택자 포함) 가져와서 적용이 가능하다.
<!-- @파일: index.php -->
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 결과를 받을 요소 -->
<div id="load"></div>
<!-- 스크립트 -->
<script>
$("#load").load("server.php #target span.get");
/*
@결과
여기데이터를 가져옵니다.
*/
</script>
<!-- @server.php
<div id="target">
<span class="get">여기데이터를 가져옵니다.</span>
<span class="none">여긴 안되요.</span>
</div>
-->
아무래도 $.load()를 쓰는 목적이 이게 아닌가 싶다. 우리가 ajax 를 통신하는경우 대부분 가공된 전체 데이터를 받아오는 목적이 있는데 이녀석은 가공된 데이터에서 특정 요소만 출력할 수 있도록 도와준다. 물론 조건처리하여 특정 요소만 보낼 수도 있지만 그건 백단의 소스코드가 지저분해 질 수 있는 단점이 있는데 그걸 보완해 준다.
이걸 활용한다면 ajax 목적지가 되는 파일을 그룹별로 묶어두고 상황에 따른 요소만 계속 가져와서 로드해주면 좋을 것 같다. 특히 Full AJAX 페이지로 사이트가 구현된 경우 그룹파일을 head , body 로 분리하여 필요한 부분만 로드하면 좋을 것 같다.
처음 설명했던 부분인데 get 방식으로 데이터를 가져오는 방법이다. get 방식은 따로 명시하는 인자는 없지만 위에서 언급했듯이 Param 형태로 보내면 자동으로 get 방식 전송이 된다.
<!-- @파일: index.php -->
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 결과를 받을 요소 -->
<div id="load"></div>
<!-- 스크립트 -->
<script>
$("#load").load("server.php #target .id, #target .pw","id=apple&pw=789456");
/*
@결과
아이디: apple
비밀번호: 789456
*/
</script>
<!-- @server.php
<div id="target">
<div class="profile">여긴 안되요.</div>
<div class="id">아이디: <?php echo $_GET['id'] ?></div>
<div class="pw">비밀번호: <?php echo $_GET['pw'] ?></div>
</div>
-->위의 예제는 앞서 예제2) 보다 한층 업그레이드된 예제로 특정 요소를 지정해 주었다. 하지만 좀더 개선된 방식으로 사용할려면 두개로 분리하는 방식보단 .account 클래스 선택자로 선언하여 1개의 선택자로 줄이는게 좋다.
post 방식은 위의 예제3) 방식과 별다른건 없고 data 전송 시 Param 형태가 아닌 Object 형태로만 변경해서 보내주었다.
<!-- @파일: index.php -->
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 결과를 받을 요소 -->
<div id="load"></div>
<!-- 스크립트 -->
<script>
$("#load").load("server.php #target .id, #target .pw",{id:'apple',pw:'789456'});
/*
<결과>
아이디: apple
비밀번호: 789456
*/
</script>
<!-- @server.php
<div id="target">
<div class="profile">여긴 안되요.</div>
<div class="id">아이디: <?php echo $_POST['id'] ?></div>
<div class="pw">비밀번호: <?php echo $_POST['pw'] ?></div>
</div>
-->
언제나 모든 결과에는 예외처리가 있듯이 서버에러의 이유로 데이터를 불러오지 못하는 경우가 발생된다. 이경우를 위해 콜백함수는 항시 작성을 해주어야 한다. 물론 다른용도로도 사용할 수 있는데 아래는 여러 가지 형태를 보여주기 위한 구성이기때문에 필요한 부분만 참고하길 바란다.
<!-- @파일: index.php -->
<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 결과를 받을 요소 -->
<div id="load"></div>
<div id="load-all-data"></div>
<!-- 스크립트 -->
<script>
$("#load").load("server.php #target .id, #target .pw",{id:'apple',pw:'789456'}, function(res,sts,xhr){
if( sts == 'success'){ // 성공처리
var $loadAllData = $(res);
$loadAllData.find('.profile').clone().appendTo('#load-all-data');
}
else{ // 에러처리 => error
alert("에러가 발생하였습니다.");
}
});
/*
<결과>
아이디: apple
비밀번호: 789456
여긴 안되요.
*/
</script>
<!-- @server.php
<div id="target">
<div class="profile">여긴 안되요.</div>
<div class="id">아이디: <?php echo $_POST['id'] ?></div>
<div class="pw">비밀번호: <?php echo $_POST['pw'] ?></div>
</div>
-->
예제를 보여주기위해 조금 억지스럽게 소스코드를 선언하긴 했지만 보면 알다시피 콜백함수에서 success 일경우 res 로 받은 데이터를 선택자로 만들어서 출력이 안되어야할 .profile 요소를 출력하게 해주었다. 참고로 clone() 메소드는 선택객체를 복사하는 메소드로 상당히 많이 활용되고 있으니 아직 잘 모른다면 JQUERY API문서를 통해 미리 습득하는게 좋다.
Comment