본문 바로가기

분류 전체보기161

[기초] 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.
PHP RSS feed 만들기 게시판의 공지사항 정도는 RSS로 받아보면 어떨까 하는 생각이 들어, RSS feed 기능을 추가하고 싶었는데 아래는 비교적 쉽게 사용할 수 있는 RSS feed 만들기 설명이다. http://www.ibm.com/developerworks/xml/library/x-phprss/?ca=dgr-lnxw01PHP-RSS 다만 영문을 기준으로 한 것이라 약간 고칠 부분도 있다. 태그에 en-us 라고 되어 있는 것은 ko 로 바꾸면 된다. 그리고 내 경우엔 htmlentities() 함수 부분에서 UTF-8을 제대로 처리해 주지 못하는지 어쩌는지 에러가 발생해 일부 코드에선 빼버렸다. 하단엔 RSS reader 기능까지 설명이 되어 있는데 사실 이 부분의 경우 외부 소스를 사용하는 것인데 이해가 잘 되지 않아.. 2009. 7. 15.
웹 표준 개발자의 IE8 고려사항. 네이버 스마트에디터의 UI를 담당하고 계신 정찬명님(지금도 담당하고 계신가?)이 쓴 글입니다. 웹프로그래머나 디자이너라면 참고적으로 꼭 한번 읽어보면 도움이 되지 않을까 싶습니다. http://naradesign.net/wp/2009/03/12/670/ IE8이 웹표준에 맞춰 개발이 되었다고는 하는데 ACID3에서는 매우 낮은 점수를 받아 정말 웹표준을 지원하는 것이 맞냐는 반발도 많은 것 같습니다. (참고로 애플 사파리나 오페라 브라우저는 100점에 가까운 점수를 받았다고 하더군요.) (파이어폭스 3.1 베타3의 Acid3 점수. http://acid3.acidtests.org/) 어쨌거나, 과거 비표준 IE7에 맞춰서 개발된 웹사이트들은 당장은 IE8에서 호환성 모드를 제공하기 때문에 웹페이지가 깨지.. 2009. 3. 21.

티스토리툴바