$ .ajax ()와 $ .get ()과 $ .load ()의 차이점


답변:


241

$.ajax()HTTP 헤더 등을 세밀하게 제어 할 수있는 가장 구성 가능한 것입니다. 이 방법을 사용하여 XHR 개체에 직접 액세스 할 수도 있습니다. 약간 더 세밀한 오류 처리도 제공됩니다. 따라서 더 복잡하고 불필요하지만 때로는 매우 유용 할 수 있습니다. 콜백으로 반환 된 데이터를 직접 처리해야합니다.

$.get()는 축약 형 $.ajax()이지만 일부 구성을 추상화하여 사용자에게 숨겨지는 것에 대해 합리적인 기본값을 설정합니다. 콜백에 데이터를 반환합니다. GET 요청 만 허용하므로 $.post()POST에 대해서만 유사한 추상화 기능 이 수반됩니다.

.load()$.get()문서에서 반환 된 데이터를 삽입 할 위치를 정의 할 수있는 기능 과 유사 하지만 기능을 추가합니다. 따라서 호출 만 HTML을 생성 할 때만 실제로 사용할 수 있습니다. 특정 jQuery-wrapped DOM 요소에 묶여있는 메소드이기 때문에 다른 전역 호출과 약간 다르게 호출됩니다. 따라서 다음을 수행하십시오.$('#divWantingContent').load(...)

그것은 주목해야한다 모든 것을 $.get(), $.post(), .load()에 대한 모든 단지 래퍼 $.ajax()가 내부적으로 불리는으로가.

jQuery의 Ajax 문서에 대한 자세한 내용 : http://api.jquery.com/category/ajax/


