[JavaScript] Ajax란? 비동기서버통신

JavaScript는 Ecma라는 표준을 따르고 있다.

- HTML 문서 조작

- 유효성 검사

- function은 1급객체

 

Ajax (Asynchronous JavaScript and XML) 

- 서버데이터를 가져와서 문서 조작에 사용하는 것을 말한다.

- 다른 페이지를 참조하는 것

- html과 자바의 통신을 담당하는 것

- XMLHttpRequest라는 객체로 서버에 필요한 데이터 요청 가능

- Text, Xml, HTML

- 비동기 서버통신이다.

- 핵심코드

 

동기 - 요청이 들어오면 순차적으로 실행

비동기 - 요청을 기다리지 않고 실행하는것

 

open함수- 요청의 초기화. GET/POST선택

send함수- post 웹서버 요청처리 (요청 응답시 시간이 지연된다)

onreadystatechange - 서버응답처리 (요청 ~ 응답 사이의 상태들)

- readyState

0 : UNINITIALIZED - 객체만 생성되고 아직 초기화

1 : LOADING - osend메소드호출 - 파라미터 전달 (요청)

2 : LOADING - send메소드(파라미터전달) 실행상태

3 : INTERACTIVE(상호작용) - 데이터 일부를 받은상태, 

4 : COMPLETED - 데이터를 전부 받은 상태

 

200: 페이지요청성공

403: 권한 없음

404: 페이지 없음

405: 요청한 메소드(doGet, doPost)가 준비되지 않았음

500: 서버오류발생

 

Ajax는 UTF-8을 너무 좋아해~~!!

 

- XMLHttpRequest(서버통신객체) xhr

- 자바 클래스로 생각하면된다.

- 이 안에는 속성과 메소드가 존재한다.

 

속성

- readyState 

- onreadystatechange : 이벤트 속성(readyState 변경되었을때)

- status: 서버의 상태

 

메소드 **

- open('HTTP요청방식', '요청URL','비동기방식') **

- send('요청URL에게 전달할 데이터') **

 

<클라이언트>                               <서버>
- JavaScript                         - JSP,Servlet(자바)
- 데이터요청                                                       - 데이터 준비, 데이터 출력 out.print(데이터)
          1.open(URL요청과 get방식의 데이터)  
          ---------------------------->

          2.send(post방식의 데이터)  
          ---------------------------->
          
          3.responseText 또는 responseXML
          <----------------------------
           
※ 위의 1,2,3번을 실행하기 위해서는 XMLHttpRequest(xhr)객체가 필요!!
※ 3번(서버데이터 받기)은 콜백함수에 정의!!
                   ------
                                 이벤트 발생 후 실행하는 함수
                -----
                URL요청       

              

responseText의 자료형은 String

responseXML 의 자료형은 Document

setTimeout

window.onload