[질문] AJAX 그리고 TABLE

angpang27의 이미지

첨부된 파일처럼 단순히 insert,delete,update,modify 기능을 구현하려합니다.

AJAX(based on Prototype) 사용해서 구현하는중이고요,

////////////////////////////////////////////////////////////////////

var a = {name : name_val, title : title_val, dept : dept_val, content : content_val , mode : mode };
var h = $H(a);

var myAjax = new Ajax.Request(
url,
{
method: 'get',
parameters: h,
onComplete: table_rendering()
onFaliure: function(request){
alert(request.responseText);
}
});
}

//////////////////////////////////////////////////////////////////////

이런식으로 서버쪽에선 YES,NO만 반환해주게끔하고 SCRIPT안에서
div 나 span으로 TABLE을 그리려고 합니다.

(물론 첫페이지 로딩시에는 DB에 다녀와야겠죠.)

일단 빠르긴 할꺼 같은데, 문제되는 것들이 없을까요??????
(고수님들의 많은 의견 부탁해요.)

그리고 보통 AJAX로 table구현할때 어떤식으로들 하시는지,
댓글좀 마니좀 다뤄주셧으면 합니다.

File attachments: 
첨부파일 크기
Image icon 4-18-jinoxst.jpg46.6 KB
hongminhee의 이미지

보통은 서버 쪽에서 그릴 HTML 까지 다 출력해주고, 그걸 그대로 받아와서 innerHTML로 박습니다. 근데 innerHTML이 표준은 아니구요. 재미있는 것은 직접 엘리먼트 객체 생성해서 일일히 만드는 것보다 innerHTML이 속도는 더 빠릅니다. 이건 구현 문제이지만요. Prototype에서도 Ajax.Updater를 쓰면 쉽게 가능합니다.

서버 쪽에서 그냥 순수한 데이터만을 보내주고, JavaScript로 HTML 렌더링까지 다 하려면 script.aculo.us의 Builder를 쓰는 것도 좋을 듯.

angpang27의 이미지

Updater로 대부분해결 됐습니다.
한가지 덧붙일점은 AJAX로 테이블 구현시 CRUD(Create-Read-Update-Delete) 중에서
Create, Update, Delete는 비교할수 없을만큼 빠르더군요..

헌데 Read즉 데이터 쿼리부분은 일반적인 JSP Viewer단에서 Bean객체불러와서 뿌려주는것과
AJAX로 렌더링하는것을 비교해봤는데,
기존방식이 훨씬 낳더군요..(Timer 체크해봤습니다.)

기존방식에선 Create, Update, Delete 는 수행을 마치고 DB에서
전체 쿼리 한번 더해와야하니깐 퍼포먼스가 안나고,
AJAX는 상태값 200만 받아와서 수행한 레코드만 살짝 추가해주면되니깐 그런듯합니다.ㅎㅎ

다들 아시는 사실이겠지만, 입문하시는분들을 위해 몇글자 적어 보았습니다.
그럼 오늘도 수고들하세요!!

고통이 지천에 있다한들 어이해 멈출수있더냐

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.