MISTERY


iframe (아이프레임)

floating frame 라고도 불리는 iframe 는 (internet frame) 의 약자로 그림이나 테이블과 같은 객체 처럼 프레임셋을 정의 하지 않고도 문서의 어느곳이나 원하는 위치에 프레임을 넣을 수 있습니다.

 

  1. <iframe src="프레임 url" name="프레임 이름" width="넓이" height="높이" marginwidth="프레임의 좌, 우 여백" marginheight="프레임의 상, 하 여백" frameborder="프레임의 구분선(테두리)" scrolling="no, yes, auto">
  2. iframe 이 지원되지 않는 웹 브라우저에 나타날 내용
  3. </iframe>

 

iframe (아이프레임) 속성

 src

 프레임에 나타날 문서의 주소를 지정 합니다.

 name

 <iframe> 의 이름을 지정 합니다. 하이퍼 링크의 target=""  지정에 사용 합니다.

 width

 프레임의 가로 넓이를 지정 합니다.

 height

 프레임의 세로 높이를 지정 합니다.

 marginwidth

 프레임의 좌, 우 여백을 지정 합니다.

 marginheight

 프레임의 상, 하 여백을 지정 합니다.

 frameborder

 프레임의 구분선(테두리)을 지정 합니다.

 scrolling

 프레임의 스크롤 속성을 지정 합니다.

scrolling 의 속성값

 no

 프레임 문서의 스크롤을 비활성화 합니다.

 yes

 프레임 문서의 스크롤을 활성화 합니다. (가로, 세로)

 auto

 프레임 문서의 컨텐츠가 많을 경우 자동으로 세로 스크롤바가 나타납니다. (default)


meta 태그

메타 태그는 HTML 문서의 head 에 삽입하여 문서의 정보, 인코딩, 트렌지션 효과, 다른 페이지로의 자동 이동과 같은 형태로 다양하게 사용 할 수 있습니다.

 

stylesheet

스타일시트는 HTML 에서 구현 할 수 없는 문단의 줄간격, 포인트 단위의 크기 문서 배경에서의 반복 횟수 지정, 밑줄 없는 상태에서의 하이퍼 링크와 같은 것들을 만들 수 있습니다. HTML 에 디자인을 입힌다고 생각하면 됩니다.

 

또, 스타일시트를 이용하면, 자주 사용하는 문단에 관련된 스타일, 폼 구성 요소와 같은 스타일을 CSS 확장자 형태로 정의 해놓고, 이 파일을 공유해서 다른 문서에서 똑같은 형태로 사용 할 수 있습니다. 그렇게 되면 웹 사이트의 모든 문서에 같은 스타일을 적용 할 수 있어서 반복 작업을 줄이고, 무분별한 코드 낭비를 하지 않습니다.

 

장점

HTML 에서 구현하지 못하는 줄간격, 글자 간격, 포인트, 픽셀과 같은 단위의 사용, 배경 그림을 특정한 방향으로 반복 시키거나 하이퍼 링크의 밑줄 변화, 오버 상태 만들기 등이 가능 합니다. 스타일을 공유 할 수 있어서, 반복 작업으로 인한 코드 낭비를 줄일 수 있습니다. 

 

별도의 CSS 파일을 만들어 놓고 웹 사이트 각각의 문서에서 불러와 적용 할 수 있습니다. 다양한 디자인이 적용된 사이트를 만들 수 있습니다. 

 

HTML 문서 만으로는 할 수 없는 개성 넘치는 디자인을 스타일시트를 이용하여 웹 페이지에 적용 시킬 수 있습니다.

 

적용 방식

인라인 스타일 : HTML 요소에 스타일 속성을 각각 적용 합니다.

내장 CSS : HTML 문서의 head 부분안에 <style> 을 사용하여, 선택자와 속성을 정의해서 사용 합니다.

외장 CSS : *.css 파일 형태로 만들어 사용 합니다.

 

  • <link rel="stylesheet" type="text/css" href="url" />
  • @import url("url");

 

 

 

 

 

 

 

 

출처 : http://blog.naver.com/joonhojeon/220157267293

 

 

 

 

 

 

 

 

 

 

신고

Comment +0

