Ajax

비동기 자바스크립트와 XML을 말함

서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 ( JSON, XML, HTML 등)

특징은 ? 페이지 전체를 리프레쉬 하지 않고서도 수행되는 비동기성이다. ---> 사용자의 Event가 있으면 일부분만 업데이트 할 수 있게 해준다.

javaScript 랑 동일하다

javaScript + 비동기 서버통신

client server

user --> Brower -------|-->(url요청open() web Server

<-----------(응답 send()) text , image , 동영상 -> HTML

client 가 뭔가를 요청(requeset) 을 server 에게 한다.

이 브라우저를 매개체를 통해서 요청을 한다. (URL을 통한 요청)

http://192.168.0.133/gildong/hello.html 과 같은 url주소 ..를 root (기준이 되는 폴더) 밑에 서브 디렉 토리를 가지는데 대표가 html문서라고 한다. 암튼 이런 폴더안에서 gildong이란 폴더가 존재하는지? hello.html이라는 문서가 존재하는지 ?

그 html을 전달해줌 .. (응답)

html을 문서를 구성하는 요소?

태그/ 속성

+css : 안녕하세요를 css를 거치게 되면 폰트 색,,,등등 을 변경할 수 있다. (데코) _ 정적인 페이지

+javascript : javaScript는 동적 페이지를 추가하기 위해서 , 조작하기 위해서

이벤트를 처리할 수 있는 버튼이 있다면? 버튼을 누르면? hello --> 안녕으로 바뀐다.

변경할 데이터가 html안에 있다면 쓸필요없다. 그러나 html안에 변경할 페이지가 없을 때 Ajax를 사용한다.

외부에 있는 데이터를 가져오기 위해 쓴다. 현재문서외에 다른데서 끌어온다! 이럴때

자바스크립트 객체 XMLHttpRequest 라고 하는 객체가 있다(각 브라우저에서 지원)

--> 웹서버와 통신을 담당한다. 사용자의 요청을 웹서버에 전송하고, 웹서버로부터 받은 결과를 웹브라우저에 전달한다.

var xhr = new XMLHttpRequest() 라고 선언해주면 된다(어느 브라우저나 다 허용하고 있다)

xhr -> 속성(readyState, status)과 기능(open(), send())을 통해서 내가 원한는 것을 끌어온다.

---> open() : url 요청

cf> open('GET_로그인 사용자 정보', 'good.html_url정보', true_동기비동기?)

---> send() : 데이터 전달

서버에게 현재페이지가 아닌 다른곳에 데이터를 요청해 끌어와 줄 수 있다. (다른 웹사이트에서.. )

요청전 : 0인상태

원하는페이지 요청했을때 : 1

원하는데이터 전달 : 2

부분전달 : 3

완벽하게 전달 : 4인 상태라고 한다.

비동기 방식 vs 동기

순차적 실행? 동시에 실행?

javaScript가 조작할페이지가없어 할때 요청해서 Ajax를 쓸때 모든 페이지 멈춰있어야해! 는 동기 방식

요청해서 응답오는동안 다른페이지 실행되고 있어 ! 는 비동기 방식