[Ajax] Ajax(Asynchronous JavaScript + XML) 기본

4. 샘플소스

Ajax용 간이 크로스 브라우저 라이브러리를 작성하여, response에 대해 XML이나 Text형식으로 받아 처리하는 예제를 테스트해보도록 한다.

jslb-ajax.js

////

// 동작가능한 브라우저 판정

// @sample if(chkAjaBrowser()){ location.href='nonajax.htm' }

// @sample oj = new chkAjaBrowser();if(oj.bw.safari){ /* Safari 코드 */ }

// @return 라이브러리가 동작가능한 브라우저만 true true|false

function chkAjaBrowser()

{

var a,ua = navigator.userAgent;

this.bw= {

safari : ((a=ua.split('AppleWebKit/')[1])?a.split('(')[0]:0)>=124 ,

konqueror : ((a=ua.split('Konqueror/')[1])?a.split(';')[0]:0)>=3.3 ,

mozes : ((a=ua.split('Gecko/')[1])?a.split(" ")[0]:0) >= 20011128 ,

opera : (!!window.opera) && ((typeof XMLHttpRequest)=='function') ,

msie : (!!window.ActiveXObject)?(!!createHttpRequest()):false

}

return (this.bw.safari||this.bw.konqueror||this.bw.mozes||this.bw.opera||this.bw.msie)

}

////

// XMLHttpRequest 오브젝트 생성

// @sample oj = createHttpRequest()

// @return XMLHttpRequest 오브젝트(인스턴스)

function createHttpRequest()

