Ajax란

민코·2023년 11월 10일

Ajax란

Asynchronous javascript and xml
(비동기 자바스크립트 그리고 xml)

동기,비동기란

동기는 업무를 웹에서 수행하다 서버에 바통(요청)을 넘긴다 서버에서 바통(응답)을 다시
넘겨 주면 다시 웹에서 업무를 수행한다.

비동기는 바통이 두개다 ㅋㅋ 서버에 요청을 하는데 그러든 말든 웹에서 업무를 이어서 수행한다.

끊김(지연) 없이 작업을 하고싶을때 비동기 방식을 선택한다.

Ajax를 쓰면

지연이 없는 즉 자연스럽게 움직이는 웹을 서비스 하고자 한다면 Ajax를 사용해야 한다.
웹 페이지가 다시 로딩 되지 않아도 원하는 부분을 갱신할 수 있다

JSON이랑 XML형태로 필요한 데이터만 받아 갱신한다.


코드 예시이다(GET,POST,PUT,DELETE)

  • GET: 서버로부터 데이터를 요청하여 가져오는 메소드

  • POST: 서버로 데이터를 전송하여 새로운 데이터를 생성하는 메소드

  • PUT: 서버에 있는 데이터를 업데이트 또는 수정하는 메소드

  • DELETE: 서버에 있는 데이터를 삭제하는 메소드

    URL 주소로 METHOD방식을 수행합니다.
    data는 서버에 전송합니다.

// GET 요청 예시
$.ajax({
  url: "data.json",
  method: "GET",
  success: function(response) {
    // 받아온 데이터를 처리하는 코드
  },
  error: function(error) {
    // 에러 처리하는 코드
  }
});

// POST 요청 예시
$.ajax({
  url: "save.php",
  method: "POST",
  data: {
    name: "John",
    age: 25
  },
  success: function(response) {
    // 응답을 처리하는 코드
  },
  error: function(error) {
    // 에러 처리하는 코드
  }
});

// PUT 요청 예시
$.ajax({
  url: "update.php",
  method: "PUT",
  data: {
    id: 1,
    name: "Jane"
  },
  success: function(response) {
    // 응답을 처리하는 코드
  },
  error: function(error) {
    // 에러 처리하는 코드
  }
});

// DELETE 요청 예시
$.ajax({
  url: "delete.php",
  method: "DELETE",
  data: {
    id: 1
  },
  success: function(response) {
    // 응답을 처리하는 코드
  },
  error: function(error) {
    // 에러 처리하는 코드
  }
});
profile
한 걸음

0개의 댓글