3
어떤 @UzairAli, 그것은 문자 그대로 당신이 그것에 전달하는 변수를 취하고) jQuery.ajax를 (실행을 사용
lisburnite

1
.load ()는 단순한 HTML이며 .get ()은 더 많은 것들에 유용합니다.
루이지 로페즈

30

이 방법은 다른 추상화 계층을 제공합니다.

  • $.ajax()Ajax 요청을 완전히 제어 할 수 있습니다. 다른 방법으로 요구 사항을 충족시키지 못하면이 방법을 사용해야합니다.

  • $.get()Ajax GET요청을 실행합니다 . 반환 된 데이터 (모든 데이터 일 수 있음)는 콜백 핸들러로 전달됩니다.

  • $(selector).load()Ajax GET요청 을 실행 하고 선택한 반환 데이터의 내용을 설정합니다 (텍스트 또는 HTML).

어떤 방법을 사용해야하는지에 따라 다릅니다. 간단한 일을하고 싶다면 귀찮게 할 필요가 없습니다 $.ajax().

예를 $.load()들어 반환 된 데이터가 JSON으로 처리되어 더 처리 해야하는 경우을 사용하지 않습니다 . 여기서는 $.ajax()또는을 사용 $.get()합니다.


9

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

설명 : 비동기 HTTP (Ajax) 요청을 수행하십시오.

전액을 지불하면 모든 종류의 Ajax 요청을 할 수 있습니다.


http://api.jquery.com/jQuery.get/

jQuery.get()

설명 : HTTP GET 요청을 사용하여 서버에서 데이터를로드하십시오.

HTTP GET 요청 만 할 수 있으며 약간의 구성이 필요합니다.


http://api.jquery.com/load/

.load()

설명 : 서버에서 데이터를로드하고 리턴 된 HTML을 일치하는 요소에 배치하십시오.

데이터를 가져 와서 요소에 주입하도록 전문화되었습니다.


8

매우 기본이지만

  • $.load(): HTML 조각을 컨테이너 DOM에로드합니다.
  • $.get(): GET 전화를 걸고 응답으로 광범위하게 재생 하려는 경우에 사용하십시오 .
  • $.post(): POST 호출을하고 일부 컨테이너 DOM에 응답을로드하지 않으려는 경우에 사용하십시오.
  • $.ajax(): XHR에 장애가 발생했을 때 무언가를해야하거나 즉시 ajax 옵션 (예 : cache : true)을 지정해야하는 경우에 사용하십시오.

5

중요 사항 : 데이터 매개 변수가 제공되는 경우 jQuery.load () 메소드는 GET 뿐만 아니라 POST 요청 도 수행 할 수 있습니다 ( http://api.jquery.com/load/ 참조 ).

data 형식 : PlainObject 또는 String 요청과 함께 서버로 전송되는 일반 개체 또는 문자열입니다.

요청 방법 데이터가 객체로 제공되는 경우 POST 방법이 사용됩니다. 그렇지 않으면 GET 이 가정됩니다.

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );

3

모든 사람이 옳습니다. 기능 .load, .get그리고 .post함수를 사용하는 다른 방법입니다 .ajax.

개인적으로 .ajax raw 함수는 매우 혼란스럽고 필요에 따라로드, 가져 오기 또는 게시를 선호합니다.

POST의 구조는 다음과 같습니다.

$.post(target, post_data, function(response) { });

GET에는 다음이 있습니다.

$.get(target, post_data, function(response) { });

LOAD는 다음과 같습니다.

$(*selector*).load(target, post_data, function(response) { });

보시다시피, 어느 것을 사용할지 결정하는 상황 에 따라 차이가 거의 없습니다. 내부적으로 파일로 정보를 보내야합니까? .post를 사용하십시오 (대부분의 경우에 해당). 특정 순간에 대한 링크를 제공 할 수있는 방식으로 정보를 보내야합니까? .get을 사용하십시오. 두 파일 모두 파일 응답을 처리 할 수있는 콜백을 허용합니다.

중요한 점은 .load는 두 가지 방식으로 작동한다는 것입니다. 대상 문서의 URL 만 제공하면 가져 오기로 작동 합니다 ( $_POST기본 .load 동작을 사용하는 동안 호출 된 PHP에서 검사를 테스트했기 때문에 행위라고 말하지만 감지 $_POST하지는 않습니다 $_GET. 아무 주장없이 .post로 작동한다고 말하십시오). 그러나, http://api.jquery.com/load/함수에 인수 배열을 제공하면 정보를 파일에 POST합니다. 어떤 경우이든, .load 함수는 정보를 DOM 요소에 직접 삽입합니다. DOM 요소에는 많은 경우 읽기 쉽고 직접적입니다. 응답으로 더 많은 것을 원한다면 여전히 콜백을 제공합니다. 또한 .load를 사용하면 파일에서 특정 코드 블록을 추출하여 카탈로그 (예 : html 파일)를 저장하고 해당 항목 (항목)을 DOM 요소로 직접 검색 할 수 있습니다.



1

둘 다 데이터를 보내고 해당 데이터를 사용하여 응답을받는 데 사용됩니다.

GET : 서버에 저장된 정보를 얻습니다. (예 : 검색, 트윗, 개인 정보). 정보를 보내려면 다음을 사용하여 요청 보내기 요청을 받으 process.php?name=subroto십시오. 기본적으로 url을 통해 정보를 보냅니다. URL은 2036자를 초과 할 수 없습니다. 블로그 게시물의 경우 불가능하다는 것을 기억할 수 있습니까?

POST : GET과 동일한 작업을 게시합니다. 사용자 등록, 사용자 로그인, 빅 데이터 전송, 블로그 게시물. 보안 정보를 보내야 할 경우 URL을 거치지 않으므로 게시물 또는 빅 데이터를 사용하십시오.

AJAX : $.get()및의 $.post()하위 집합 인 기능을 포함합니다 $.ajax(). 더 많은 구성이 있습니다.

$.get ()는 일종의 속기입니다 $.ajax(). 를 사용할 때 $.get ()객체를 전달하는 대신 인수를 전달합니다. 검색하려는 파일의 URL (예 : test.txt) 과 성공 콜백 인 최소 두 개의 인수가 최소한 필요합니다 .


0

모두가 주제를 잘 설명했습니다. .load () 메소드에 대해 추가하고 싶은 점이 하나 더 있습니다.

당으로 로드 문서 는 데이터 URL에 접미사 선택기를 추가하는 경우 다음로드 내용의 스크립트를 실행하지 않습니다.

작업 플 런커

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

반면에 URL에서 선택기를 제거하면 새 컨텐츠의 스크립트가 실행됩니다. 이 예를 보십시오

index.html 파일에서 URL의 #content를 제거한 후

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

논의중인 다른 방법으로 제공되는 내장 기능은 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.