Pang's Land

예전에 번역해논 문서... 자체번역이라 오역도 많고 대충 의역해버린 -_-;
어쨌든 Ajax 첫 실습으로는 좋은 듯한..

more..

링크 : http://forum.openrico.org/topic/2228#2539

증상 : Rico Beta를 1.1.2 로 패치하게 되면 FireFox에서 모든 Ajax Function이 안먹는다. :

원인 : Rico 1.1.2와 Prototype 1.5의 Header문제로 보임 :

해결책 : Prototype의 다음 부분을 수정한다.

more..

원문 : http://www.ajaxpro.info/quickguide.aspx

1. Download the latest Ajax.NET Professional files from www.schwarz-interactive.de
2. Add a reference to the AjaxPro.2.dll (for the .NET 1.1 Framework use AjaxPro.dll)
3. Add following lines to your web.config:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
    </httpHandlers>

  [...]

  </system.web>
</configuration>

4. Now, you have to mark your .NET methods with an AjaxMethod attribute:

[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
  return DateTime.Now;
}

5. To use the .NET method on the client-side JavaScript you have to register the methods, this will be done to register a complete class to Ajax.NET:

namespace MyDemo
{
  public class _Default
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }

    [AjaxPro.AjaxMethod]
    public DateTime GetServerTime()
    {
      return DateTime.Now;
    }
  }
}

6. If you start the web page two JavaScript includes are rendered to the HTML source.
   To call a .NET method form the client-side JavaScript code you can use following syntax:

function getServerTime()
{
  MyDemo._Default.GetServerTime(getServerTime_callback);  // asynchronous call
}

// This method will be called after the method has been executed
// and the result has been sent to the client.

function getServerTime_callback(res)
{
  alert(res.value);
}

요번 프로젝트때 만든 롤링리스트...
10초마다 ajax함수를 호출해서...
함수에 요청하는 건데.. 부하가 많이 걸려서 OTL

[aspx]

<UL id=RollListSubList>
<asp:Literal id=ltrMainRssList EnableViewState="False" Runat="server"></asp:Literal>
</UL>
<script language="javascript" type="text/javascript">
   function ReloadRollList(){Ajax.PG.ucRollListNetSub.reloadList(Reload_CallBack);}
   function Reload_CallBack(res){
        if(res != null){
              var divRss = document.getElementById('RollListSubList'); divRss.innerHTML = res.value;}}
   setInterval("ReloadRollList();", 10000);
</script>

[cs]

[AjaxPro.AjaxMethod]
  public string reloadList()
  {
   int temp = 0;
   DataSet ds = RollListNetBiz.GetListAdminRecommand(1,30, out temp);

   if(ds != null)
   {
    DataTable dt = Utility.RollingData(ds.Tables[0], 10);   
    string HTML = string.Empty;
    Random random = new Random();
   
    int boldNum1 = random.Next(0, 4);
    int boldNum2 = random.Next(5, 9);

    for(int i = dt.Rows.Count -1 ; i >= 0 ; i--)
    {
     int RollListID = (int) dt.Rows[i]["RollListID"];
     string Title = dt.Rows[i]["Title"].ToString();
     string Content = dt.Rows[i]["Content"].ToString();
     string Link = dt.Rows[i]["ContentUrl"].ToString();
     string MasterName = dt.Rows[i]["MasterName"].ToString();
     DateTime Date = (DateTime) (dt.Rows[i]["PubDate"]);

     string MasterLink = "./RollListNetMaster.aspx?MasterID=" + RollListID.ToString();

     Title = Utility.RemoveHTML(Title);
     Title = Utility.RemoveHTMLTag(Title);
     Title = Utility.GetTitles(Title, 12);

     if(i == boldNum1 || i == boldNum2)
     {
      Title = Utility.GetTitles(Title, 10);
      HTML  += "<li class='bold'><a href='" + Link + "' target='RollListViewer'>" + Title + "</a></li>";
     }
     else
     {
      Title = Utility.GetTitles(Title, 12);
      HTML  += "<li><a href='" + Link + "' target='RollListViewer'>" + Title + "</a></li>";
     }
    }
    return HTML;
   }
   else
    return null;
  }