AJAX를 이용하여 페이지간 비동기 통신을 하는데

서로 주고받는 데이터는 text, XML, JSON type으로 많이 쓰인다.

 

하지만 AJAX 호출을 필요로 하는 기능에서 보안상 이유로 동일 서버 이외에는 접근할수가 없다.

( not allow access.. 어쩌고 저쩌고 에러 메세지가 나온다.)

 

자바스크립트(Javascript) 보안 정책 중에 하나인 동일근원정책(Same-Origin Policy) 정책에 걸리는 부분이 바로 크로스 도메인을 할때 일어난다. 서로 다른 도메인에서 자바스크립트로 접근하려 했을 때 혹은 다른 서버에 Ajax통신의 결과를 받을 때 보안상 접근을 거부한다는 뜻이다.

 

* 동일 근원 정책 참조 >>

동일출처정책(Cross domain 이슈)


Cross Domain 깨부수기 참 쉽게.

그 부분을 해결하는 부분의 하나가 jQuery의 JSONP이다.

 

* JSONP 구현 참조 >>

jQuery의 JSONP을 사용한 크로스도메인간 통신

http://www.codejs.co.kr/jquery-jsonp/ 

 

CrossDomain Ajax 호출 #1 : jQuery JSONP ajax 호출 이용.

http://stove99.tistory.com/10 

 

[Tip] JSONP를 이용하여 Cross Domain 해결



* JSONP 구현 코드 >>

 

//자바 스크립트 코드 - 원격 서버에 요청

http://{request_ip}/reqeust.php

 

function testJSON(gw_name, ip) {

/*

//도메인 내 통신 : callback 함수의 개념이 없다. JSON type의 Data만 리턴해주면 됨

$.ajax({

type:"POST",

url : "test.php",

data : "id=user",

dataType : "json",

success: function(data) {

if(data != null)    {

alert(data.message );

}

}

});

*/

//크로스 도메인 통신 1 : : callback 함수의 개념이 필수. JSON type의 Data를 Callback함수로 감싸서 리턴해줘야 됨

$.ajax({

type:"POST",

url : "http://"+ip+"/test2.php",

data : "ref1="+gw_name,

dataType : "jsonp",

jsonpCallback : "myCallback",

success: function(data) {

console.log('성공 - ', data);

if(data != null)    {

alert(data.message + "[" + data.time + "]" + data.gate_name);

}

},

error: function(xhr) {

 console.log('실패 - ', xhr);

}

});

 

/*

//크로스 도메인 통신 2. : callback 함수면을 임의(자동)로 생성해줌

$.getJSON("http://"+ip+"/test2.php?id=user&callback=?", 

function(data) {

alert(data.message);

}

);

*/

}

 

 

//원격서버에서 결과 값 리턴 부분

http://{ip}/test2.php

 

<?php

  header('Content-Type: application/javascript;charset=UTF-8');

$ref1 = $_REQUEST['ref1'];

$dtime = date("Y-m-d H:i:s");

$callback = $_REQUEST['callback']; //request 쪽에서 명시한 myCallback에 해당한다. 명시적일때 굳이 변수로 받지 않고 그냥 myCallback이라고 적어줘도 된다. 단, 크로스 도메인 통신 2 경우처럼 임의 생성될때는 이름을 모르니 이렇게 받아서 아래쪽에서 함수명을 완성하여 콜백해준다.

 

$arr = array("message" => "You got an AJAX response via JSONP from another site! ", "time" =>$dtime, "gate_name" => $ref1);

 

$json_val =  json_encode($arr);

//echo "${param.callback}(".$json_val.");";

echo $callback."(".$json_val.")";

 

?>

 

 

 

 

 

 

 

 

출처 : http://blog.naver.com/sheis0/120208400734

 

 

 

 

 

 

 

신고

