Soon Gud Story

AJAX는 쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다. 

HTML from 태그를 사용하지 않고 javascript를 사용하기 때문에 서버에 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 이동 할 필요가 없기 때문에 "새로고침"을 할 필요가 없습니다.

또한 그부분만 로딩 되기 때문에 속도가 빠릅니다. 본래 명칭은 아래에 글을 참고하세요

Asynchronos 

 1. 바로해석을 하면 "비동기적" 이라는 뜻입니다.

 2. 비동기적이라는 것은, 클라이언트(사용자)가 서버에 요청을 보내놓고도 응답을 기다리며 대기 하는 것이 아닌 프로그램은 계속 실행이 된다는 의미 입니다.

    다시 말하면 먼저 요청한 것에 대한 것이 있다고 해서 그 응답을 기다리고 다음것이 실행 되는 것이 아닙니다. 

    그래서 어떠한 경우에는 나중에 요청한 결과가 먼저 실행되어 버리는 경우도 있습니다.

Javascript

 1. 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어 입니다.

XML

 1. XML은 우선 간단히 데이터 형식의 일종으로 이해하면 됩니다. 

 2. XML은 "Extensible Markup Language" 줄임말 입니다. 해석하면 확장가능한 표시 언어 입니다. 

    Markup Language는 데이터를 태그 항목으로 표시한다는 것입니다. 

    HTML 도 일종의 Markup Language 입니다. 

    대신 데이터를 태그항목으로 설정하는데 HTML에 비해 자유도가 높습니다. 

AJAX의 본래 명칭

 1. AJAX의 본래 명칭은 XHR(XML Http Request) 입니다. 해석하자면 HTTP request를 서버에 보낸다는 의미 입니다.

JSON

 1. JSON도 일종의 데이터 형태 입니다. XML은 자바스크립트에서 사용하기 불편한 점이 많기 때문에 주로 JSON 데이터 형식을 많이 씁니다.

 2. JSON은 객체 또는 배열 등을 이용해서 표현 됩니다. 

AJAX 4단계 과정

 1. XMLHTTP request object를 생성합니다.

    request(요청)를 보낼 준비를 브라우저에게 시키는 과정입니다.

 2. callback 함수를 만듭니다.

    서번에서 response(응답)이 왔을때 실행되는 함수 입니다.

 3. open request

    브라우저에게 두가지 정보를 넘깁니다. 

    request를 보내기 위해 사용할 메소드 예를들면 post 이고 request 가 이동할 URL 입니다. 

 4. request를 보냅니다.

예제 코드 

---------------------------------------------------------------------------------------------------------------------

var xhr = new XMLHttpRequest();  // xhr 객체를 생성한다.

xhr.onreadystatechange = function(){  // request 변화여부를 확인할수 있는 객체로 function을 실행한다.

 if(xhr.readyState===4{

 document.getElementById('ajax').innerHTML = xhr.responseText; //response 이다.

 }

}

xhr.open('GET',"test.html");  // html get 방식 메소드와 URL를 낼 준비를 한다.

xhr.send();

---------------------------------------------------------------------------------------------------------------------

onreadystatechange

 1. AJAX에서 이벤트는 사용자가 form를 submit하는 것이 일종의 이벤트이다. 이 form이 제대로 입력되었는지 AJAX에 어떠한 변화가 있는지 여부에 대응하는 프로그램이다.

readyState

 1. XHR object는 response가 돌아 왔는지 아닌지를 추적하는 property 이다.

    response 값이 4 이면 response 가 돌아 온것이다.

open 과 send 

 1. open()는 보낼 준비를 시키는 것이지 보내는 것은 send() 메소스가 한다. 

감사합니다. 고맙습니다. 운이 좋습니다. 

XSLT 사용법 xml

XSLT(Extensible Stylesheet Language Transformations)는

W3C에서 제정한 표준으로 XML 변환 언어를 사용하여 XML 문서로 바꿔주며, 탐색하기 위해 XPath를 사용합니다.

원본 문서는 변경되지 않으며, 원본 문서를 기반으로 새로운 문서가 생성됩니다.

새 문서는 표준 XML 문법 또는 HTML, 일반 텍스트 형식으로 출력합니다.

XSLT는 XML 데이터를 웹 페이지로 표시하기 위해 HTML 또는 XHTML 문서로 변환할 때 자주 사용합니다.

변환은 클라이언트나 서버에서 동적으로 수행되거나, 퍼블리싱 단계에서 수행되기도 합니다

XML을 PDF, PostScript, AWT, PNG와 같은 다양한 형태로 바꿀 수 있는 XML-FO로 변환할 때도 사용합니다.

XSLT는 일반적으로 서로 다른 XML 스키마를 사용하는 XML 메시지를 변환하거나, 

하나의 스키마 안에서 문서를 변경하기 위해 사용합니다.

즉 XSLT 란 XML 을 다른 형식의 출력 format 으로 바꾸어주는 표준 문법입니다.

xml 로 key, value 관계를 지정 하고 xsl 문서로 출력 형태를 지정 하면 됩니다.

아래 예제는 xsl 을

<template1> 을 정의 하고 그 다음에 <template1> 안의 내용인 <template1-1>,<template1-2> 를 정의 하는 방식입니다.

<xsl:apply-templates/> 는 자식 노드 값을 모두 나열하는데 하단에서 자식 노드출력을  template 로 지정해 주면 아래서 지정해 준 방식 대로 출력 된다.

 =================================

example.xml 내용

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

<?xml:stylesheet type="text/xsl" href="example.xsl"?>

<MEMBERS>

<MEMBER>

 <name>스타</name>

 <email>start@gmail.com</email>

 <homepage>http://start.***.net</homepage>

</MEMBER>

<MEMBER>

 <name>달림</name>

 <email>mooni@hanmail.net</email>

 <homepage>no1</homepage>

</MEMBER>

</MEMBERS>

==============================================

example.xsl 내용

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

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" indent="no" encoding="UTF-8"/>

<xsl:template match="MEMBERS">

<table border="1">

 <tr>

  <td>

   NAME

  </td>

  <td>

   Email

  </td>

  <td>

   Homepage

  </td>

 </tr>

 <xsl:apply-templates/>

</table>

</xsl:template>

<xsl:template match="MEMBER">

 <tr>

 <xsl:apply-templates/>

 </tr>

</xsl:template>

<xsl:template match="name">

 <td>

  <xsl:apply-templates/>

 </td>

</xsl:template>

<xsl:template match="email">

 <td>

  <xsl:apply-templates/>

 </td>

</xsl:template>

<xsl:template match="homepage">

 <td>

  <xsl:apply-templates/>

 </td>

</xsl:template>

</xsl:stylesheet>

==============================================

example.xml 을 웹브라우저에서 실행 시킨 결과는 다음과 같이 표시 할수 있습니다.