[Ajax] Ajax 개요, 특징, 사용예시, 자바스크립트 객체 생성(json)

2021. 3. 3. 15:37

Ajax

기존에 웹 브라우저와 서버가 통신하는 방법(클라이언트가 요청하면 서버가 응답결과를 새로운 html페이지로 보내

브라우저에서 출력)은 응답 페이지 속에 요청페이지와 중복되는 html 코드가 많다는 것과

클라이언트와 상호작용하는 서비스를 제공하기 어렵다는 단점을 갖고 있다.

이러한 단점을 보완하기 위해 Ajax 웹 통신 기법을 사용한다.

Ajax는 Asynchronous Javascript and XML의 약자로

자바스크립트 라이브러리 중 하나로 자바스크립트를 이용하여 비동기식으로 서버와 통신하는 방식이다.

서버에 직접 요청하지 않고 간접적으로 xhr객체(XMLHttpRequest)를 통해 요청하고

그 결과를 xhr객체를 통해 브라우저로 실시간 전송 받는다.

필요한 데이터만을 요청하여 결과를 원하는 위치에 출력시켜준다.

특징은 아래와 같다.

- 서버에 직접 연결하여 요청하지 않는다. xhr객체를 통해서 요청한다.

- 웹 서버의 응답 결과는 HTML이 아닌 단순 텍스트 또는 XML이다.

- 페이지 이동 없이 결과만 표시된다.

- 서버에서 처리되던 데이터처리가 일부 클라이언트의 자바스크립트에서 처리되므로 응답속도가 빨라졌다

- 남발해서 사용하면 속도가 느려질 수 있다는 단점이 있다. 꼭 필요한 기능만 Ajax를 사용한다.

- 특정위치(DOM)에 실시간으로 데이터부분을 보여줄 수 있다.

- 스크립트로 작성하기 때문에 디버깅에 용이하지 않다.(실습시 크롬 브라우저의 요소검사를 적절히 사용하는 것이 좋다)

- Ajax는 브라우저의 종류와 상관없이 항상 동일한 기능을 보여줄 수 있어야 한다.(cross browser)

Ajax 사용예시)

회원가입 사이트에서 아이디값을 입력하지 않고 넘어갔을때 실시간으로 필수정보라는 빨간줄이 나오게 할 수 있다.

검색창에서 검색어를 입력하는 도중, 실시간으로 자동검색어가 뜨도록 할 수 있다.

구글 지도를 볼때 페이지 이동없이 드래그하여 원하는 데이터 정보를 볼 수 있다.

Ajax의 4대 구성요소

- XMLHttpRequest 객체(xhr객체) : 웹 서버와 통신 담당

- DOM(Document Object Model) : 문서 구조 담당

- CSS : UI담당

- JavaScript : XMLHttpRequest와 DOM, CSS 사이의 중개 담당

가장 기본적으로 Ajax를 사용하기 위해서는 XHR객체를 생성해야 한다.

(이 객체는 브라우저에서 얻어오는 것이므로 브라우저 마다 객체가 조금씩 다를 수 있음)

그러므로 우선 자바스크립트에서 객체를 생성하는 방법을 알아보도록 하겠습니다.

자바스크립트 객체 생성

함수 속성의 자료형이 동적으로 바뀐다(선언하지 않고 사용)

this는 현재 생성된 객체를 가리킨다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트의 객체 생성 방법</title>
<script>
function Person(name,age,addr){
	this.name=name
	this.age=age
	this.addr=addr
}
</script>
</head>
<body>
	<script>
		hong = new Person("홍",23,"서울시")	
	    alert(hong.name+","+hong.age+","+hong.addr)
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 객체 생성 방법</title>
<script>
	function Test(){
		var mem= new Object()
		mem.age=23
		mem.name="테스트"
		
		mem.setAge=function(age){this.age=age}
		mem.setName=function(name){this.name=name}
		
		mem.getName=function(){return this.name}
		
		mem.toString=function(){
			return this.age+","+this.name
		}
		
		//함수 호출
		mem.setAge(34)
		alert(mem.toString())
	}
</script>
</head>
<body onload="test()">
</body>
</html>

★★ json표기법 사용(jQuery에서 가장 많이 사용하는 방법)

- key, value 값을 이용하여 객체를 생성한다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 객체 생성 방법</title>
<script >
/*
 형식) var 객체명 ={} //빈객체
 	   var 객체명 ={
	   속성명1:값1,
 	   속성명2:값2,,
 	   함수명:function(매개변수명,,){~}
 }
 */
 var person = {
		 name:'홍',//겹따옴표,홑따옴표 상관없음
		 age:23, 
		 hobby:function(h1,h2){
         alert(this.name+'의 취미:'+h1+','+h2)
	 	 }
 }
 document.write(person.name)
 person.hobby('운동','영화감상')
</script>
</head>
<body>
</body>
</html>

'Ajax' 카테고리의 다른 글

[Ajax] Ajax 처리 프로세스, XMLHttpRequest객체, onreadystatechange, open, send (0)	2021.03.03

띵코의 개발 공부