이것은 무엇을, 본질에서, AJAX가 있다 위해 . 페이지가로드되고 요소에 이벤트를 추가합니다. 사용자가 무언가를 클릭하여 이벤트를 트리거하면 Javascript는 XMLHttpRequest 객체 를 사용하여 서버에 요청을 보냅니다.

서버가 (아마도 출력으로) 응답 한 후, 다른 자바 스크립트 함수 / 이벤트는 다른 HTML과 마찬가지로 페이지에 단순히 붙이는 것을 포함하여 해당 출력으로 작업 할 수있는 장소를 제공합니다.

일반 자바 스크립트를 사용하여 “수작업으로”수행하거나 jQuery를 사용할 수 있습니다. 프로젝트의 크기와 특정 상황에 따라 일반 자바 스크립트를 사용하는 것이 더 간단 할 수 있습니다.

일반 자바 스크립트

이 매우 기본적인 예에서는 myAjax.php사용자가 링크를 클릭 할 때로 요청을 보냅니다 . 서버는 일부 콘텐츠,이 경우 “hello world!”를 생성합니다. 우리는 id로 HTML 요소에 넣을 것 output입니다.

자바 스크립트

// handles the click event for link 1, sends the query
function getOutput() {
  getRequest(
      'myAjax.php', // URL for the PHP file
       drawOutput,  // handle successful request
       drawError    // handle error
  );
  return false;
}
// handles drawing an error message
function drawError() {
    var container = document.getElementById('output');
    container.innerHTML = 'Bummer: there was an error!';
}
// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('output');
    container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ?
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}

HTML

<a href="#" onclick="return getOutput();"> test </a>
<div id="output">waiting for action</div>

PHP

// file myAjax.php
<?php
  echo 'hello world!';
?>

시도해보세요 : http://jsfiddle.net/GRMule/m8CTk/

---

자바 스크립트 라이브러리 사용 (jQuery 외)

틀림없이 많은 자바 스크립트 코드입니다. 물론 블록을 조이거나 더 간결한 논리 연산자를 사용하여 단축 할 수 있지만 여전히 많은 일이 진행되고 있습니다. 프로젝트에서 이러한 유형의 작업을 많이 할 계획이라면 자바 스크립트 라이브러리를 사용하는 것이 더 나을 수 있습니다.

위와 동일한 HTML 및 PHP를 사용하여 전체 스크립트입니다 (페이지에 jQuery 포함). jQuery의 일반적인 스타일과 일관성을 유지하기 위해 코드를 약간 강화했지만 아이디어를 얻었습니다.

// handles the click event, sends the query
function getOutput() {
   $.ajax({
      url:'myAjax.php',
      complete: function (response) {
          $('#output').html(response.responseText);
      },
      error: function () {
          $('#output').html('Bummer: there was an error!');
      }
  });
  return false;
}

사용해보세요 : http://jsfiddle.net/GRMule/WQXXT/

아직 jQuery를 서두르지 마십시오. 라이브러리를 추가하는 것은 마치 작성한 것처럼 확실히 프로젝트에 수백 또는 수천 줄의 코드를 추가하는 것입니다. jQuery 라이브러리 파일 내에서 첫 번째 예제와 유사한 코드와 훨씬 더 많은 . 그것은 좋은 것일 수도 있고 아닐 수도 있습니다. 프로젝트의 현재 크기와 향후 확장 가능성 및 대상 환경 또는 플랫폼을 계획하고 고려합니다.

이것이 당신이해야 할 전부라면, 평범한 자바 스크립트를 한 번 작성하면 완료됩니다.

선적 서류 비치

• MDN의 AJAX – https: //developer.mozilla.org/en/ajax
• XMLHttpRequestMDN- https: //developer.mozilla.org/en/XMLHttpRequest
• XMLHttpRequestMSDN-http: //msdn.microsoft.com/en-us/library/ie/ms535874%28v=vs.85%29.aspx
• jQuery- http : //jquery.com/download/
• jQuery.ajax-http : //api.jquery.com/jQuery.ajax/