[Javascript]Ajax

Asynchronous JavaScript and XML 비동기적 자바스크립트

비동기적 - 따로따로 일한다?

웹 페이지에 필요할 때만 로드 되는 부분들을 그냥 두었다가

로드가 필요할 때 불러낼 수 있게 하여

문서를 불러올 때의 부담을 줄여줌.

위의 코드는 사용 예시이다.

변수xhr httprequest객체를 넣고

그 객체를 open메소드를 이용해서 여는데 첫번 째 파라미터는 방식 두번째 파라미터는 여는 대상이다.

이는 각각 form의 method와 action과 같은 역할을 한다.

그러고 나면 

onreadystatechange를 이용하여 함수를 열고

readyState === 4(준비를 완료했는가?) 와 xhr.status ===200(성공적으로 수행했는가?,  실패는 404)가 만족하면

xhr객체의 내용을(여기서는 php파일로 시간이다) #time의 innnerhtml을 출력하게 된다.

결과적으로

네트워크 상에 

버튼을 누를 때 마다

서버에 php파일을 불러오게 된다.

조금 복잡한 예시이다.

select 태그는 자식 태그로 option을 받는데, 이는 우리가 마우스로 선택할 수 있는 창을 만든다.

스크립트로 내려가게 되면 버튼이 클릭 될 때 이벤트가 발생되는데

HttpRequest를 위한 객체가 생성되고

그 객체를 POST방식으로 열게 된다.

그 객체가 준비가 되었을때 함수가 발생하고 그 기능은

#time에 xhr객체의 텍스트를 응답하는 것이다.

그리고 그 아래

data라는 객체를 생성했는데

이는 옵션에서 어떤 값을 리턴할 지에 대한 선택을 나타낸다.

위의 코드를 통해 리턴된 data값은

timezone=Asia/Seoul&format=Y-m-d

인데

&를 통해 두 값을 구분한다는 것을 알고 있으면 좋겠다.

여튼 그 값들을 xhr객체에 보낸다.

xhr.setRequestHeader같은 경우에는 파라미터값을 그냥 저런식으로 하는 거라고 한다.

위 코드는 ./php2. php