AJAX(1)

AJAX (Asynchronous JavaScript and XML)

• 페이지 전체를 로딩하지 않고 서버에 있는 데이터를 가져와서 페이지 일부분만 바꿀수 있다
• 문자단위로 통신(비동기 방식)
• 한개의 페이지에서 요청과 응답이 동시에 이루어짐
  • JavaScript : XMLHttpRequest 객체 이용
  • jQuery : $.ajax()함수 이용

$.ajax('actors.json', { //서버에 'actors.json' 파일의 데이터 요청하기
    dataType: 'json', //응답 데이터타입 지정 → 지정하지 않으면 txt타입으로 자동지정됨
    success: function(data, status, xhr){
        alert('SUCCESS')
        alert(data) //요청에대한 서버의 응답 객체(배열 형태)
        alert(status) //응답상황
        alert(xhr) //XMLHttpRequest 객체
    },
		error: (xhr, status, error)=>{
        alert('ERROR')
        alert(xhr) //XMLHttpRequest 객체
        alert(status) //응답상황
        alert(error) //Not Found
    },
})

 

JSON데이터 받아오기

for문 사용하기

$.ajax(
    'sungjuks.json', { //서버에 데이터 요청
        dataType: 'json', //응답 데이터타입 지정
        error: (error)=>{
            alert('ERROR' + error)
        },
        success: (result)=>{ //응답받은 객체
            let size = result.length
            let str = "<table border='1'>"
					  for(let i=0; i<size; i++) {
                str += "<tr>"
                str += "  <td>" + result[i].name + "</td>"
                str += "  <td>" + result[i].id + "</td>"
                str += "  <td>" + result[i].kor + "</td>"
                str += "  <td>" + result[i].eng + "</td>"
                str += "  <td>" + result[i].mat + "</td>"
                str += "</tr>"
            }
            str += "</table>"
            $('#panel').append(str)
        }
    })

 

jQuery의 each() 함수 사용하기

$.ajax(
    'sungjuks.json', { //서버에 데이터 요청
        dataType: 'json', //응답 데이터타입 지정
        error: (error)=>{
            alert('ERROR' + error)
        },
        success: (result)=>{ //응답받은 객체
            let str = "<table border='1'>"
            $.each(result, (idx, data)=>{ //jquery의 each문을 사용해 데이터출력
                str += "<tr>"
                str += "  <td>" + data.name + "</td>"
                str += "  <td>" + data.id + "</td>"
                str += "  <td>" + data.kor + "</td>"
                str += "  <td>" + data.eng + "</td>"
                str += "  <td>" + data.mat + "</td>"
                str += "</tr>"
            })
            str += "</table>"
            $('#panel').append(str)
        }
    })

 

$.each()함수 사용방법

$.each( array, callback ); //방법1
$.each( object, callback ); //방법2
$(selector).(callback); //방법3