exec_xml()을 이용한 Ajax 요청(Request)


XE_ROOT/common/xml_handler.js에 선언되어 있습니다.

exec_xml() 함수는 XE에서 ajax기능을 이용함에 있어 module, act를 잘 사용하기 위한 자바스크립트

XE에서 필터(filter)가 아닌 ajax로 simple XML-RPC로 호출을 하기 위한 방법 


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

exec_xml (module,

                act,

                params,

                callback_function,

                response_tags

                callback_func_arg

                fo_obj

            );

 

module : 모듈명

act : action명( exec_xml()은 자바스크립트 내부에서 요청만 할 뿐 실제적인 일은 액션(act)을 호출하여 처리 결과를 받는다.)

params : 전달할 변수 array로 해도 되고 json 형식으로 해도 무관

callback_func : javascript callback 함수(응답으로 받은 데이터를 처리할 자바스크립트 함수에게 값을 넘겨주는 함수)

response_tags : 응답 요소(기본적으로 error, message 값을 포함)

callback_func_arg : javascript callback 함수에 사용자 변수를 params에 지정 , javascript callback 함수 첫번째 인수에 모듈에서 $this->add로 보낸 변수를 받음

fo_obj : html form object(별도의 객체 처리를 위해 사용하기도 한다)


그러면 게시판 설정에 사용자정의 추가에 있는 순서바꾸는 스크립트 예제를 보겠습니다.


아래의 스크립트를 보면 위에 설명된 부분이 어느정도 이해가 가실거라 봅니다.




사용자 정의 확장변수 순서를 변경하는 moveVar 스크립트를 살펴보겠습니다.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

그런다음 해당 버튼을 클릭 위 또는 아래로 해서 순서 변경을 하게 됩니다.



스크립트에서 params 부분이 절달한 변수 부분입니다.


전달할 변수 array로 해도 되고 json 형식으로 해도 무관


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// 이부분은 json 형식

    var params = {

        type       : type,

        module_srl : module_srl,

        var_idx    : var_idx

    };

   

   또는 

 

   // 이부분은 array 형식

    var params = new Array();

    params["type"] = type;

    params["module_srl"] = module_srl;

    params["var_idx"] = var_idx;

 

두방법중 하나를 선택하면 됩니다.




이번에는 exec_xml()를 이용 해서 특정 게시물 데이타를 출력하는 스크립트 예제입니다.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

 



exec_xml()를 이용한 doSelectDocView 스크립트를 이용하여 외부페이지에 게시물 데이타를 불러온 화면


sample.png











exec_xml 보다 exec_json을 추천. 

exec_xml에서 특정 데이터를 받아올 때 오류가 나지만 exec_json은 그렇지 않으며 exec_json이 사용법이 더 간단



참고로 XE_ROOT/common/xml_handler.js에 선언되어 있는 exec_xml 스크립트 내용입니다.


