jQuery를 사용한 네트워킹

9.1 jQuery의 $ 객체 및 ajax 메서드

jQuery에는 네트워크 작업을 위한 특수 전역 개체도 있습니다. 짐작할 수 있듯이 $. 예, 그 이름입니다. 하지만 간단하고 편리합니다.

JavaScript에서 API에 요청을 보내고 수신된 응답을 처리한다고 가정해 보겠습니다. 이것은 다음과 같이 할 수 있습니다:

$.ajax({
  type: "POST",
  url: "api.codegym.cc",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

그게 다야, 그게 모든 코드야. 우리는 요청과 응답 모두 필요한 모든 것을 설명하는 객체를 전달하는 객체의 $메서드를 호출합니다 .ajax()

• 이 필드는 typeHTTP 요청 유형을 지정합니다. GET또는POST
• 이 필드는 요청을 보낼 대상을 url지정합니다 .url
• 이 필드는 dataJSON 형식의 요청 데이터를 지정합니다.
• success 필드는 서버로부터 성공적인 응답 후 호출될 함수를 지정합니다 .

9.2 유용한 쿼리

그러나 데이터를 전송할 필요가 없는 경우 요청을 더 짧게 작성할 수 있습니다. 예를 들어 다음과 같은 간단한 POST 요청을 작성할 수 있습니다 .

$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

코드가 무엇을 하는지 아십니까 $( ".result" ).html( data );? 추측해 봅시다...

문서에서 결과 클래스가 있는 요소를 찾고 그 안에 HTML 코드인 data 를 추가합니다 data. 따라서 몇 줄 만에 서버에서 데이터를 다운로드하여 페이지에 추가할 수 있습니다. 글쎄, 그것은 아름다움이 아닌가? :)

GET 요청은 몇 줄로 작성할 수도 있습니다.

$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

스크립트를 다운로드하고 실행하시겠습니까?

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

최신 HTML 페이지를 받으시겠습니까?

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

인터넷에는 아주 좋은 jQuery 문서가 있습니다.

jQuery를 API

jQuery.ajax()

또한 모든 일반적인 질문은 Google에서 쉽게 검색할 수 있으며 StackOverflow에 있습니다.