jQuery_jquery의 Ajax get, post 및 기타 메소드에 대한 자세한 설명

load() 메소드 는 일반적으로 웹 서버에서 정적 데이터 파일을 가져오는 데 사용되지만 이는 ajax의 전체 가치를 반영하지 않습니다.

프로젝트에서 일부 매개변수를 서버의 페이지에 전달해야 하는 경우 $.get() 또는 $.post() 메서드(또는 $.ajax() 메서드)를 사용할 수 있습니다.

$.get() 메소드 GET 메소드를 사용하여 비동기 요청을 수행합니다. 구조는 다음과 같습니다: $.get(url [, data] [, callback] [, type])

$.get() 메소드 매개변수는 다음과 같이 설명됩니다.

으로 추가됩니다.

매개변수 이름	유형	설명
URL	문자열	요청된 HTML 페이지의 URL 주소
데이터(선택)	객체	서버로 전송된 키/값 데이터는 요청 URL에 QueryString
콜백(선택)	기능	로딩 성공 시 콜백 함수가 호출되며(Response의 반환 상태가 성공인 경우에만 이 메서드가 호출됨) 요청 결과와 상태가 자동으로 이 메서드에 전달됩니다.
유형(선택)	문자열	xml, html, script, json, text 및 _default를 포함하여 서버에서 반환하는 콘텐츠 형식

$.post() 메소드.

$.post() 및 $.get() 메소드의 구조와 사용법은 동일하지만 여전히 다음과 같은 차이점이 있습니다.

GET 요청은 URL 뒤에 매개변수를 전달하는 반면, POST 요청은 HTTP 메시지의 엔터티 콘텐츠로 웹 서버에 전송됩니다.
GET 방식은 전송되는 데이터에 크기 제한이 있는 반면(보통 2KB 이하), POST 방식을 사용하여 전송되는 데이터의 양은 GET 방식보다 훨씬 큽니다(이론적으로는 제한되지 않음)
GET 방식으로 요청한 데이터는 브라우저에 캐시되므로 다른 사람이 브라우저 기록에서 계좌번호, 비밀번호 등의 데이터를 읽을 수 있습니다. 어떤 경우에는 GET 방식이 심각한 보안 문제를 일으키는 반면, POST 방식은 이러한 문제를 상대적으로 피할 수 있습니다
GET 방식과 POST 방식으로 전송된 데이터는 서버 측에서 다르게 획득됩니다.

$.getScript(): jQuery는 js 파일을 직접 로드할 수 있는 이 메서드를 제공합니다. 이는 HTML 조각을 로드하는 것처럼 간단하고 편리하며 JavaScript 파일 처리가 필요하지 않습니다. 자동으로 실행됩니다.

jQuery 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(함수 () {
           $("#send").click(function () {
               $.getScript("test.js");
        });
})

다른 ajax 메소드와 마찬가지로 $.getScript() 메소드에도 콜백 함수가 있는데, 이 함수는 JavaScript 파일이 성공적으로 로드된 후에 실행됩니다.

예: jQuery 공식 색상 애니메이션 플러그인(jquery.color.js)을 로드하고 성공 후 색상 변경 애니메이션을 요소에 바인딩하려는 경우:

코드 복사 코드는 다음과 같습니다.

* { 여백:0;}
            본문 { 글꼴 크기:12px;}
​​ .comment { margin-top:10px; 테두리:1px solid #ccc;배경:#DDD;}
          .comment h6 { 글꼴 크기:700;}
          .para { margin-top:5px text-indent:2em 배경:#DDD;}
​ .block{너비:80px;높이:80px;배경:#DDD;}
스타일>

머리>

실행

본문>

$.getJson(): JSON 파일을 로드하는 데 사용되는 메소드이며 사용법은 $.getScript()와 동일합니다.

코드 복사 코드는 다음과 같습니다.

   
   
   
        * {마진:0; 패딩:0;}
        본문 { 글꼴 크기:12px;}
        .comment { margin-top:10px; 패딩:10px; 테두리:1px 단색 #ccc;배경:#DDD;}
        .comment h6 { 글꼴 무게:700; 글꼴 크기:14px;}
        .para { 여백-상단:5px; 텍스트 들여쓰기:2em;배경:#DDD;}
    스타일>
   
머리>

   

已有评论：

본문>

';
                })
                $('#resText').html(html);
            })
        })
    })

test.json文为：

复主代码 代码如下:

[
  {
    "username": "张삼",
    "content": "沙发."
  },
  {
    "사용자 이름": "이사",
    "content": "콘텐츠"
  },
  {
    "사용자 이름": "王五",
    "content": "지역."
  }
]

 
使use JSONP형은 JSONP형의 JSON 형식을 사용합니다.

复主代码 代码如下:

   
   
   
        * {마진:0; 패딩:0;}
        본문 { 글꼴 크기:12px;}
        .para {
            너비:100px;
            높이:100px;
            여백:5px;
            테두리:0;
        }
    스타일>
   
머리>

   

본문>

참고:

