PHP와 AJAX를 이용한 웹개발

목차

Ajax 개요    
    Ajax란
    사용되는 기술에 대한 소개
    Ajax의 장점과 단점
    작동원리

XMLHttpRequest에 대해서
    소개
    레퍼런스
    사용법
    크로스브라우징

php와 Javascript에서 XML 사용하기
    php에서 XML사용하기
    Javascript에서 XML 사용하기 

JSON 알아보기 

php와 Ajax를 활용한 프로그램

Ajax 란

개요

1. Jesse James Garrett이 2005년 2월 ‘Ajax:A New Approach to Web Application’ 이란 에세이에서 처음으로 사용 됨. 

2. Ajax는 'Asynchronous JavaScript + XML'의 줄임말
    '비동기  자바스크립트 XML‘ 

3. Ajax는 웹프로그래밍의 한 종류로 하나의 기술이 아니라
    여러 가지 기술이 복합된 방법론  

4. Ajax는 자바스크립트 렌더링 엔진을 이용한 기술

사용되는 기술에 대한 소개

XHTML (extensible hypertext markup language )
        하이퍼텍스트 생성 언어(HTML) 버전 4를 확장성 생성 언어(XML)를 적용하여 재구성한 것.

Javascript
미국의 넷스케이프커뮤니케이션사가 개발한 스크립트 언어.  

CSS (cascading style sheets )
        하이퍼텍스트 생성 언어(HTML) 문서의 형태를 기술하기 위한 시트.  

DOM (document object model )
        웹 브라우저를 통한 확장성 생성 언어(XML) 문서의 상호 연동을 위한
        객체 기반의 문서 모델.

XML (eXtensible Markup Languag )
          하이퍼텍스트 생성 언어(HTML)를 대체할 목적으로 월드 와이드 웹 컨소시엄(W3C)이
          표준화 작업을 진행한 페이지 기술 언어.

JSOM (JavaScript Object Notation)
         경량화 데이터 교환형식

XmlHttpRequest
         서버로 비동기 호출을 할 수 있음

장점과 단점

장점
          ActiveX나 플래쉬를 상당부분 대체가능
          페이지가 로드된 후 페이지를 동적으로 변화시키는 것에 적합
          원하는 응답을 빠른 시간에 받을  수  있음
          서버의 부하를 줄일수 있음
          브라우져에 종속되지 않음

단점
          리플래쉬시 모든정보가 사라짐
          뒤로가기 버튼을 사용할 수 없음
          즐겨찾기를 할 수 없음
          디버깅이 어려움
          클라이언트 에서 많은 로직이 처리되어야 함

작동 원리

XMLHttpRequest에 대해서

소개

1. XMLHttpRequest는 로딩이 완료된 웹 페이지에서 자바스크립트 렌더링 엔진을 이용하여 다시 서버에 자료를 보내거나 받아오는 것을 가능 

2. XML 이외의 다른 형태의 자료도 지원한 

3. Javascript 렌더링 엔진을 이용함으로 브라우저에 종속되지 않음 

※ 주의

XMLHttpRequest는 서로 다른 도메인에서는 작동되지 않음
    - 대부분의 브라우저에서는 요청후 중지되나 인터넷 익스플러러에서는
       보안 경고 창이 나타나 사용자가 선택가능

래퍼런스

표준 매소드

abort()

현재의 요청

getAllResponseHeaders()

HTTP요청에 대한 모든 헤더를 키/값으로 반환한다.

getResponseHeader("header")

명시된 헤더의 문자열값을 반환

open("method","url")

서버 호출단계 "method" 아규먼트는 GET,POST,HEAD하나이고 URL아규먼트는 상대혹은 절대주소가 들어간다.

send(content)

요청을 서버로 보낸다.

setRequestHeader("Header","value")

명시된 값으로 헤더를 설정한다. 헤더에 값을 설정하기 전에는 반드시 open()메소드를 호출한다.

표준 프로퍼티

onreadystatechange

상태에 변경이 있을때 마다 실행되는 이벤트 핸들러

readyState

XMLHttpRequest가 요청한 상태를 반환

(0:초기화, 1: 로드중, 2: 로드됨, 3:처리중, 4:완료됨)

responseText

XMLHttpRequest 의 서버의 응답이 문자열로 됨

responseXML

XMLHttpRequest 의 서버의 응답이 XML로 됨,

파싱가능, DOM객체로 처리된다.

status

서버로 부터 받은 HTTP상태코드

(정상:200, 비정상:404(Page Not Found))

statusText

Http상태코드의 텍스트 버전(정상, 오류)

사용법

예제 1......

GET 방식으로 서버에 요청하기 

간당하게 XML파일을 가져오는 예제  

function handler(){
    if (req.readyState == 4) {
        if (req.status == 200) {
            if(this.responseXML != null)
                alert(this.responseXML.getElementById('test').firstChild.data );
            else
                alert(“None”);
          } else {
                alert("Problem: " + req.statusText);
          }
    }
} 

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "test.xml");
client.send();

