본문 바로가기

전체 글136

[고급] 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.
[기초] AJAX 브라우저 지원 AJAX - 브라우저 지원 AJAX의 핵심은 XMLHttpRequest 객체다. 최근의 모든 브라우저들은 내장된 자바스크립트 XMLHttpRequest 객체를 사용해 XMLHttpRequest 객체를 만든다. (IE5, IE6는 ActiveObject를 사용한다.) 앞서만든 "testAjax.htm" 파일에 XMLHttpRequest 객체를 생성하는 자바스크립트를 추가해보자. 이름: 시간: 예제 설명 : 1. XMLHttpRequest 객체를 저장할 xmlhttp 변수를 만든다. 2. xmlhttp=new XMLHttpRequest() 에서 XMLHttpRequest 객체 생성을 시도한다. 3, 만약 실패했을 경우, xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")로 시.. 2009. 7. 28.
[기초] AJAX 예제 첫 번째 AJAX 응용프로그램 AJAX가 작동하는 법을 이해하기 위해 작은 AJAX 응용프로그램을 만들 것이다. 첫번째로 "이름"과 "시간" 2개의 입력 필드를 가진 표준 HTML 폼을 만든다. "이름" 필드에는 사용자가 입력을 하고 "시간" 필드는 AJAX가 채운다. HTML 파일은 "testAjax.htm" 이라고 하고 아래와 같다.(HTML 폼에 제출하기 버튼이 없다) 이름: 시간: AJAX의 주요역할에 대해서는 다음 장에서. 2009. 7. 28.
[기초] AJAX XMLHttpRequest AJAX는 XMLHttpRequst 객체를 사용한다. 지금까지 자바스트립트에서는 서버에 있는 데이터베이스나 파일에서 정보를 주고 받으려면, HTML 폼을 만들어야 하고 사용자가 정보를 주고 받으려면 "제출하기" 버튼을 누른 뒤 서버의 응답을 기다리고 그 다음에 새로운 페이지에서 결과를 뿌려준다. 그렇기 때문에 사용자가 입력을 하고 전송할 때마다 서버는 새로운 페이지를 돌려보내게 되므로 기존의 웹 응용프로그램들은 느리게 동작할 뿐 아니라 덜 사용자 친화적이다. (주: 회원가입하는 과정을 상상해 보면 금방 이해가 간다.) AJAX에서는 XMLHttpRequest 객체를 통해 자바스크립트가 서버와 직접적으로 통신한다. XMLHttpRequst 객체는 페이지를 새로고침하지 않고도 웹페이지가 서버에 요청을 보내고.. 2009. 7. 28.
[기초] AJAX 소개 * 진도를 나가기 전에 HTML/XHTML과 자바스크립트에 대해 사전지식이 있어야 한다. AJAX = Asynchoronous JavaScript and XML AJAX는 새로운 프로그래밍 언어가 아니라 더 낫고, 빠르고, 더 쌍방향적인 웹 응용프로그램을 만들어 주는 새로운 기술이다. AJAX에서는 XMLHttpRequest 객체를 사용해 자바스크립트로 서버와 직접적으로 통신할 수 있다. 이 객체를 가지고 자바스크립트가 페이지를 새로고침하지 않고도 웹서버와 데이터를 주고 받을 수 있다. AJAX는 브라우저와 웹 서버간에 비동기 데이터 전송(HTTP 요청)을 사용해 웹 페이지가 전체 페이지가 아닌 서버로부터 작은 단위의 정보들을 요청할 수 있도록 해준다. AJAX 기술은 인터넷 응용프로그램을 더 작고 빠르.. 2009. 7. 28.
[기초] AJAX 튜토리얼 최근에 AJAX에 대해 관심을 갖게 되었다. 웹페이지를 새로고침하지 않고도 페이지 내 컨텐츠를 업데이트할 수 있다는 것이 매우 흥미롭다. 대표적으로 구글 지메일 등에서 AJAX를 쓴다고 하는데, 여러 면에서 활용도가 높다. 전문서적을 사기 전에 책을 고를 수 있는 안목을 높히기 위해 웹에서 쉬운 튜토리얼을 찾았다. 원문 : AJAX Tutorial 간략히 정리해 본다. AJAX = Asynchronous JavaScript and XML (비동기 자바스크립와 XML) AJAX는 자바스크립트와 HTTP 요청에 근거한다. AJAX는 구글에 의해(구글 검색제시어 기능) 2005년 무렵 유명해진 프로그래밍의 일종이다. AJAX는 새로운 프로그래밍 언어가 아니라 기존의 표준을 사용하는 새로운 방법이다. 2009. 7. 28.

티스토리툴바