Ajax

0.개요

구글 맵의 경우 새로고침을 하지 않아도 필요할 때 마다 새로운 세션을 서버로부터 다운 받는다. 이처럼 백그라운드에서 브라우저와 서버 간의 데이터 전송을 위해 자바스크립트에서 내장된 메소드의 집합을 사용하는 방식을 Ajax라 한다. 이러한 Ajax의 용어는 2005년 처음만들어졌으며 비동기 자바스크립트와 XML(Asynchronous JavaScript and XML)의 약어이다. 

1. XMLHttpRequest

브라우저마다 XMLHttpRequest의 구현이 다르므로 브라우저 별로 함수를 작성해야 한다.

iE 5 : request = new ActiveXObject("Microsoft.XMLHTTP")

IE 6+ : request = new ActiveObject("Msxml2.XMLHTTP")

All others : request = new XMLHttpRequest()

다음 함수를 사용하면 된다.

ajaxRequest.txt

XMLHttpRequest 객체의 변수와 함수는 다음과 같다.

속성	설명
onreadystatechange	객체의 readyState 속성이 바뀔 시 호출되는 이벤트 함수 명시
readyState	요청 상태를 보고하는 정수 값 ( 1: 로딩중, 2 : 로딩완료, 3 : 대화중, 4 : 완료 )
responseText	텍스트 형식으로 서버에서 반환된 데이터
responseXML	XML 형식으로 서버에서 반환된 데이터
status	서버에서 반환된 HTTP 상태 코드
statusText	서버에서 반환된 HTTP 상태 텍스트

함수	설명
abort()	요청 취소
getAllResponseHeaders()	모든 헤더 문자열 반환
getResponseHeader(param)	모든 인자(param)을 문자열로 변환
open('method', 'url', 'async')	사용할 HTTP 함수와 URL의 비동기적 or 동기적 처리 여부 명시
send(data)	HTTP 함수로 목적 서버에 데이터를 전달
setRequestHeader('param', 'value')	변수와 값 쌍의 헤더 설정

이 속성과 함수를 사용해 XML 또는 텍스트로 포맷을 선택하여 데이터를 서버에 요청할 수 있다.

2. POST 요청

위에서 구현한 ajaxRequest 함수를 가지고 post 방식으로 요청하는 Ajax를 구현해본다.

urlpost.html

div id '= info' 이 부분에 Ajax에서 변환된 텍스트가 삽입된다. 

소스	설명
params = "url=amazon.com/gp/aw"	서버로 보낼 파라미터의 값
request = new ajaxRequest()	Ajax 객체 생성
request.open("POST", "urlpost.php", true)	post 요청을 만드는 객체를   비동기 모드의 urlpost.php로 설정
request.setRequestHeader("Content-type",      "application/x-www-form-urlencoded")	서버에게 post가 요청된 것을 알게 하는 헤더 설정
request.setRequestHeader("Content-length",   params.length)
request.setRequestHeader("Connection", "close")

 

설정이 끝나면 request.send(params) 를 통해 서버에게 요청한다. 

이후 readyState == 4 로 완료된 Ajax 호출만 받고 status == 200 을 사용해 호출이 성공했음을 확인한다. 200이 아닐 경우 오류메지를 출력한다. 이후 responseText 가 값이 있을 경우 info에 값을 설정해준다. 

위에서 빠진 php 파일을 작성한다. 

urlpost.php

SanitizeString 함수를 사용해 항상 모든 포스트된 데이터에 적용한다.

file_get_contents 를 사용해 URL로부터 웹페이지를 불러온다.

---작성중---