예제 2......

POST 방식으로 서버에 요청하

function handler(){

    if (req.readyState == 4) {

        if (req.status == 200) {

            if(this.responseXML != null)

                alert(this.responseXML.getElementById('test').firstChild.data );

            else

                alert(“None”);

        } else {

                alert("Problem: " + req.statusText);

          }

    }

}

function ping(message) {

    var client = new XMLHttpRequest();

    client.onreadystatechange = function()

    client.open("POST", "/test.php");

    client.send(message);

}

크로스브라우징

표준웹브라우저에서 호출법
    var client = new XMLHttpRequest();
    client.onreadystatechange = handler;
    client.open("GET", "test.xml");
    client.send();

IE에서 호출법
    var client = new ActiveXObject("Microsoft.XMLHTTP");
    client.onreadystatechange = handler;
    client.open("GET", "test.xml");
    client.send();

php와 Javascript에서 XML 사용하기

php에서 사용하기

SimpleXML
    SimpleXML 모듈은 사용자가 쉽게 XML문서를  객체화 시켜 사용 가능
    요구사항 : PHP5    

XML
    James Clark의 expat를 사용.
    XML 문서를 처리할 수 있게 하지만, 유효성을 검증하지는 않음
    요구사항 : PHP를 아파치 1.3.9 이상의 모듈로 컴파일
               expat 설치 => http://www.jclark.com/xml/expat.html

DOM
    XML문서를 DOM API 로 제공함
    요구사항 : java VM이 설치 되어있어야 함 (java VM의 JNI 생성하여 사용)

$xmlstr = <<
 
  
  
   
   Ms. Coder
   Onlivia Actora
   
   
   Mr. Coder
   El Act'r
   
  
  
   So, this language. It's like, a programming language. Or is it a
   scripting language? All is revealed in this thrilling horror spoof
   of a documentary.
  
  7
  5
 

XML;

SimpleXML 이용하기

 가져오기
$xml = simplexml_load_string($xmlstr);
echo $xml->movie[0]->plot;

XML 문서 생성하기
$xml = simplexml_load_string("<?xml version='1.0' standalone='yes'?>");
$xml->movie->actor->age = '21';
echo $xml->asXML();

XML 이용하기

 가져오기
$xml_parser = xml_parser_create();
xml_parse_into_struct($xml_parser, $xmlstr, $vals, $index);
xml_parser_free($xml_parser);
$key=$index[PLOT][0];
echo $vals[$key][value];

DOM 이용하기
 가져오기
$doc = new DOMDocument();
$doc->loadXML($xmlstr);
$allnodes = $doc->getElementsByTagName('plot');
$node = $allnodes->item(0);
echo $node->nodeValue;

XML 문서 생성하기
$doc = new DOMDocument("1.0", "UTF-8");
$root = $doc->createElement("movies");
$root = $doc->appendChild($root);
$elementname = $doc->createElement("movie");
$elementname = $root->appendChild($elementname);
$elementname1 = $doc->createElement("actor");
$elementname1 = $elementname->appendChild($elementname1);
$elementname2 = $doc->createElement("actor");
$elementname2 = $elementname1->appendChild($elementname2);
$elementname2->appendChild($doc->createTextNode("29"));

javascript에서 사용하기

XMLHTTP

JSON 알아보기

JSON (JavaScript Object Notation)

    경량화 데이터 교환형식

    사람이 읽고 쓰기편함

    기계가 해석하기 용이
    언어로부터 완벽하게 독립

JSON의 구조

    name/value 형태의 쌍으로 collection 타입

    값들의 순서화된 리스트

 기 본 예 제

 Javascript part

     var req;

     var which;

     function retrieveURL(url) {

     if (url != "") {

     if (window.XMLHttpRequest) { // Non-IE browsers

     req = new XMLHttpRequest();

     req.onreadystatechange = processStateChange;

     try {

     req.open("GET", url, true);

     } catch (e) {

     alert(e);

     }

     req.send(null);

     } else if (window.ActiveXObject) { // IE

     req = new ActiveXObject("Microsoft.XMLHTTP");

     if (req) {

     req.onreadystatechange = processStateChange;

     req.open("GET", url, true);

     req.send();

     }

     }

     }

     }

    function processStateChange() {

     if (req.readyState == 4) { // Complete

     if (req.status == 200) { // OK response

     document.getElementById("spmember").innerHTML = req.responseText;

     } else {

     alert("Problem: " + req.statusText);

     }

     }

     }

PHP part

    include 뱇ib/lib.php";

    $sql = "SELECT name FROM list WHERE `area`='".$_REQUEST[area]."' order by rand() LIMIT 9";

    $query = $db->query($sql,"su_member");

    while($data = mysql_fetch_array($query)){

     echo " ". $data[name]n";

    }

제공되는 형태

    서울지역