Ajax

1.Ajax
1) 개요 및 기초
2) 동작원리
2. 기본
1)dom
2)node
3)dom Api
3. 서버와의 통신

---

1.Ajax

1)개요

AJAX (Asynchronous Javascript And XML)
AJAX란, JavaScript의 라이브러리중 하나이며
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며,
이때 서버와 주고 받는 데이터 형태는 아래와 같다.

[데이터 형태]

1. 텍스트파일

2. HTML

3. XML

4. JSON

5. script

6. php, asp, java

   간단한 예를 몇가지 든다면, 첫번째로 대표적인 페이스북을 들 수 있는데 페이스북은 스크롤을 내릴 때마다 스크롤이 끝에 도달 하기전 페이스북의 글들이 계속 해서 추가되는걸 볼 수 있다. 요즘은 이런 형태의 웹들이 많이 늘어나고 있다. 불필요하게 전체적인 데이터들을 계속해서 가져오는것보단, 갱신된 부분만 가져오는 이 기술은 정말 유용하다. 또다른 예를 하나더 든다면 회원가입을 들 수 있다. 사용자가 회원가입 을 할때 아이디, 닉네임 을 입력하면, 중복 검사를 하게 되는데 과거에는 팝업창을 이용하여 많이 사용하였지만, 지금은 AJAX 통신을 사용하여 팝업없이 결과를 바로 출력할 수 있게되었다.

• 비동기 방식이란?
  비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며
  Ajax를 통해서 서버에 요청을 한 후
  단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우,
  페이지 전체를 새로 고침하지 않기 위해 사용한다고 볼 수 있다.

[AJAX의 장점]
1. 웹페이지의 속도향상
2. 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
3. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.
( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

[AJAX의 단점]
1. 히스토리 관리가 되지 않는다.
2. 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
3. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
4. XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
5. AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
6. HTTP 클라이언트의 기능이 한정되어 있다.
7. 지원하는 Charset이 한정되어 있다.
8. Script로 작성되므로 디버깅이 용이하지 않다.
9. 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

[Jquery와 Ajax]
Ajax하면 Jquery에 대한 설명을 빼놓을 수 없습니다.
일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 됩니다.
jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있습니다.
Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데
자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것입니다.

2)동작원리

[Ajax 구성 요소]
: Ajax에서 사용하는 기존 기술은 다음과 같습니다.

1. 웹 페이지의 표현을 위한 HTML과 CSS
2. 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델
3. 데이터의 교환을 위한 JSON이나 XML
4. 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
5. 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트

[Ajax 동작 원리]
Ajax의 동작은 위에서 언급한 Ajax 구성 요소들을 사용하여 이루어집니다.
Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 됩니다.
따라서 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있습니다.
다음 그림은 Ajax를 이용한 웹 응용 프로그램과 기존의 웹 응용 프로그램의 동작 원리를 간략히 보여주고 있습니다.

[Ajax 기본 메서드]

$.ajax({
url:"",
type:"",
dataType:"",
data:"",
success:function(data){
},
error:function(){

  }

})

ajax주기
$.ajax(url,option)
.done(function(){//성공시})
.fail(function(){//실패시})
.always(function(){//요청완료})

$.ajax(option)
$.ajax(url,option)
$.ajax({
url:"",
type:"",
dataType:"",
data:"",
success:function(data){로딩을 성공했을때 스크립트}

* url

1. 텍스트파일.txt
2. HTML.html
3. XML.xml
4. JSON.json : dot연산자로 변수명에 접근 data.변수명
5. script.js

* option

1. url : 불러올 파일명
2. type : get, post 방식
3. dataType : 불러올 파일의 종류(txt,html,xml,json,script)
4. data : 데이터
5. success : 데어터가 성공적으로 불려왔을때 실행할 메서드
6. async : 동기, 비동식 방식 지정( * Ajax를 사용하는 이유 )