/**

    * @brief exec_xml

    * @author NAVER (developers@xpressengine.com)

    **/

    $.exec_xml = window.exec_xml = function(module, act, params, callback_func, response_tags, callback_func_arg, fo_obj) {

        var xml_path = request_uri+"index.php";

        if(!params) params = {};

 

        // {{{ set parameters

        if($.isArray(params)) params = arr2obj(params);

        params.module = module;

        params.act    = act;

 

        if(typeof(xeVid)!='undefined') params.vid = xeVid;

        if(typeof(response_tags) == "undefined" || response_tags.length<1) {

            response_tags = ['error','message'];

        } else {

            response_tags.push('error', 'message');

        }

        // }}} set parameters

 

        // use ssl?

        if ($.isArray(ssl_actions) && params.act && $.inArray(params.act, ssl_actions) >= 0) {

            var url    = default_url || request_uri;

            var port   = window.https_port || 443;

            var _ul    = $('').attr('href', url)[0];

            var target = 'https://' + _ul.hostname.replace(/:\d+$/, '');

 

            if(port != 443) target += ':'+port;

            if(_ul.pathname[0] != '/') target += '/';

 

            target += _ul.pathname;

            xml_path = target.replace(/\/$/, '')+'/index.php';

        }

 

        var _u1 = $('').attr('href', location.href)[0];

        var _u2 = $('').attr('href', xml_path)[0];

 

        // 현 url과 ajax call 대상 url의 schema 또는 port가 다르면 직접 form 전송

        if(_u1.protocol != _u2.protocol || _u1.port != _u2.port) return send_by_form(xml_path, params);

 

        var xml = [],

            xmlHelper = function(params) {

                var stack = [];

 

                if ($.isArray(params)) {

                    $.each(params, function(key, val) {

                        stack.push('' + xmlHelper(val) + '');

                    });

                }

                else if ($.isPlainObject(params)) {

                    $.each(params, function(key, val) {

                        stack.push('<' + key + '>' + xmlHelper(val) + '');

                    });

                }

                else if (!$.isFunction(params)) {

                    stack.push('');

                }

 

                return stack.join('\n');

            };

 

        xml.push('');

        xml.push('');

        xml.push('');

        xml.push(xmlHelper(params));

        xml.push('');

        xml.push('');

 

        var _xhr = null;

        if (_xhr && _xhr.readyState !== 0) _xhr.abort();

 

        // 전송 성공시

        function onsuccess(data, textStatus, xhr) {

            var resp_xml = $(data).find('response')[0], resp_obj, txt='', ret=[], tags={}, json_str='';

 

            waiting_obj.css('display', 'none').trigger('cancel_confirm');

 

            if(!resp_xml) {

                alert(_xhr.responseText);

                return null;

            }

 

            json_str = xml2json(resp_xml, false, false);

            resp_obj = jQuery.parseJSON(json_str);

            resp_obj = resp_obj.response;

 

            if (typeof(resp_obj)=='undefined') {

                ret.error = -1;

                ret.message = 'Unexpected error occured.';

                try {

                    if(typeof(txt=resp_xml.childNodes[0].firstChild.data)!='undefined') {

                        ret.message += '\r\n'+txt;

                    }

                } catch(e){}

 

                return ret;

            }

 

            $.each(response_tags, function(key, val){ tags[val] = true; });

            tags.redirect_url = true;

            tags.act = true;

            $.each(resp_obj, function(key, val){ if(tags[key]) ret[key] = val; });

 

            if(ret.error != '0') {

                if ($.isFunction($.exec_xml.onerror)) {

                    return $.exec_xml.onerror(module, act, ret, callback_func, response_tags, callback_func_arg, fo_obj);

                }

 

                alert( (ret.message || 'An unknown error occured while loading ['+module+'.'+act+']').replace(/\\n/g, '\n') );

 

                return null;

            }

 

            if(ret.redirect_url) {

                location.href = ret.redirect_url.replace(/&/g, '&');

                return null;

            }

 

            if($.isFunction(callback_func)) callback_func(ret, response_tags, callback_func_arg, fo_obj);

        }

 

        // 모든 xml데이터는 POST방식으로 전송. try-catch문으로 오류 발생시 대처

        try {

            $.ajax({

                url         : xml_path,

                type        : 'POST',

                dataType    : 'xml',

                data        : xml.join('\n'),

                contentType : 'text/plain',

                beforeSend  : function(xhr){ _xhr = xhr; },

                success     : onsuccess,

                error       : function(xhr, textStatus) {

                    waiting_obj.css('display', 'none');

 

                    var msg = '';

 

                    if (textStatus == 'parsererror') {

                        msg  = 'The result is not valid XML :\n-------------------------------------\n';

 

                        if(xhr.responseText === "") return;

 

                        msg += xhr.responseText.replace(/<[^>]+>/g, '');

                    } else {

                        msg = textStatus;

                    }

 

                    try{

                        console.log(msg);

                    } catch(ee){}

                }

            });

        } catch(e) {

            alert(e);

            return;

        }

 

        // ajax 통신중 대기 메세지 출력 (show_waiting_message값을 false로 세팅시 보이지 않음)

        var waiting_obj = $('.wfsr');

        if(show_waiting_message && waiting_obj.length) {

 

            var timeoutId = $(".wfsr").data('timeout_id');

            if(timeoutId) clearTimeout(timeoutId);

            $(".wfsr").css('opacity', 0.0);

            $(".wfsr").data('timeout_id', setTimeout(function(){

                $(".wfsr").css('opacity', '');

            }, 1000));

 

            waiting_obj.html(waiting_message).show();

        }

    };

