ajax 형태

  <div id="box1">
    <button id="btn1">XML요청1</button>
  </div>
  <script>
    $('#btn1').click(function(){
      $.ajax({
        /* 요청 */
        type: 'get',          // RequestMethod : get 또는 post
        url: 'product1.xml',  // 요청 URL (서버 경로 작성)
        async: true,          // 비동기 통신(디폴트, 생략 가능)
        /* 응답 */
        dataType: 'xml',             // 응답 데이터의 타입(text, xml, json 등)
        success: function(resData){  // 매개변수 resData로 응답 데이터가 전달됨 (resData = xhr.responseXML 또는 resData = xhr.responseText)
          // 기존 목록 제거하기
          $('#box1').find('ul').remove();
          // resData에서 <product> 태그만 가져오기
          var product = $(resData).find('product');  // JavaScript는 var product = resData.getElementsByTagName('product');
          $.each(product, function(i, elem){
            // <ul> 태그를 jQuery 객체로 생성
            var ul = $('<ul>');
            // <ul> 태그에 <li> 태그 만들어 넣기
            ul.append($('<li>').text($(elem).find('model').text()));
            ul.append($('<li>').text($(elem).find('maker').text()));
            ul.append($('<li>').text($(elem).find('price').text()));
            // <div id="box1">에 <ul> 태그 넣기
            $('#box1').append(ul);
          })
        },
        error: function(jqXHR){  // jqXHR 객체 : 에러에 관한 정보를 담고 있는 객체
          // <div id="box1"> 태그를 jQuery 객체로 가져옴
          var box1 = $('#box1');
          box1.append($('<div>').text('응답코드 ' + jqXHR.status));
          box1.append($('<div>').text('응답코드 텍스트 ' + jqXHR.statusText));
          box1.append($('<div>').text('응답 텍스트 ' + jqXHR.responseText));
        }
      })
    })
  </script>

ajax는 key와 value 형태를 띈다.
통신이 성공하면 success에 적혀있는 함수가 실행되고 실패하면 error에 적혀있는 함수가 실행된다

성공시

실패시