jQuery17 [고급] AJAX 제시어 예제 원문 : AJAX Tutorial AJAX는 보다 인터랙티브한 응용프로그램을 만드는데 쓰일 수 있다. AJAX 제시어 예제 다음의 AJAX 예제는 사용자가 HTML 폼에 데이터를 입력하는 동안 어떻게 웹 페이지가 웹 서버와 통신하는지를 보여준다. (데모 실행하기) 예제 설명 - HTML 폼 위 데모 폼은 아래 소스와 같이 구성되어 있다. First Name: Suggestions: "txt1" 이라는 입력 필드를 가진 단순한 HTML 폼이다. 입력 필드를 위한 이벤트 속성은 onkeyup 이벤트일 때 동작하는 함수를 정의하고 있다. 폼 밑의 문단에서는 "txtHint"라는 span을 포함하고 있다. 이 span은 서버로부터 데이터를 받아 보여주는 역할을 한다. 사용자가 데이터를 입력했을 때 "showHi.. 2009. 8. 3. [기초] AJAX - 서버 측 스크립트 AJAX - 서버 측 PHP 스크립트 현재 시간을 보여주는 서버에서 돌아갈 스크립트를 만든다. responseText 속성은 서버로부터 돌려받은 데이터를 저장하게 된다. 여기서 현재 시간을 돌려주고 싶다. "time.php" 코드는 아래와 같다. 참고 : 캐시에 저장된 내용이 보여지는 것을 막기 위해 페이지가 캐쉬되지 않도록 한다. 첫 AJAX 응용프로그램 실행하기 원본 페이지에서 직접 실행해보기 바란다. (주: 서버의 시간을 가져오는 것이므로 로컬시간과 다르게 보일 수 있다.) 페이지가 새로고침되지 않고 서버에 있는 "time.php"에서 실행된 서버의 시간을 가져와 "시간" 필드에 뿌려준다. 2009. 7. 28. [기초] AJAX - 서버에 요청하기 AJAX - 서버에 요청 보내기 서버에 뒷단에서 요청을 보내기 위해서는 open()과 send() 메소드를 사용한다. open() 메소드는 3개의 인수를 가진다. 첫 번째는 어떤 방식으로.(GET 또는 POST) 요청을 보낼 것인지에 대한 정의이다. 두 번째는 서버측 스크립트의 URL을 지정한다. 세 번째 인수는 비동기적으로 다뤄져야 하는지를 정한다. send() 메소드는 서버에 요청을 보낸다. 만약 HTML과 PHP 파일이 같은 디렉토리에 있다고 한다면 코드는 아래와 같다. xmlhttp.open("GET","time.php",true); xmlhttp.send(null); 이제 언제 AJAX 함수를 실행할지 정해야 한다. 우리는 이 함수를 사용자가 "이름" 필드에 무언가 입력했을 때 뒷단에서 실행하게.. 2009. 7. 28. [기초] AJAX - XMLHttpRequest 객체 AJAX - XMLHttpRequest 객체에 대해 서버에 백그라운드로 데이터를 보내기에 앞서 3가지 중요한 XMLHttpRequest 객체의 속성에 대해 살펴본다. onreadystatechange 속성 서버에 요청을 보낸 뒤 서버로부터 데이터를 되돌려 받을 함수가 필요하다.(주: 경기시작과 함께 포수가 투수에게 공을 준 뒤 다시 투수가 던지는 공을 받기 위해 글로브를 벌려둔 상태라고 상상하자. 언제든지 공을 받을 준비가 되어있어야 한다.) onreadystatechange 속성은 서버로부터의 응답을 처리할 함수를 저장한다. 자동으로 호출되는 속성 내에 이 함수를 저장한다. 다음의 코드는 onreadystatechange 속성을 설정하고 빈 함수를 저장한다. xmlhttp.onreadystatechan.. 2009. 7. 28. 이전 1 2 3 4 5 다음