전체 관련글 전체관련글
  • **발 지식을 함께 배우고 공유합니다
    줄은 XML 객체를 생성하여 POST 메소드로 주소 '/api/test_upload/'에 request 요청을 보냅니다. onload() 에서 response를 받아 성공 또는 실패시 callback 함수를 실행하는데 성공할 경우 'Uploaded...
    20180221신고
  • **이말랑이
    data: request 요청과 함께 보내지는 데이터 callback : get 또는 post가 완료된 후에 호출되는 함수 간단하게 연습삼아 로그인 Ajax로 구현해보기 로그인을 위한 정말 간단한 html 기본 <div...
    20181204신고
  • **ank box
    xe에서는 exec_xml()함수를 이용하면 쉽게 ajax call 을 사용할 수 있습니다. 사실 exec_xml() 함수를 이용하는 것이 내부 구조상 더 안전할 것이고 또한 "서버에 요청중입니다....
    20120105신고
  • **빵빵코더의 꿈꾸는 작업실
    이번 시간에는 자바스크립트 AJAX - 서버에 요청(request) 보내기에 대해 알아보겠습니다. XMLHttpRequest 객체는 서버와 데이터를 교환하는데 사용됩니다. 서버에 요청...
    20171208신고
  • **웍스(causeworks)
    변경될 수 있는 동적인 UI 구현이 가능해졌습니다. AJAX의 장점 - 페이지 새로고침 없이 서버와 통신 - 서버 처리를 기다리지 않고, 비동기 요청이 가능하다. - 수신하는...
    20190320신고
  • **와 함께하는 스터디 블로그
    XML 또는 XML 문서를 변경하는 데 사용하는 XSLT를 사용함 - 문서의 구조를 나타내며, 주로 폼 등의 정보나 화면 구성을 조작할 때 사용함 3) XML과 XSLT 등을 사용한 데이터의 변경과 조작 - XML은...
    20151027신고
  • **LUMULUS ㅣ SMART MARKETING FOR SMART SOLUTIONS
    AJAX / XMLHttpRequest Asynchronous JavaScript And XML AJAX 를 사용하는 이유/장점 페이지를 새로고침 할 필요 없이, 서버에 외부 데이터를 요청하고(request) 받고(receive)...
    20190318신고
  • ** 세상을 바꾼다
    4 헤더 만들기 –CSS3 와 자바스크립트로 디자인 스타일 정의하기 1.5 헤더 만들기 –CSS 로 디자인... 11 [오탈자 정보] 성공하는 프로그래밍 공부법 : 사람과 프로그래머 #7 (2) 2018.09.03 [오탈자 정보]...
    20190411신고
  • **고 잘살자
    asp Ajax(Asynchronous JavaScript and XML) 비동기적인 웹 어플리케이션 개발이 가능하게 하는 웹 개발 기법이다. 기존에는 항상 서버는 웹 브라우저가 요청하면 웹...
    20180727신고
  • **대전쟁
    변경, 또는 심지어는 타이머와 같은 이벤트를 기반으로 자바 스크립트와 상호작용한다. AJAX... Rich 웹 어플리케이션은 클라이언트가 서버 쪽의 콤포넌트에서 가져온 XML 데이터를 사용하는...
    20060215신고
  • 83%남자
    17%여자
    1%10대
    12%20대
    29%30대
    32%40대
    20%50대
    6%60대
    통계정보는 댓글이 100개 이상 게시중일때 제공됩니다.
댓글 0