코밍이의 하루
[JQuery] Ajax 관련 메소드 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery, Ajax |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) Ajax(Asynchronous JavaScript and XML)
- 클라이언트(방문자 컴퓨터)가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버(서비스 제공 컴퓨터) 측에 자료(XML, HTML, JSON, 텍스트 유형 등)를 요청할 때 사용
- Ajax 관련 메소드의 종류
| 종류 | 설명 |
| load() | 외부 콘텐츠를 가져올 때 사용 |
| $.ajax() | - 데이터를 서버에 HTTP POST, GET 방식으로 전송할 수 있으며, HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드 - $.post(), $.get(), $.getJSON() 메소드의 기능을 하나로 합쳐 놓은 것 |
| $.post() | 데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용 |
| $.get() | 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용 |
| $.getJSON() | 데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용 |
| $.getScript() | Ajax를 이용하여 외부 자바스크립트를 불러옴 $("button").click(function(){ $.getScript("demo_ajax_script.js"); }); |
| .ajaxStop(function(){...}) | 비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수 실행 |
| .ajaxSuccess(function(){...}) | ajax 요청이 성공적으로 완료되면 함수 실행 |
| .ajaxComplete(function(){...}) | Ajax 통신이 완료되면 함수 실행 |
3) load() 메소드
- 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용
- 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있음.
- clearQueue가 true면 큐에서 대기 중인 애니메이션 모두 제거
- finish가 true면 진행 중인 애니메이션 강제 종료
3. 소스 코드 및 실행 결과
- jquery_ajax_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#newsWrap_1").load("jquery_ajax_news.html #news_1");
$("#newsWrap_2").load("jquery_ajax_news.html #news_2");
});
</script>
</head>
<body>
<h1>LOAD 1</h1>
<div id="newsWrap_1"></div>
<h1>LOAD 2</h1>
<div id="newsWrap_2"></div>
</body>
</html>- jquery_ajax_news.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
</head>
<body>
<p id="news_1">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
<p id="news_2">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. </p>
</body>
</html>
※ 실행 URL : http://shgdx12.dothome.co.kr/jquery_ajax_1_test.html
Ajax
shgdx12.dothome.co.kr
※ 서버 웹호스팅 관련 사이트
https://www.dothome.co.kr/index.php
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
- 해당 사이트에서 무료로 웹 호스팅하여 실제 서버에 올려 실행할 수 있었음.
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] Ajax로 XML 데이터 바인딩하기 (0) | 2021.08.24 |
|---|---|
| [JQuery] Ajax - $ajax()메소드 (0) | 2021.08.24 |
| [JQuery] Ajax (0) | 2021.08.23 |
| [JQuery] 애니메이션 효과 제어 메소드 (0) | 2021.08.20 |
| [JQuery] 효과 및 애니메이션 메소드 (0) | 2021.08.20 |
'웹언어 공부/JQuery' Related Articles
more
