jjeong

http://dev.w3.org/html5/eventsource/

[Constructor(DOMString url, optional EventSourceInit eventSourceInitDict)]
interface EventSource : EventTarget {
  readonly attribute DOMString url;
  readonly attribute boolean withCredentials;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSED = 2;
  readonly attribute unsigned short readyState;

  // networking
  [TreatNonCallableAsNull] attribute Function? onopen;
  [TreatNonCallableAsNull] attribute Function? onmessage;
  [TreatNonCallableAsNull] attribute Function? onerror;
  void close();
};

dictionary EventSourceInit {
  boolean withCredentials = false;
};

Streams must be decoded as UTF-8

If the line is empty (a blank line)

Dispatch the event, as defined below.

If the line starts with a U+003A COLON character (:)

Ignore the line.

If the line contains a U+003A COLON character (:)

Collect the characters on the line before the first U+003A COLON character (:), and let field be that string.

Collect the characters on the line after the first U+003A COLON character (:), and let value be that string. If value starts with a U+0020 SPACE character, remove it from value.

Process the field using the steps described below, using field as the field name and value as the field value.

Otherwise, the string is not empty but does not contain a U+003A COLON character (:)

Process the field using the steps described below, using the whole line as the field name, and the empty string as the field value.

Once the end of the file is reached, any pending data must be discarded. (If the file ends in the middle of an event, before the final empty line, the incomplete event is not dispatched.)

The steps to process the field given a field name and a field value depend on the field name, as given in the following list. Field names must be compared literally, with no case folding performed.

If the field name is "event"

Set the event name buffer to field value.

If the field name is "data"

Append the field value to the data buffer, then append a single U+000A LINE FEED (LF) character to the data buffer.

If the field name is "id"

Set the last event ID buffer to the field value.

If the field name is "retry"

If the field value consists of only characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then interpret the field value as an integer in base ten, and set the event stream's reconnection time to that integer. Otherwise, ignore the field.

Otherwise

The field is ignored.

[event stream 구조]
- wakeup 이라는 이벤트가 발생하도록 메시지를 전달 합니다.

이 넘은 불행하게도 아직 고려중인 듯 합니다. 

http://jjeong.tistory.com/476

- http://www.google.co.kr/search?aq=f&gcx=c&sourceid=chrome&ie=UTF-8&q=XMLHttpRequest (기본구글링 한번 해보시고.. )
- http://www.w3.org/TR/XMLHttpRequest/ (XMLHttpRequest Leve 1)
- http://www.w3.org/TR/XMLHttpRequest2/ (XMLHttpRequest Level 2)
- https://developer.mozilla.org/ko/XMLHttpRequest 
- https://developer.mozilla.org/ko/demos/tag/tech:xhr/
- http://www.w3schools.com/xml/xml_http.asp
- http://msdn.microsoft.com/en-us/library/ms535874(v=vs.85).aspx

- xhr = new XMLHttpRequest();

  . 이제는 일반적으로 이넘으로 사용을 하자.

- xhr = new ActiveXObject("Microsoft.XMLHTTP");
  . IE5, 6을 지원하기 위한건데.. 이제 이넘들은.. 버리죠.. :) 

# 기본 XMLHttpRequest 구현체
<script type="text/javascript">
//<![CDATA[

var XHR = {

conn:null,

request:{

url:'',

method:'GET',

data:'',

async:true

},

header:{

key:[],

value:{}

},

data:{

key:[],

value:{}

},

response:{

type:"XML"

},

createConnection:function () {

if ( typeof window.XMLHttpRequest ) {

this.conn  = new XMLHttpRequest();

} else if ( typeof window.ActiveXObject ) {

this.conn = new ActiveXObject("Microsoft.XMLHTTP");

}

return this.conn;

},

createRequestData:function () {

var size = this.data.key.length;

for ( var i=0; i<size; i++ ) {

this.request.data += this.data.key[i] + '=' + this.data.value[this.data.key[i]] + '&';

}

this.request.data = this.request.data.substr(0, this.request.data.length - 1);

return this.request.data;

},

createRequestHeader:function () {

var size = this.header.key.length;

for ( var i=0; i<size; i++ ) {

this.conn.setRequestHeader(this.header.key[i], this.header.value[this.header.key[i]]);

}

},

open:function () {

var requestUrl;

if ( this.request.method == 'GET' ) {

requestUrl = this.request.url + '?' + this.request.data;

} else {

requestUrl = this.request.url;

}

this.conn.open(this.request.method, requestUrl, this.request.async);

},

send:function () {

if ( this.request.method == 'GET' ) {

this.conn.send();

} else {

this.conn.send(this.request.data);

}

}

}

//]]>
</script> 

# Client 페이지
<!DOCTYPE html>

<html>

<head>

<title>XMLHttpRequest</title>

<script type="text/javascript">

//<![CDATA[

XHR.request.url = "http://192.168.1.1/api/request/index.html";

XHR.request.method = "GET"; // "POST";

XHR.header.key = ["Content-Type"];

XHR.header.value = {

"Content-Type":"application/x-www-form-urlencoded"

};

XHR.data.key = ["id", "s", "ts"];

XHR.data.value = {

    "id":12345678,

    "s":"320x48",

    "ts": Math.floor(new Date().getTime()/1000)

};
 

function xhrRequest() {

XHR.createConnection();

XHR.createRequestData();

/*

response event 처리를 위해서 별도로 수행해야 하는 함수를 추가 작성함.
각 biz 특성에 맞는 기능 구현. 

*/ 

XHR.conn.onreadystatechange = function () {

switch ( XHR.conn.readyState ) {

case 0 : // XHR.conn.UNSENT :

break;

case 1 : // XHR.conn.OPENED :

break;

case 2 : // XHR.conn.HEADERS_RECEIVED :

break;

case 3 : // XHR.conn.LOADING :

break;

case 4 : // XHR.conn.DONE :

doReadyStateChange();

break;

}

function doReadyStateChange() {

if ( XHR.conn.status >= 200 && XHR.conn.status < 300 ) {

testConsole(XHR.conn.responseXML.getElementsByTagName("cid")[0].childNodes[0].nodeValue);

} else if ( XHR.conn.status == 404 ) {

alert('Not Found.');

} else {

alert(XHR.conn.status);

}

};

XHR.open();

XHR.createRequestHeader();

XHR.send();

}

function testConsole (log) {

var console = document.getElementById("console");

console.innerHTML = log + '<br>' + console.innerHTML;

}

//]]>

</script> 

</head>

<body>

<button onclick="xhrRequest();">XMLHttpRequest Call</button>

<div id="console" style="width:800px; height:400px"></div>

</body>

# index.html 에서 return 해주는 XML
<?php

header('Content-Type: text/xml; charset=utf-8');

?>

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

<result>

    <item>

        <cid>1234567890</cid>
        <name>Henry</name> 

    </item>

</result>