코밍이의 하루

[JQuery] Ajax 관련 메소드 본문

웹언어 공부/JQuery

[JQuery] Ajax 관련 메소드

코밍이 2021. 8. 23. 23:30

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>

 

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