Comment +1

  • 안녕하세요..글 잘 읽었습니다!ㅎㅎ
    crossDomain 문제때문에 이틀내내 골머리를 썩히고있어서..조언 좀 구해보고자 댓글 남겨봅니다..
    타이머로 1초마다 ajax를 호출하게하고싶었습니다..타이머는 정상 작동하구요..
    --ajax 함수--
    function goAjax(p) {
    console.log("11");
    $.ajax({
    url: "http://192.168.1.5/ANDROID_WEBSERVICE/Service.asmx/COE_WebTest",
    type: "POST",
    crossDomain:true,
    jsonp:"callback",
    dataType: "jsonp",
    success:function(msg){
    alert(msg);
    },
    error:function(request,status,error){
    alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);}
    });
    }

    ---------
    이렇게 구현을 해놓았는데요..
    에러로 빠지고
    code:200
    message:undefined
    error:Error:jQuery17201310405953201761_1495763094413 was not called
    라는 alert가 나타납니다..
    jQuery 뒤에 붙는 숫자들은 alert가 한번 뜰때마다 바뀌구요..

    크롬에서 F12 눌러서 console 창에서 뜬 오류를 따라가보니

    <?xml version="1.0" encoding="utf-8"?> <-- 여기에 오류가 있다고 나타났습니다..
    <string xmlns="http://tempuri.org/">{"Table":{"row0":{"CODE_ID":"1","CODE_NAME":"항목1","TYPE":false},"row1":{"CODE_ID":"2","CODE_NAME":"항목2","TYPE":false},"row2":{"CODE_ID":"3","CODE_NAME":"항목3","TYPE":true},"row3":{"CODE_ID":"4","CODE_NAME":"항목4","TYPE":true}}}</string>


    방식은 웹서비스에 프로시져를 등록해둔것입니다..
    datatype을 json으로 줬을때는 크로스 도메인 오류라는 메세지가 떠서 현재는 jsonp로 준 상태입니다..

1. WebSodkets 란?

}하나의 TCP소켓 연결로 쌍방향 통신을 지원하는 기술
웹서버와 브라우저에서 구현되기 위해 고안되었지만 모든 클라이언트와 서버 프로그램간에서 사용 가능.
WebSocket APIW3C(http://www.w3.org/TR/websockets/#network-intro)에서 정의하고 있고, WebSocket 프로토콜은 IETF(Internet Engineering Task Force) 에 의해 정의 됨.

}HTTP, FTP, TELNET 등과 같은 Application layer의 프로토콜 사용.

}80번 이외의 포트로 시도되는 일반적인 TCP 연결은 관리자의 보안 정책에 따라 막히는 경우가 많기 때문에 이런 제약을 극복할 수 있는 방법이 될 수 있음.


2. 배경

}1996 Microsoft Exchange 엔지니어 팀이 메일서버 시스템에 아웃룩 같은 프론트 엔드를 제공하기 위해서 IFrame element를 사용 -> 반응성과 UX 면에서 실패

}1998MS Exchange Server 2000에서 웹 프론트 엔드를 작성하면서 [XMLHTTP : 웹 페이지에서 서버와 비동기 커뮤니케이션을 가능하게 한 컴포넌트] 개발. (이 컴포넌트는 XML과 직접적인 연관이 없음에도 접두사로 XML을 쓴 이유는 IE5가 두 번째 베타 버전을 준비하고 있었는데, 이 개발팀은 XMLHTTP 컴포넌트를 MSXML 라이브러리에 포함시켜야 했기 때문)

 

}2002년 이 기술은 Mozilla 재단이 첫 번째 브라우저 버전을 위해 (미래의 Firefox) XMLHTTPRequest (XHR)로 구현.  이후, 이 새로운 API를 사용하려고 하는 시도는 많았지만 사람들의 주목을 받지 못 함.

}구글이 자바스크립트와 XHR에 기반한 차세대 서비스를 배포하면서 많이 알려지게 됨. 첫번째 서비스는 2005 2구글 블로그를 통해 알려진 구글 지도.

}그 이후 XHR은 뜨거운 관심사가 되었고, 그 누구도 예상하지 못 했지만 Web Application 발전을 이끌게 됨.