jQuery는 "url?callback=?"의 마지막 "?"와 같은 URL의 콜백 함수를 올바른 함수 이름으로 자동 교체하여 콜백 함수를 실행합니다.
JSONP(JSON with Padding)는 서버 측에서 스크립트 태그를 통합하고 이를 클라이언트에 반환하여 JavaScript 콜백을 통해 도메인 간 액세스를 달성할 수 있는 비공식 프로토콜입니다. JSON은 간단한 대괄호 구조를 가진 일반 텍스트이므로 많은 채널에서 JSON 메시지를 교환할 수 있습니다. 동일 원본 정책의 제한으로 인해 개발자는 외부 서버와 통신할 때 XMLHttpRequest를 사용할 수 없습니다. JSONP는 동일한 원본 정책을 우회할 수 있는 방법입니다. 즉, JSON과 <script> 태그의 조합을 사용하여 실행 가능한 JavaScript 함수 호출이나 JavaScript 개체를 서버 측에서 직접 반환하는 방식입니다. 현재 JSONP는 주요 기업의 도메인 간 웹 애플리케이션을 위한 첫 번째 선택이 되었습니다. <br /> $.ajax() 메소드는 jQuery의 가장 낮은 수준의 Ajax 구현입니다. 구조는 다음과 같습니다.</script>

$.ajax(options) 이 메소드에는 하나의 매개변수만 있지만 $.ajax() 메소드에 필요한 요청 설정 및 콜백 함수가 포함되어 있습니다. 매개변수는 모든 매개변수입니다. 선택사항입니다.

일반적으로 사용되는 매개변수 목록은 다음과 같습니다.

로 변환됩니다.

매개변수 이름	유형	설명
URL	문자열	(기본값은 현재 페이지 주소) 요청을 보낼 주소
유형	문자열	요청 방법(게시 또는 가져오기)은 기본적으로 가져오기로 설정됩니다. PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다
타임아웃	번호	요청 시간 제한(밀리초)을 설정합니다.이 설정은 $.ajaxSetup() 메서드의 전역 설정을 재정의합니다
데이터	객체 또는 문자열	서버로 데이터가 전송되었습니다. 문자열이 아닌 경우 자동으로 문자열 형식으로 변환됩니다. GET 요청이 URL에 추가됩니다. 이러한 자동 변환을 방지하려면 processData 옵션을 확인하십시오. 객체는 키/값 형식이어야 합니다. 예를 들어 {foo1:"bar1", foo2:"bar2"}는 &foo1=bar1&foo2=bar2로 변환됩니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예를 들어, {foo:["bar1", "bar2"]}는 &foo=bar1&foo=bar2
데이터 유형	문자열	서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 유형은 다음과 같습니다. xml: jQuery로 처리할 수 있는 XML 문서를 반환합니다 html: 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 DOM에 삽입될 때 실행됩니다. 스크립트: 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. 캐시 매개변수가 설정되지 않은 경우. 동일한 도메인이 아닌 원격 요청을 수행할 때 모든 POST 요청은 GET 요청으로 변환됩니다. json: JSON 데이터 반환 jsonp: JSONP 형식입니다. myurl?callback=?과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 자동으로 마지막 "?"를 올바른 함수 이름으로 대체하여 콜백 함수를 실행합니다. text: 일반 텍스트 문자열을 반환합니다
보내기 전	기능	요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 기능을 수정할 수 있습니다. beforeSend에서 false가 반환되면 이 Ajax 요청이 취소될 수 있습니다. XMLHttpRequest 객체가 유일한 매개변수입니다. 함수(XMLHttpRequest) { 　this;//이 Ajax 요청을 호출할 때 전달되는 옵션 매개변수 }
완료	기능	요청 완료 후 호출되는 콜백 함수(요청 성공 또는 실패 시 호출) 매개변수: XMLHttpRequest 객체와 성공적인 요청 유형을 설명하는 문자열. 함수(XMLHttpRequest, textStatue){ 　this;//이 Ajax 요청을 호출할 때 전달되는 옵션 매개변수 }
성공	기능	요청 성공 후 호출되는 콜백 함수에는 두 개의 매개변수가 있습니다. (1) 서버에서 반환하고 dataType 매개변수에 따라 처리되는 데이터 (2) 상태를 설명하는 문자열 함수(데이터, 텍스트상태) { //데이터는 xmlDoc, jsonObj, html, 텍스트 등일 수 있습니다. 　this;//이 Ajax 요청을 호출할 때 전달되는 옵션 매개변수 }
오류	기능	요청이 실패하면 호출되는 함수입니다. 이 함수에는 XMLHttpRequest 개체, 오류 메시지 및 캡처된 오류 개체(선택 사항)라는 세 가지 매개 변수가 있습니다. Ajax 이벤트 기능은 다음과 같습니다. 함수(XMLHttpRequest, textStatus, errorThrown) { //보통 textStatus와 errorThrown 중 하나만 정보를 포함합니다. 　this;//이 Ajax 요청을 호출할 때 전달되는 옵션 매개변수 }
글로벌	부울	기본값은 true입니다. 전역 Ajax 이벤트를 트리거할지 여부를 나타냅니다. false로 설정하면 전역 Ajax 이벤트가 실행되지 않으며 AjaxStart 또는 AjaxStop을 사용하여 다양한 Ajax 이벤트를 제어할 수 있습니다