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 객체의 생성
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파일에있는 내용을 콘솔에 출력
A라는 서비스에서받은 문서를 가지고 B라는 서비스문서를 요청하는것이 과거는 가능했다.
악용사례로 A로부터 받은 문서를 가지고 B회사에 서비스요청하는것을 막아놨다. cross request
주소가 다른서버,
현재 두가지 서버를 사용한다.
VS코드에는 웹서버(라이브서버) , 톰캣서버
한곳에 몰아줘야한다.
톰캣에다가 몰아주자.
'2021 Newlecture > Javascript' 카테고리의 다른 글
| (AJAX) bind() / 기본페이지보이기 / 검색기능 (0) | 2021.05.06 |
|---|---|
| (AJAX)페이지정보불러오기 (0) | 2021.05.04 |
| ( Ajax ) ``억음부호 ${ } / insertAdjacentHTML / JSON.parse (0) | 2021.05.03 |
| DOM / DOM tree/노드선택 (0) | 2021.05.01 |
| for in문으로 dataTransfer를 이용하기 / 객체속성나열하기 (0) | 2021.04.28 |
| (모바일) 자바스크립트코드분류 / onclick실행후 초기화 (0) | 2021.04.28 |
| toggle / 드래그 (0) | 2021.04.27 |
| (모바일) zIndex / ontransitioned 이벤트순서/ (0) | 2021.04.27 |
