반응형
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
반응형
'Front-End > JavaScript' 카테고리의 다른 글
jQuery 실습 - 아날로그 시계 만들기 (0) | 2023.03.31 |
---|---|
jQuery(2) (0) | 2023.03.30 |
jQuery(1) (0) | 2023.03.29 |
댓글