Ajax / 서버를 한곳에 모으기

Ajax란 ?

• 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수있는 통신 방식.
• 서버로부터 웹페이지가 반환되면 화면전체를 갱신해야하는데, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수있도록 하는 것이 Ajax.

동기식 처리 : 순차적 작업수행. 서버에서 데이터를 가져와 화면에 표시하는 작업을 수행할 경우 서버에 데이터를 요청하고 데이터가 전달될 때까지 이후 작업들은 중단.

 

비동기식 처리: 병렬적 작업수행. 작업이 종료되지않은 상태라도 대기하지않고 다음작업 실행.

자바스크립트의 대부분의 DOM이벤트와 Timer함수, Ajax요청은 비동기적으로 동작

 

Ajax 요청 및 응답처리

• 브라우저는 XMLHttpRequest 객체를 이용하여 Ajax요청을 생성한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.
• XMLHttpRequest.send() 메소드를 통해 서버에 Request를 전송하면  서버는 Response를 반환하는데, 언제 resonse가 클라이언트에 도달할지 알 수없다.
• XMLHttpRequest.onreadystatechange는 Response가 클라이언트에 도달하여 발생된 이벤트를  감지하고 콜백함수를 실행하여 준다.
• XMLHttpRequest.readyState 프로퍼디가 변경될때마다 호출되는 EventHandler이다
• 만일 XMLHttpRequest.readyState의 값이 4 인경우 정상적으로 Response가 돌아온 경우이다.

 

XMLHttpRequest.readyState

0: open()메소드 호출이전, 1: open메소드 호출완료, 2: send메소드 호출완료, 3: 서버응답중(responseText미완성상태) 4:서버응답완료

 

 

//요청처리 예시
// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

//응답처리 예시
// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // readyStates는 XMLHttpRequest의 상태(state)를 반환
  // readyState: 4 => DONE(서버 응답 완료)
  if (req.readyState === XMLHttpRequest.DONE) {
    // status는 response 상태 코드를 반환 : 200 => 정상 응답
    if(req.status == 200) {
      console.log(req.responseText);
    } else {
      console.log("Error!");
    }
  }
};

// XMLHttpRequest 객체의 생성
var req = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
req.open('GET', 'data/test.json', true);
// Request를 전송한다
req.send();

// XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 콜백함수(이벤트 핸들러)를 호출한다.
req.onreadystatechange = function (e) {
  // 이 함수는 Response가 클라이언트에 도달하면 호출된다.
};

---

링크클릭 ->새로고침

지금페이지요청1번만

상태값받아서

싱글 페이지 애플리케이션

웹1.0 : 개인이 소비만

웹2.0 ?

개인이 저작자,개인이 소비

스크립트를 써서 저작하기편한 환경

자바스크립트로 페이지로딩없이 비동기처리, (xml,json

 

비동기적데이터처리

 

화면을 갱신하지않고 데이터요청해서 기술들을 통틀어 ajax라고한다

자바스크립트로 데이터요청

초록:원격에있는 xml요청, 비주얼베이직용라이브러리

페이지로딩없이 데이터베이스저장 ?!

브라우저에포함된요청자 사용 ?

액티브 : 모든언어가 사용할수있는 라이브러리

 

 

다른사이트에있는 데이터를 요청할수있다

항상 콘솔에 출력해서 테스트할것

window.XMLHttpRequest(); 윈도우생략가능

 

동기형 비동기형

2개이상있을 경우 관계가 동기형이다,비동기형이라고 표현

동기형 : 내가 말을하고 오바, 저쪽에서 말하고 난 듣기만해야함. 무전기 턴을주고받듯이일함

           일하나를 두고 여러사람이 기다림,false 

비동기형 : 각자 동시에 다 일할 수있는 환경(동시에,같이)

txt파일에있는 내용을 콘솔에 출력

request를누르면 test data가 콘솔에뜬다

A라는 서비스에서받은 문서를 가지고 B라는 서비스문서를 요청하는것이 과거는 가능했다.

악용사례로 A로부터 받은 문서를 가지고 B회사에 서비스요청하는것을 막아놨다. cross request

 

데이터를 전송한게 다른url로 가는경우가있었다.->막음(데이터빼돌리기를 막음)

주소가 다른서버,

서버를 설정해줘야한다

현재 두가지 서버를 사용한다.

VS코드에는 웹서버(라이브서버) , 톰캣서버

한곳에 몰아줘야한다.

톰캣에다가 몰아주자.

동기화시켜서 끝날때까지 계속기다려야한다. 다른작업아무것도못함

자바에 복붙한다음 실행하면 된다 

poiemaweb.com/jquery-ajax-json