Ajax 04

서버에 요구 데이터 송신하기

이로써 비동기 통신을 실행하기 위한 준비가 완료되었다. 이제는 실제로 요구 데이터(리퀘스트)를 서버에 송신해 보자.

XMLHttpRequest 객체.open(HTTP 메소드, URL, 비동기 모드로 통신할 것인가?, 사용자명, 패스워드)

》XMLHttpRequest 객체에 의한 통신을 초기화한다. 사용자, 패스워드는 인증이 필요한 페이지에서만 지정한다.

							req.open('GET', 'helloAjax.php?name='+encodeURIComponent(docuemtn.fm.name.value), true);
						

							function asyncSend () {
								var req = getXHR();

								// 비동기 통신 시 처리(콜백 함수)를 정의
								req.onreadystatechange = function () {
									var result = document.getElementById('result');
									if (req.readyState == 4) { // 통신이 완료 시
										if (req.status ==200) { // 통신이 성공했을 경우
											result.innerHTML = req.responseText;
										}else {
											result.innerHTML = "서버 에러가 발생했습니다.";
										} // end of if sentence
									}else {
										result.innerHTML = "<img src='/florakid_study/images/ajax/ajax-loader.gif' alt='통신중' />"
									} // end of if sentence
								}

								// 서버와의 비동기 통신을 개시
								req.open('GET', 'helloAjax.php?name='+encodeURIComponent(document.fm.name.value), true);
								req.send(null);
							} // end of asyncSend()
						

HTTP 메소드에는 일반적으로 GET이나 POST를 지정한다. 수백 바이트 아내의 데이터를 송신하는 경우에는 GET으로도 무난하지만, 그 이상의 큰 데이터를 송신하고 싶은 경우에는 POST를 사용한다.

GET 메소드로 정보를 송신하려면 URL의 말마에 「?키명=값&...」의 형식으로 정보를 추가해야 한다(POST 메소드의 경우는 나중에 설명하겠다). 참고로, 값은 멀티바이트 문자나 그 외의 예약어가 포함되어 있는 경우를 대비하여 encodeURIComponent 함수로 encode 처리해 두는 것이 좋다.

제 3인수에는 통신을 비동기로 실지할지를 지정한다. 지금까지 여러 번 반복하였듯이, Ajax는 비본적으로 비동기 통신을 전제로 한 기술이므로 통상 true를지정해 두면 좋을 것이다. 제3인수에 false를 지정했을 경우, XMLHttpRequest 객체는 동기 통신을 실시하기 위해 서버가 응답을 반환할 때까지 후속 처리를 중단한다.


크로스 도메인 지정은 불가

보안상의 이유로 XMLHttpRequest.open 메소드에서는 다른 도메인을 지정할 수 없다. 또 사용하고 있는 브라우저의 종류에 따라서는 (동일 도메인이라 할지라도) 도메인을 명시하는 것 자체만으로 올바르게 처리할 수 없는 것도 있기 때문에 주의해야 한다. open 메소드의 URL은 반드시 상대 패스로 지정해야 한다.

리퀘스트의 준비가 되면 마지막으로 send 메소드를 이용해 리퀘스트를 송신한다. send 메소드의 인수는 open 메소드의 제 1인수로서 POST를 지정했을 경우에만 리퀘스트 본체를 지정할 수 있다. 이번에는 GET 메소드를 지정하고 있으므로 null을 지정해두자.

반복해서 말하지만, send 메소드에 의한 리퀘스트의 결과는 onreadystatechange 프로퍼티에 지정한 콜백 함수로 처리가 가능하다.

이상으로 XMLHttpRequest 객체를 이용한 비동기 통신의 기본적인 절차는 끝났다.