'Ajax' 태그의 글 목록

[Javascript] Ajax.Updater 사용기

JSP 2009. 9. 18. 15:25

Ajax.Request로 하면 oncomplete으로 해당 업데이트 페이지를 연결해주는 함수가 있어야 하지만 Ajax.Updater를 사용하면 업데이트할 영역을 함수 내에 지정해주면 된다.

function handleItem(param, id, total){
  var md = '';
  var li = 'md_cate'+id;

  for(var i=0;i<total;i++){
   md = 'md_cate'+(i+1);
   $(md).removeClassName('sel');
  }
  $(li).addClassName('sel');
  itemAjax(param);
}

function itemAjax(param){
  var url = '처리할 url;
  new Ajax.Updater(
  {success:'md_item_list', failure:'md_item_list'},//출력되는 영역
  url,
  {
   method:'POST',
   parameters: {disp_no:param}
  });
}

저작자표시 비영리 변경금지

Posted by zeide

,

[Ajax] serialize()

JSP 2009. 7. 29. 14:42

Prototype의 serialize()를 사용하여 parameter를 받을 수 있다.

Form.Methods = {
serialize: function(form, options) {
    return Form.serializeElements(Form.getElements(form), options);
},

getElements: function(form) {
    return $A($(form).getElementsByTagName('*')).inject([],
      function(elements, child) {
        if (Form.Element.Serializers[child.tagName.toLowerCase()])
          elements.push(Element.extend(child));
        return elements;
      }
    );
},
...
}

option에 대해 true를 지정하면
return은 object가 되며 그렇지 않으면
return은 array가 된다.

parameters: $('commentForm').serialize(true),
...
에서 commentForm 안에 있는 parameter는 object로 return.

Ajax request에서 parameter를 전송할 때 적절하다.

저작자표시 비영리 변경금지

Posted by zeide

,

[Ajax] Ajax.request

JSP 2009. 7. 28. 11:03

Prototype을 사용한 Ajax

window.onload = handleEvent;

function handleEvent() {
    $('comment').observe('click',replyValidate);//success
    $('commentForm').observe('submit',submitReply);//success...but....
}

function submitReply(event) { //fail
    var url = '/comment.do';

    new Ajax.Request(
        url,
        {//ajax.option
            parameters: $('commentForm').serialize(true),//transport parameter
            //ajax.callback
            onSuccess: function(transport){
            $('comment_load_area').innerHTML = transport.responseText;
            },
            onFailure: function() {
            alert("전송에 실패하였습니다.");
            }
        }
        );//Ajax.Request
    Event.stop(event);//리소스 전송 차단
}

안된다.

대충 감이 온다.

왜 안되는지를...

저작자표시 비영리 변경금지

Posted by zeide

,

[Ajax] XMLHttpRequest

JSP 2009. 2. 18. 15:44

XMLHttpRequest를 사용한 Ajax 프로그램은 다음과 같이 세 과정을 거치게 된다.
1. XMLHttpRequest 객체 구하기
2. 웹 서버에 요청 전송하기
3. 웹 서버에서 응답이 도착하면 화면에 반영하기

Création d'un objet XMLHttpRequest

function createXhrObject()
{
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();

    if (window.ActiveXObject)
    {
        var names = [
            "Msxml2.XMLHTTP.6.0",
            "Msxml2.XMLHTTP.3.0",
            "Msxml2.XMLHTTP",
            "Microsoft.XMLHTTP"
        ];
        for(var i in names)
        {
            try{ return new ActiveXObject(names[i]); }
            catch(e){}
        }
    }
    window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
    return null; // non supporté
}
xhr = createXhrObject();

Récursivité
La récursivité n'est pas assurée. Ainsi du code javascript présent dans la page chargée via XMLHttpRequest ne sera pas exécuté. Il faut extraire le code javascript depuis la page mère afin de l'exécuter.
Le code suivant exécute le javascript présent entre des balises <script></script> dans la page fille, après l'avoir chargé comme décrit précédemment

if (XHR.readyState == 4)
{       document.getElementById('contenu').innerHTML = XHR.responseText;
      var js = document.getElementById('contenu').getElementsByTagName('script');
      for( var i in js )
         {
        eval(js[i].text);
         }
}

from wikipedia