3. 웹에서 비동기 커뮤니케이션 기술

}Ajax : 비동기 식으로 서버에 데이터를 요청해서 받음. (asynchronously poll). 서버 이벤트가 큐에 담겨지고 하나씩 브라우저로 전송. 진정한 의미의 실시간 커뮤니케이션이 어려움.

}Comet : 클라이언트의 요청 없이 서버에서 정보를 브라우저로 내려보내는 push 스타일 커뮤니케이션 모델. 추가적인 HTTP 연결을 통해 Comet은 양방향 커뮤니케이션을 지원함.
XHR and iFrames를 지원하는 Browser Vendor 들에 의해 제공되는 표준이 없고, 네트워킹과 개발에 있어서의 과부하, 두 개의 연결을 관리하는 문제 등이 있음.
다른 용어
: Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, HTTP server push

}HTML5 WebSocket : Comet Ajax를 대체할 새로운 기술.
하나의 소켓으로 서버와 클라이언트 간의 양방향 커뮤니케이션을 가능하게 함
.
Comet 의 연결과 비대함 문제를 해결하고, Ajax polling 보다 효율적인 방법을 제시.


4. 구현

▶jWebSocket (Java) : http://jwebsocket.org/
▶web-socket-ruby (ruby) : https://github.com/gimite/web-socket-ruby
▶Socket IO-node (node.js) : https://github.com/LearnBoost/Socket.IO-node



[출처 1] http://www.infoq.com/news/2008/12/websockets-vs-comet-ajax (전부 읽어 봐야 할텐데...ㅜㅜ)
[출처 2] http://en.wikipedia.org/wiki/Websockets
[출처 3] http://en.wikipedia.org/wiki/Comet_(programming)

 

 

 

 

 

 

 

 

출처 : http://yarbong.tistory.com/36

 

 

 

 

 

 

 

신고

Comment +0

Same-Origin 정책(동일근원정책) 

브라우저에는 동일 근원 정책이 있음. 같은 도메인 안에서만 XHR 호출이 가능 - SOP

 

XMLHttpRequest(XHR)

Ajax 는 Asynchronous JavaScript and XML의 약자 비동기 통신
페이지 전체를 로드하지 않고 일부분만 로드하여 DOM을 사용하여 내용을 추가하거나 바꿀 수 있다.

 

XHR의 순서

1. XHR선언
2. 옵션 ( 콜백함수 설정)
3. 서버에 HTTP요청
4. 콜백함수에서 서버의 응답 받아와서 처리

1. XHR 선언

var XHR = new XHLHttpRequest();
익스플로러 경우에 따라
var XHR = new ActiveXObject("Msxml2.XMLHTTP");
var XHR = new ActiveXObject("Microsof.XMLHTTP");

2. 옵션 (콜백함수 설정)

XHR.open("GET", url, false);
Get 방식으로 전송하고 요청보낼 url false는 동기식

XHR.onreadystatechange = function;
응답받을 콜백함수를 설정

3. HTTP 요청 보내기

XHR.send(null);

4. 응답 처리

설정한 콜백함수에서 응답을 처리한다

XHR.onreadystatechange = function() {
        if ( XHR.readyState == 4 ) {
                if (XHR.status == 200) {
                        alert (XHR.responseText);
                   }
            }
}

// resayState

0 : open() 이 아직 호출되지 않음
1 : send() 가 호출되지 않음
2: 서버로부터 응답이 없음
3: 데이터를 받는 중
4: 서버로부터 응답을 다 받았음

status

"200" ; Section 10.2.1 : Ok
"204" ; Section 10.2.5 : No Content
"400" ; Section 10.4.1 : Bad Request
"500" ; Section 10.5.1 : Internal Server Error
"503" ; Section 10.5.4 : Service Unavailable

 

 

 

 

 

 

 

 

 

출처 : http://blog.naver.com/mimi215/60179874174

 

 

 

 

 

 

 

 

 

 

신고

Comment +0

1. javascript에서 json객체 만드는 방법

 

 - 객체에 property추가

        var obj = new Object();

        obj.id = 'id';

        obj.password = '#pw';

        obj.idStore = 'on';

 - 객체를 json으로 만듬

        var jsonData = JSON.stringify(obj);

 

 