{

if(window.ActiveXObject){

//Win e4,e5,e6용

try {

return new ActiveXObject("Msxml2.XMLHTTP") ;

} catch (e) {

try {

return new ActiveXObject("Microsoft.XMLHTTP") ;

} catch (e2) {

return null ;

}

} else if(window.XMLHttpRequest){

//Win Mac Linux m1,f1,o8 Mac s1 Linux k3용

return new XMLHttpRequest() ;

} else {

return null ;

}

////

// 송수신 함수

// @sample sendRequest(onloaded,'&prog=1','POST','./about2.php',true,true)

// @param callback 송수신시에 기동하는 함수 이름

// @param data 송신하는 데이터 (&이름1=값1&이름2=값2...)

// @param method "POST" 또는 "GET"

// @param url 요청하는 파일의 URL

// @param async 비동기라면 true 동기라면 false

// @param sload 수퍼 로드 true로 강제、생략또는 false는 기본

// @param user 인증 페이지용 사용자 이름

// @param password 인증 페이지용 암호

function sendRequest(callback,data,method,url,async,sload,user,password)

{

//XMLHttpRequest 오브젝트 생성

var oj = createHttpRequest();

if( oj == null ) return null;

//강제 로드의 설정

var sload = (!!sendRequest.arguments[5])?sload:false;

if(sload || method.toUpperCase() == 'GET')url += "?";

if(sload)url=url+"t="+(new Date()).getTime();

//브라우저 판정

var bwoj = new chkAjaBrowser();

var opera = bwoj.bw.opera;

var safari = bwoj.bw.safari;

var konqueror = bwoj.bw.konqueror;

var mozes = bwoj.bw.mozes ;

//송신 처리

//opera는 onreadystatechange에 중복 응답이 있을 수 있어 onload가 안전

//Moz,FireFox는 oj.readyState==3에서도 수신하므로 보통은 onload가 안전

//Win ie에서는 onload가 동작하지 않는다

//Konqueror은 onload가 불안정

//참고 http://jsgt.org/ajax/ref/test/response/responsetext/try1.php

if(opera || safari || mozes){

oj.onload = function () { callback(oj); }

} else {

oj.onreadystatechange =function ()

{

if ( oj.readyState == 4 ){

callback(oj);

}

//URL 인코딩

data = uriEncode(data)

if(method.toUpperCase() == 'GET') {

url += data

}

//open 메소드

oj.open(method,url,async,user,password);

//헤더 application/x-www-form-urlencoded 설정

setEncHeader(oj)

//디버그

//alert("////jslb_ajaxxx.js//// \n data:"+data+" \n method:"+method+" \n url:"+url+" \n async:"+async);

//send 메소드

oj.send(data);

//URI 인코딩 헤더 설정

function setEncHeader(oj){

//헤더 application/x-www-form-urlencoded 설정

// @see http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.13.3

// @see #h-17.3

// ( enctype의 기본값은 "application/x-www-form-urlencoded")

// h-17.3에 의해、POST/GET 상관없이 설정

// POST에서 "multipart/form-data"을 설정할 필요가 있는 경우에는 커스터마이즈 해주세요.

// 이 메소드가 Win Opera8.0에서 에러가 나므로 분기(8.01은 OK)

var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';

if(!window.opera){

oj.setRequestHeader('Content-Type',contentTypeUrlenc);

} else {

if((typeof oj.setRequestHeader) == 'function')

oj.setRequestHeader('Content-Type',contentTypeUrlenc);

}

return oj

}

//URL 인코딩

function uriEncode(data){

if(data!=""){

//&와=로 일단 분해해서 encode

var encdata = '';

var datas = data.split('&');

for(i=1;i<datas.length;i++)

{

var dataq = datas[i].split('=');

encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);

}

} else {

encdata = "";

}

return encdata;

}

return oj

}

XML을 동적 수신

XmlSample.htm

<!--

//콜백 함수 ( 수신시에 실행됩니다 )

function on_loaded1(oj)

{

//응답을 취득

var xmlDoc = oj.responseXML

//testdata 태그를 배열로 잡는다

var nodes = xmlDoc.getElementsByTagName("testdata")

//최초의 testdata 태그의 firstChild의 값을 표시한다

alert(nodes[0].firstChild.nodeValue)

}

//-->

</script>

<form>

<input type = "button"

value = "test.xml를 읽어 들여, 대화창에 표시합니다"

onclick = "sendRequest(on_loaded1,'','GET','./test.xml',true,true)">

</form>

test.xml(UTF-8)

<?xml version="1.0" encoding="UTF-8"?>

Text를 동적 수신

TextSample.htm

src = "./lib/jslb_ajax.js"

charset = "utf-8"></script>

<!--

//콜백 함수 ( 수신시에 실행됩니다 )

function on_loaded1(oj)

{

//응답을 취득하여 디코딩

var res = decodeURIComponent(oj.responseText)

//응답된 문자열을 대화창에 표시

alert(res)

}

//-->

</script>

<form>

<input type = "button"

value = "test.txt을 읽어들여, 대화창에 표시합니다"

onclick = "sendRequest(on_loaded1,'','GET','./test.txt',true,true)">

</form>

test.txt(UTF-8)

이제 읽어들였습니다.

5. 활용예제

글자자동완성 기능(Naver등 각종 포탈, Google Suggest) - Ajax를 위한 별도의 DB를 구성하기도 함.
Google Map
Gmail
Flickr
Amazon's A9.com
웹 어플리케이션에서 AJAX/XMLHTTPRequest를 사용한 예제들을 담고 있다.
- Clearnova's Ajax Examples page.
  http://www.clearnova.com/ajax/index.html
- Rico's JavaScript Example page
  http://openrico.org/rico/demos.page
- BackBase's Ajax Example Page
  http://www.backbase.com/demos/explorer/
- Realtime HTML editor
  http://www.squarefree.com/htmledit/
- Ajax IM (instant messenger)
  http://www.unwieldy.net/ajaxim/
- AJAX based spellchecker demo
  http://demo.primalgrasp.com/spell/edit_text
- 온라인 일정관리(달력) 프로그램
  http://www.kiko.com/
- Backbase's Information Portal
  http://projects.backbase.com/RUI/portal.html
- Design Demo - Web 2.0, AJAX, and Rails UI Elements
  http://www.maxkiesler.com/index.php/designdemo/
- 우편번호 프로그램(예제 소스와 함께 너무도 친절하게 설명되어 있어, 영문이여두 전혀 어렵지 않다.)
  http://www.webpasties.com/xmlHttpRequest/xmlHttpRequest_tutorial_1.html
- Top 10 Ajax Applications
  http://www.aventureforth.com/?p=13
Ajax를 이용한 RSS Reader

관련링크 & 참고문서

저작자표시 비영리 동일조건

[Ajax] Ajax(Asynchronous JavaScript + XML) 기본 - 2

티스토리툴바