JavaScript(Ajax, Array 자료)

■ Ajax

Ajax란?

Ajax는 웹 페이지에서 데이터를 비동기적으로 서버와 교환하기 위한 기술입니다.

이 때 서버는 웹 애플리케이션의 백엔드에 위치한 컴퓨터나 시스템을 가리키며 서버는 클라이언트(일반적으로 웹 브라우저)의 요청에 응답하는 역할을 담당합니다.

 

Ajax를 사용할 때, 웹 페이지의 클라이언트 측에서 비동기 요청을 보내면 서버는 해당 요청을 처리하고 필요한 데이터를 반환합니다. 이를 통해 웹 페이지는 페이지 전체를 새로고침하지 않고도 동적으로 데이터를 로드하거나 업데이트할 수 있게 됩니다.

 

서버는 다양한 역할을 수행할 수 있으며, 주로 데이터베이스와 상호작용하거나 비즈니스 로직을 실행하는 등의 작업을 처리합니다.

예를 들어, 사용자의 로그인 정보를 검증하거나 데이터를 조회하고 업데이트하는 작업을 서버에서 처리할 수 있습니다.

이러한 서버는 웹 애플리케이션의 백엔드 로직을 담당하여 클라이언트에 필요한 데이터를 제공하고 처리하는 역할을 수행합니다.

 

 

Ajax 요청하기

$.get('데이터를 받아올 사이트 주소');
$.post('데이터를 보낼 사이트 주소');

get 요청은 서버에 있던 데이터를 읽고 싶을 때 주로 사용하고, post 요청은 서버로 데이터를 보내고 싶을 때 사용합니다.

 

$.get('데이터 받아올 사이트 주소').done(function(data){
  console.log(data)
});

get 함수 뒤에 .done을 붙이고 콜백함수를 쓴 뒤 파라미터를 넣습니다.

그러면 파라미터 안에 받아온 데이터가 들어갑니다.

 

$.post('데이터를 보낼 사이트 주소', {price : 30000})

서버에 데이터를 보내고 싶을 때는 { } 중괄호를 사용합니다.

 

$.get('데이터를 보낼 사이트 주소')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패했습니다')
  });

뒤에 .fail 을 붙이면 ajax 요청이 실패했을 때의 코드를 실행해줍니다.

 

$(document).ready(function() {
  // 버튼 클릭 시 Ajax 요청 보내기
  $('#myButton').click(function() {
    $.ajax({
      url: '서버 URL',
      method: 'GET', // 또는 'POST'
      dataType: 'json', // 받아올 데이터의 타입, 필요에 따라 변경 가능
      success: function(response) {
        // Ajax 요청이 성공한 경우 호출되는 콜백 함수
        console.log(response); // 응답 데이터 처리
      },
      error: function(xhr, status, error) {
        // Ajax 요청이 실패한 경우 호출되는 콜백 함수
        console.error(error); // 오류 처리
      }
    });
  });
});

위와 같은 방식으로 ajax 를 요청하는 방법도 있습니다.

 

 

■ array 자료

sort()

var 배열 = ['c', 'd', 'e', 'b', 'a'];
배열.sort();
console.log(배열);
// ['a', 'b', 'c', 'd', 'e'];

sort() 함수는 문자를 가나다 순으로 정렬시켜줍니다.

 

다만, 숫자도 문자순으로 정렬시켜주기 때문에 아래와 같은 문제가 생깁니다.

var 배열 = [1, 3, 5, 12, 42];
배열.sort();
console.log(배열);
// [1, 12, 3, 42, 5]

12나 42의 앞자리가 1과 4이기 때문에 숫자순 정렬이 아닌 문자순 정렬이 되어버립니다.

 

그러면 숫자순 정렬은 어떻게 할 수 있을까요?

var 배열 = [1, 3, 5, 12, 42];
배열.sort(function(a, b){
  return a - b
});
console.log(배열);
// [1, 3, 5, 12, 42]

sort 함수를 위와같이 쓰면 숫자순으로 정렬되는 것을 볼 수 있습니다.

 

과정을 조금 더 자세히 살펴보겠습니다.

var 배열 = [1, 3, 5, 12, 42];
배열.sort(function (a, b) {
  console.log(a, b);
  return a - b;
});
// 3 1 -> [1,3]
// 5 3 -> [1,3,5]
// 12 5 -> [1,3,5,12]
// 42 12 -> [1,3,5,12,42]

return 값이 양수일 때는 a를 배열의 오른쪽에 정렬하고, 음수일 때는 b를 배열의 오른쪽에 정렬합니다.

그리고 계속해서 배열의 자료들을 뽑아서 a 와 b 자리에 넣어 숫자순 정렬을 시켜줍니다.

 

 

filter()

var 배열 = [7,3,5,2,40];

var 새배열 = 배열.filter(function(a){
  return a < 4
});

filter는 말그대로 자료를 필터링하여 자료를 정렬시켜줍니다.

filter는 sort와 다르게 원본 자료를 변형시키지 않기 때문에 새로운 변수에 자료를 저장해줘야 합니다.

 

 

map()

var 배열 = [7,3,5,2,40];

var 새배열 = 배열.map(function(a){
  return a * 4
});
// [28, 12, 20, 8, 160]

map 함수를 사용하면 배열 안의 자료들을 한번에 변형시키는 것이 가능합니다.