학원수업_54day [JSP,Servlet(21day) - JSON / Ajax

Ajax →  비동기적 통신 

 

JSON ( JavaScript Object Hotation )

- 구조화된 데이터 통신을 위해 사용

 

Ajax - xml, json 의 필요성 → 구조화된 데이터 통신

                                               (회원객체 or 상품리스트 등 )

 

 

JSON Object { "name : value ", " name: value" }

                                    id    : java            name : 아이유

Json Array [  {} , {} }

[ → json array

{} , →Json Object  

{} → Json Object

 

---

ㅊ

* XMLHttpRequest 객체

현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다.

XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용된다

 

이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있음,

즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 된다.

 

 

 

* XMLHttpRequest 객체의 생성

자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법

 

ex ) var xmlHttp = new XMLHttpRequest();

---

* readyState 프로퍼티

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다

 

이 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화한다

 

 1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

 2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행됨.

 3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

 4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

 5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

 

---

* status 프로퍼티

status 프로퍼티는 서버의 문서 상태를 나타냅니다.

 

 - 200 : 서버에 문서가 존재함.

 - 404 : 서버에 문서가 존재하지 않음.

---

* XMLHttpRequest 객체의 전송

var xmlHttp = new XMLHttpRequest();       // XMLHttpRequest 객체를 생성함.

xmlHttp.onreadystatechange = function() { // onreadystatechange 이벤트 핸들러를 작성함.

    // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때

    if(this.status == 200 && this.readyState == this.DONE) {

        // 요청한 데이터를 문자열로 반환함.

        document.getElementById("text").innerHTML = xmlHttp.responseText;            

    }

};

xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);

xmlHttp.send();

 

* responseText 프로퍼티

responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 저장하고 있다.

 

document.getElementById("text").innerHTML = xmlHttp.responseText;