2. 자바단에서 Json, JsonArray객체 만드는 방법(Simple JSON api사용)

 

 2.1 Json객체 새로 만들기

           JSONObject obj = new JSONObject();

        obj.put("name","PC");

           참고로 JSONObject map처럼 key value값으로 넣을 수 있다.

 

 2.2 Json형태의 string으로 부터 json객체 만들기

           JSONObject json = (JSONObject) JSONValue.parse(jsonParam);

 

 2.3 JsonArray새로 만들기

           JSONArray data = new JSONArray();

        data.add(1);

           참고로 JSONArray value값만 넣을 수 있다.(일종의 배열처럼)

 

  ex : (JSONArray안에 JSON객체를 넣은 예제)

        JSONArray series = new JSONArray();

       

        JSONObject obj = new JSONObject();

        obj.put("name","PC");

        JSONArray data = new JSONArray();

        data.add(1);

        obj.put("data", data);

        series.add(obj);

       

        JSONObject obj2 = new JSONObject();

        obj2.put("name","hoho");

        JSONArray data2 = new JSONArray();

        data2.add(5);

        obj2.put("data", data2);

        series.add(obj2);

       

        JSONObject obj3 = new JSONObject();

        obj3.put("name","ㅋㅋ");

        JSONArray data3 = new JSONArray();

        data3.add(10);

        obj3.put("data", data3);

        series.add(obj3);

        System.out.println(series);

 

        실행결과 : [{"name":"PC","data":[1]},{"name":"hoho","data":[5]},{"name":"ㅋㅋ","data":[10]}]

 

 

3. AJAX JSON송수신 예제

 

클라이언트 예 :

 

$(document).ready(function() {

       

        $('#login').eq(0).bind("click", function() {

               var obj = new Object();

               obj.type = 'login';

               obj.id = $('#id').val();

               obj.password = $('#pw').val();

               obj.idStore = 'on';

              

               if(obj.id == '' || obj.password == ''){

                       alert('아이디와 비밀번호를 입력하세요');

                       return;

               }

 

               var jsonData = JSON.stringify(obj);

               $.ajax({

                       type : "POST",

                       dataType : "json",

                       url : "/News/LoginManager",

                       data : {

                              json : jsonData

                       },

                       success : function(data) {

                              // data 서버로부터 전송받은 결과(JSON)이므로 바로 사용한다

                              if (data.answer == 'success') {

                                      alert(data.name + ' 환영합니다.');

                                      var map = new MapArray();

                                      postData('/News/index.do', map);

                              } else if (data.answer == 'fail') {

                                      alert('아이디와 비번이 일치하지 않습니다.');

                              } else if (data.answer == 'error') {

                                      alert('원활한 접속이 이루어 지지 못했습니다. 관리자에게 문의하십시오.');

                              }

                       },

                       error : function(e) {

                              alert('서버 연결 도중 에러가 났습니다. 다시 시도해 주십시오.');

                       }

               });

        });

});

 

 

 

서버단 (SimpleJSON사용) :

 

        String jsonParam = request.getParameter(JsonKeyInfo.PARAM_KEY_JSON);

       

        /**

         * request요청 파라미터로 부터 json데이터(String형태) 가져와서 json객체로 만든다.

         */

        if(jsonParam != null){

            JSONObject json = (JSONObject) JSONValue.parse(jsonParam);

 

               /**

             * type에는 어떤 요청을 하는지에 관한 정보가 들어있다.

             */

            String type = (String)json.get(JsonKeyInfo.JSON_KEY_TYPE);

           

            response.setContentType("application/x-json charset=UTF-8");

 

            if(type.equals(JsonKeyInfo.Type.TYPE_KEY_LOGIN)){//로그인을 요구하는 경우               

               Person person = dao.getPerson(id, password);

                 /**

         * id password 정확하다면 해당 회원에 관한 정보가 person 저장된다.

                */

              

               /**

                  * json요청 응답으로 회원에 관한 일부 정보를 전송한다.

                  */

                   jp.put("answer", JsonKeyInfo.ANSWER.ANSWER_KEY_SUCCESS);

                   jp.put("id", person.getP_id());

                   jp.put("name", person.getP_name());

                  jp.put("phone", person.getP_phone());

 

 

            }

 

            response.getWriter().print(jp); //응답 json 전송한다.(string형식으로 쏴줌)

 

        }

 

 

 

 

 

 

 

출처 : http://blog.naver.com/dakensin?Redirect=Log&logNo=178799627

 

 

 

 

 

 

 

 

신고

Comment +0