1.  Ajax를 사용한 이벤트 처리시에 디자인이 깨지는 거 고려해야 되요~ [2007.01.30]

자.. 무슨 말이냐..
Ajax를 사용해서 이벤트를 처리하고 그 뒷처리까지 깨끗이 했으면!!
분명히 무언가 바꼈을끄에요.
무언가 바꼈으니 레이아웃도 조곰 변경됐을텐데!!
나머지부분은 적용이 안된다는 거~!!
그러니까 리플을 예로 들믄

      1) 리플 삭제 -> Ajax
      2) CallBack 처리 - 삭제 결과값
      3) 리플 리스트 다시 바인딩하고 -> Ajax

여기까지 하면 리플 아래에 있는 Footer 같은 거.
아님 머 이미지 네비 같은거.
아님 글 리스트 같은 건
제자리에 그대로 있다는 거~!!

그러니까 저기서 끈나는게 아니라 변경된 레이아웃까지 다시 잡아줘야 된다는 거..


2. CS단의 Ajax Method에서는 Data값이 남아있지 않아요~ [2007.01.30]
이건 조금 하믄 당근 아는거..

   [cs]

   private int aaa = 1;
   private void Page_Load(object sender, System.EventArgs e)
  {
       AjaxPro.Utility.RegisterTypeForAjax(typeof(Viewer));
     
      // 이렇게 aaa를 cs단에 박아넣어도..
      if(Request.QueryString["aa"] != null
          && Request.QueryString["aa"].ToString() != "")
       this.aaa = int.Parse(Request.QueryString["aa"]);
  }

   [AjaxPro.AjaxMethod]
   public bool Delete(int ID)
  {
        // 불러도 이건 쓰레기값~!!
        return this.aaa;
  }

3. AjaxPro.AjaxMethod는 Overload가 되지 않습니다요~ [2007. 2. 12]

cs단에 아래와 같이 이름이 같고, 파라미터가 다르게 오버로드를 하려고 해도 AjaxPro에서는
함수 Overloading을 지원하지 않기때문에 스크립트에서 정의되지 않은 / 정확한 파라미터가 아니라는 에러가 난다.

    [cs]

    [AjaxPro.AjaxMethod]
    public bool CreateContentReply(int ZMID, int ZMCID, string Name){...}

    [AjaxPro.AjaxMethod]
    public bool CreateContentReply(int ZMID, int ZMCID){...}


    [Html]
    AjaxPro.PG.Viewer.CreateContentReply(ZMID, ZMCID, Name, CallBack_proc);
    AjaxPro.PG.Viewer.CreateContentReply(ZMID, ZMCID, CallBack_proc);   Error

간단하게 아이디체크 구현해보자..
정말 간단.. -ㅁ-;;



 올블로그에서 회원가입시 포스트백 없이 아이디 체크되는 걸.. 보고..
혹해서 만들어봤다..


[aspx]
<script type="text/javascript" src="./lib/prototype/prototype.js"></script>
 <script>
      function AjaxIDCheck(param)
      {
          PG.AjaxBoard.IDCheck.IDChecking(param, IDCheck_CallBack);
      }

      function IDCheck_CallBack(res)
      {
          var check_value = res.value;
   
          if(check_value)
              lblText.innerHTML = "사용하실 수 있는 ID 입니다.";    
          else
              lblText.innerHTML = "이미 등록된 ID 입니다.";    
      }
   
      function IDCheck()
      {
          var param = $('txtID').value;
   
          if(param.trim() == "")
              lblText.innerHTML = "ID를 입력해주세요.";    
          else
              AjaxIDCheck(param);
      }
  </script>
   ...
   <input type="text" ID="txtID" Width="200px" onkeyup="IDCheck()"/>
   <label id="lblText"></label>
   ...

   
[cs]
   private void Page_Load(object sender, System.EventArgs e)
  {
      AjaxPro.Utility.RegisterTypeForAjax(typeof(IDCheck));
  }

   [AjaxPro.AjaxMethod]
   public bool IDChecking(string strID)
   {
      bool check_value = false;

      // DB단 처리
      ...

      return check_value;
   }


생각보다 무지 간단하구나..=ㅁ=;;
올블로그랑 똑같이 하려면 onkeyup 이벤트를 onblur 이벤트로 바꿔주면 된다..