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. 뜨거운토
    2022.4.29 18:29 끝
    jQuery
  2. labis98
    20210925 좋은 강의 감사합니다.
  3. tara
    감사합니다
  4. daeung
    data:{'msg':$('#msg').val()}, 에서
    data:{msg:$('#msg').val()}, 로 변경하니 잘 찍히네요.
  5. 허공
    감사합니다!
  6. 굼벵이
    완료
  7. Song Hae
    예제 1-2 서버쪽 로직을 html 과 같은 폴더에 example.jquery.ajax.php 이 이름으로 저장하고

    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php' 를
    url:'example.jquery.ajax.php'로 저장하면 해당 문제는 해결됩니다.

    저는 님 문제는 해결했는데 콘솔에
    jquery-latest.js:9631 Access to XMLHttpRequest at 'file:///C:/Users/IBK/Documents/Tab++/opentutorial/jquery/example.jquery.ajax.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    라는 문제가 뜨네요 .. 후
    대화보기
    • ericpark
      jquery-latest.js:9631 POST http://opentutorials.org......php 404 (Not Found)
      위 URL에 파일이 없는 것 같습니다.
    • Yoon Joon Lee
      http://opentutorials.org......php 가 작동하지 않습니다.
    • 웅이
      답변 감사합니다 ! 복받으실거에요 !
      대화보기
      • 기영
        A1. '이름:값' 형태에서 :는 이름과 값을 구분해주기 위한 것입니다.
        A2. 이해하신 대로 $('#msg') 객체의 값(val(). 웅이 님이 작성하신 텍스트가 이 값에 들어갑니다)에 이름(msg)를 붙여준 것입니다. 임의의 이름으로 변경 가능합니다. 다만 만약 abc라는 이름으로 변경하신다면, 서버쪽(php파일)에도 abc로 바꿔주셔야 해요.
        대화보기
        • 웅이
          서버쪽은 어떻게하는건지 설명이 없어서 도통모르겠습니다 ㅠㅠ
          .php파일을 만들고 예제1-2를 넣기만하는것말고 다른게 필요한거같은데..
        • 웅이
          예제1의 17행)
          data:{'msg':$('#msg').val()}, 이 통째로 이해가 가질 않습니다.
          Q1.속성들이 '이름:값' 의 형태를 가진다는것은 알겠는데, data의 값안에서 쓰이는 ':'의 목적이 무엇인지 모르겠습니다.
          Q2. data의 값안에 보면 msg도 있고 '#msg'도 있어요.
          #msg는 id값이 msg인 input 엘리먼트이고, 첫번째 msg가 객체의 이름이라고 설명하셨는데,
          $('#msg').val()의 이름이라고 이해하면 되나요? 만약 그렇다면 꼭 msg라는 문자열은 임의로 사용한것인가요?
        • 삼고잉
          웹브라우저에서 웹서버로 보내려는 data와 data를 전송하기위한 타입인 type, 서버로부터 받는 타입을 정의한datatype, 보내고자하는 웹서버의 주소인 url, 웹서버와의 성공적인 통신이 이뤄졌을때 들어오는 웹서버로부터의 반환값인 success의 result로 구성돼 있군요
        • Dominic Lee
          Node와 Mysql 그리고 Ajax까지 생코 페이지에서 배워서 https://github.com......음 개인 페이지를 만들기 위해 준비중입니다 ㅠㅠ

          정말감사합니다 너무 많은걸 배워갑니다!
        • Hyun Woo Lee
          Ajax의 문을 두드렸네요!
          이제 WEB3-Ajax로 넘어갑니다.
        • 삼바삼바
          생활코딩은 정말 단비같은 존재입니다~ 궁금한 내용을 유투브에 치면 그게 꼭있어요 정말 감사합니다
        • 코딩잘하고싶어요 ㅎ
          감사합니다. 조금 어렵긴 했지만 그래도 잘 설명해주셔서 잘 따라갈 수 있었습니다.
        • 개발자가 되고싶은 고등학생
          js에 이어 jQuery까지 완주하게됬습니다. 여기서 멈추고 이제 배운 것으로 코딩을 해봐야겠지요?
          페이지를 하나 만들어오겠습니다! 감사합니다.
        • sheis
          잘 봤어요^^
        • 바다맘
          감사합니다.
        • 1561
          026062
        • crable
          감사합니다.
        • 최형묵
          안녕하세요. 강의 잘 보았습니다.

          만드시느라 고생 많으셨습니다.

          앞으로 좋은 일 많으시길 진심으로 빕니다.
        • 기성이대디
          이고잉님, 오늘 처음으로 글 남깁니다.
          질문만 하는 곳인 줄 알기에 가급적 글을 안남기려고 했는데,

          ajax라는 것을 이렇게 짧은 강의만으로 시원하게 이해된 게
          정말 감격스럽고 또 너무 감사해서 갑자기 인사를 드리고 싶었습니다.

          어디 사는 누구이신지는 알 길이 없지만,
          항상 건강하시고 행복하세요~
          그리고, 기회가 되신다면 다른 강의도 계속해서 새로 만들어주시면 감사하겠습니다~

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

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

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

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

          그리고 이고잉님 너무 감사합니다. 웹, 서버, 데이터베이스까지 광대한 양 강의라서 진짜 괴물같네요.
        • basicb
          html, css, js, jQuery 일단은 한 바퀴 다 돌아서 큰 그림을 그리는게 중요한 것 같아 쭉 들어봤네요 ㅎㅎ 구체적으로 작업 해보면서 부족한 부분 있으면 계속 공부 해야겠죠 ㅎㅎ
        • SK Kim
          완료, 도장 쾅!
        • terminater
          보던 책 집어 던지고 3개월째 이곳에만 집중하고 있어요!
        • terminater
          프로그래머 홈스쿨~~~! 너무 감사 드려요! 교재가 불필요~~~!
        • 유기농브래드
          강의 잘 봤습니다. 감사합니다.
        • 참빛바다
          서버쪽 로직 첫째줄 <? 를 <?php 로 바꿔줘야 작동되는 서버가 있습니다.
          기본 옵션을 바꿔주지 않았을 경우 입니다.
        • 질샌더
          현재 아무 반응없는게 정상이죠?
        • 지나가던사람
          외부변수에 대입하면 되지 않을까합니다~
          대화보기
          • 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@gmail.com
              현재 버전
              선택 버전
              graphittie 자세히 보기