jQuery 수업

ajax

ajax란?

  • Asynchronous JavaScript and XML 의 약자
  • 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
  • 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
  • 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.

선행지식

$.ajax(settings)

  • jQuery를 이용한 ajax통신의 가장 기본적인 API
  • 주요속성
    • data : 서버에 전송할 데이터, key/value 형식의 객체
    • dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
    • type : 서버로 전송하는 데이터의 타입 (POST, GET)
    • url : 데이터를 전송할 URL
    • success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

예제1-1. 웹페이지

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="result"></div>
        <input type="text" id="msg" />
        <input type="button" value="get result" id="getResult" />
        <script>
            $('#getResult').click( function() {
                $('#result').html('');
                $.ajax({
                    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
                    dataType:'json',
                    type:'POST',
                    data:{'msg':$('#msg').val()},
                    success:function(result){
                        if(result['result']==true){
                          $('#result').html(result['msg']);
                        }
                    }
                });
            })
        </script>
    </body>
</html>

예제 1-2. 서버 쪽 로직

<?
echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));
?>

 

댓글

댓글 본문
작성자
비밀번호
  1. ecoming
    참빛바다님 감사합니다.
    왜 작동 안하는가 했더니 참빛바다님 말씀대로 <? 를 <?php 로 바꿨더니 작동하네요.
    기본설정을 어떻게 바꿔야 되는지는 모르겠지만... 이걸 몰라가지고 한참을 ..흑

    ... 이번에 php.ini 에서 short_open_tag = Off 를 on 으로 바꿔서 하니까 드디어 <? 만 해도 되네요.
    근데 바꾸고 나서도 안되가지고 또 한참 해맸는데 바꾸고 나서 apache 다시 시작 하니까 되네요.
  2. tachyon
    감사합니다!
  3. 오요셉
    서버쪽 php 파일에
    header('Access-Control-Allow-Origin: *');
    이 소스를 추가해야 실행이 되네요

    소스내용은 구글링 하시면 나옵니다~
  4. 김완호
    코드를 똑같이 썻는데 실행이 안됩니다.
    url을http:// localhost/time3.php 이런식으로 넘겻는데 이게 원인인가요???????
  5. JustStudy
    고맙습니다
  6. 맨끝부분
    끝부분에 인덱스가 아닌 문자열 이름인데 배열이라 하시길래 찾아보니 서버쪽 php 문법이네요.
    클라이언트 부분에서 제이슨으로 해석하여 객체로 만드는 것으로 해석하면 되겠네요.

    참고로 자바스크립트웹 부분에 통합된 부분이 jQuery 최신 부분 같네요.
    그것 들으신 분들은 이 강의에선 선택자부분이 좀더 상세하고 새로운 애니메이션 부분만 보면 될 듯합니다.

    그리고 이고잉님 너무 감사합니다. 웹, 서버, 데이터베이스까지 광대한 양 강의라서 진짜 괴물같네요.
  7. basicb
    html, css, js, jQuery 일단은 한 바퀴 다 돌아서 큰 그림을 그리는게 중요한 것 같아 쭉 들어봤네요 ㅎㅎ 구체적으로 작업 해보면서 부족한 부분 있으면 계속 공부 해야겠죠 ㅎㅎ
  8. SK Kim
    완료, 도장 쾅!
  9. terminater
    보던 책 집어 던지고 3개월째 이곳에만 집중하고 있어요!
  10. terminater
    프로그래머 홈스쿨~~~! 너무 감사 드려요! 교재가 불필요~~~!
  11. 유기농브래드
    강의 잘 봤습니다. 감사합니다.
  12. 참빛바다
    서버쪽 로직 첫째줄 <? 를 <?php 로 바꿔줘야 작동되는 서버가 있습니다.
    기본 옵션을 바꿔주지 않았을 경우 입니다.
  13. 질샌더
    현재 아무 반응없는게 정상이죠?
  14. 지나가던사람
    외부변수에 대입하면 되지 않을까합니다~
    대화보기
    • Youngmin Kweon
      한가지 궁금한게요..
      ajax를 이용해서 서버의 data를 가져왔을 때(배열 형식으로)
      이 값을 ajax 함수 안에서만 적용이 가능한 건가요?? ajax 함수 밖의로 data 를 가져올 수는 없는 건지요??
    • Youngmin Kweon
      강의 정말 감사드립니다.
    • 김씨
      이거슨 진리!!
    • 서진리
      사랑해
    • 김진리
      사랑해
    • Brain
      생활코딩은 나에게 있어 은인이다.
    • 김승갑
      강의 감사합니다. jquery 전반적으로 어떻게 구성되는지 알게 된거같아 좋네요. 어떤식으로 공부해야 할지 감잡은거 같습니다.^^
    • egoing
      수정했습니다. 서버 클라이언트 관계는 지금은 컨텐츠가 없어서 삭제했어요.
      알려주셔서 고맙습니다.
      대화보기
      • 하하호호
        선행지식 링크가 깨진거 같네요ㅠ
        확인 부탁드려요!ㅠ
      • pwrlove
        책에도 </body> 태그 바로 위에 이걸 넣어햐 한다고 되어 있던데...

        아래의 선언을 footer 쪽에 있던걸 맨위로 올렸는데 되는 군요.

        <script src="http://code.jquery.com/jquery-latest.js"></script>

        그렇다면, foot에 넣어도 되는 경우가 있나요?
        그리고 여러군데 중복으로 넣어도 되나요?
      • pwrlove
        egoing 님 존경하고 감사합니다.
        그리고 대단하십니다. (^__^;)

        많은 도움이 되고 있습니다.

        이 문제는 jquery 어떤 버전을 사용하던지 상관없이 이벤트만 동작을 하지 않네요.
        egoing님 강의대로 코드이그나이터 2.1.4 + bootstrap + jquery

        강의대로 footer view 쪽에 아래와 같이 설정을 해 뒀는데
        jquery-latest로 쓰다가 최신버전에서 발생하는 문제인가 싶어서 바꿨습니다.

        <script src="/static/lib/jquery/js/1.10.2/jquery.min.js"></script>
        <script src="/static/lib/jquery/js/jquery.form.min.js"></script>

        <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
        <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>

        그런데, 간단한 페이지의 예제를 사용해도 전혀 이벤트가 호출이 되지 않습니다.
        그래서 아래의 태크 이벤트 방식으로 연결은 하고 있지만, 이유는 알고 싶어집니다.
        구글링 해봐도 이런 내용은 딱히 없는 것 같은데... 뭐가 문제일까요?

        Somebody help me pls...
        대화보기
        • egoing
          아직 jQuery가 로딩되기 전에 jQuery를 사용해서 그럴 수 있습니다.
          아래의 링크를 한번 참고해보셔요.
          https://api.jquery.com/on/
          대화보기
          • pwrlove
            위의 예제를 참고해서 코드이그나이트 예제의 한 페이지에 넣었는데...

            아래의 경우는 안되고,
            <input type="button" value="get result" id="getResult" />
            $('#getResult').click( function() {

            이 경우는 되는데, 이유가 뭘까요?
            <input type="button" value="get result" id="getResult" onclick="check()" />
            function check(){

            설정에 문제가 있어서 그런건가요?
          • 포스만빵
            완전 시세계네요 . 거참..
          • winters
            좋은 강의 감사드립니다. 옛날 기억 더듬으며 자바스크립트로 뭘 좀 짜야할게 있었는데, 덕분에 큰 도움이 되었습니다.
          • 정보문
            보안인증서 오류가 있다고 하면서 동영상 재생이 안 되네요. 신뢰사이트에 등록하고 보안을 최소화해도 그래요
          • zidell
            좋은 강의 감사드립니다. AJAX를 이용한 CRUD 연습용 사이트(http://opendb.gitools.net)를 이용하시면, jQuery만을 가지고 간단하게 TODO 리스트도 실습해볼 수 있습니다.
          • bluesky
            jQuery란 이름만으로 개인적으로 데이터베이스와 통신에 쓰이는 인터페이스 모듈인 줄 알았는데 대단한 착각을 했었군요. 강의를 통해 바르게 이해하게 되었읍니다. 감사합니다.
          • 현영배
            선행 지식 링크가 끊겨 있습니다. ^^
          • 바다로
            강의 정말 잘봤습니다.덕분에 평소에 궁금하던 jQuery에 대해서 어느정도 개념을 잡은 것 같습니다.감사합니다~
          • Sfnogari
            그 조만간이 기대되네요^^지금은 배운거 써보는 중이네요~강의 항상 기대하고 있습니다 화이팅이에요~
            대화보기
            • egoing
              가능합니다. ajax로 데이터를 등록하고, 성공한 것을 확인하면 .html()이나 .append()와 같은 수단을 이용해서 사용자가 입력한 데이터를 삽입해주시면 됩니다.
              ui강의는 조만간에 생활디자인이라는 수업이 시작될껀데, 거기서 다루지 않을까 싶어요.
              대화보기
              • Sfnogari
                강의 정말 좋네요^^ 도움이 많이 되고 있습니다.ajax강의를 이곳적곳에서 보고, 제가 생각하는 기능이랑 어울릴꺼 같은데 거기에대한 답이 없내요..음 방명록을 생성시 작성한 내용을 php파일을 이용해서 데이터베이스로 올리고 그걸 다시 페이지 리로딩없이 , ajax를 이용해서 보여주고 싶은데 가능할까요?프로그램적으로 다른 기능이 있겠지만 프로그래머가 아니라서;; 아이프래임으로 가능하긴 하겠는데.. 이걸로 가능한 방법이 있나 궁금해서요^^혹시 ui에 대해 강의는 안하시는지 궁금하네요강의 고맙습니다~
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기