JavaScript_jquery에서 jQuery, Ajax 및 JSONP의 공동 사용에 대한 자세한 설명

XMLHttpRequest의 도움으로 브라우저는 전체 페이지를 새로 고치지 않고도 서버와 상호 작용할 수 있습니다. 이것이 바로 Ajax(Asynchronous JavaScript and XML)입니다. Ajax는 사용자에게 더욱 풍부한 사용자 경험을 제공할 수 있습니다.

Ajax 요청은 JavaScript 코드를 통해 URL로 전송됩니다. 서버가 응답하면 콜백 함수에서 서버가 반환한 정보를 처리할 수 있습니다. 요청과 응답을 보내는 전체 프로세스는 비동기식이므로 이 기간 동안 페이지의 다른 Javascript 코드는 중단 없이 계속 실행됩니다.

jQuery는 확실히 Ajax에 대한 훌륭한 지원을 제공하며 다양한 브라우저 간의 Ajax 지원에 대한 고통스러운 차이점도 추상화합니다. 모든 기능을 갖춘 $.ajax() 메소드뿐만 아니라 $.get(), $.getScript(), $.getJSON(), $.post() 및 $().load와 같은 추가 기능도 제공합니다. () 등 간단한 방법입니다.

Ajax라고 명명되었지만 많은 Ajax 애플리케이션은 XML을 사용하지 않습니다. 특히 jQuery Ajax 애플리케이션은 대부분 XML을 사용하지 않고 일반 텍스트, HTML 및 JSON(JavaScript) 객체 표기법과 같이 더 일반적으로 사용됩니다. .

일반적으로 동일 출처 정책(동일 프로토콜, 동일 도메인 이름, 동일 포트)의 제한으로 인해 Ajax는 JSONP(JSON with Padding)와 같은 솔루션을 사용하지 않는 한 도메인 간 요청을 수행할 수 없습니다. 일부 영향을 받은 요청. 도메인 간 기능이 제한되었습니다.
Ajax에 대한 몇 가지 중요한 개념

GET과 POST는 서버에 요청을 보내는 데 가장 일반적으로 사용되는 두 가지 방법입니다. 이 두 가지 방법의 차이점을 올바르게 이해하는 것은 Ajax 개발에 매우 ​​중요합니다.

GET 메소드는 일반적으로 일부 비파괴 작업(즉, 서버의 정보를 수정하지 않고 서버에서 정보만 가져오는 작업)을 수행하는 데 사용됩니다. 예를 들어 검색 쿼리 서비스는 일반적으로 GET 요청을 사용합니다. 또한 GET 요청도 브라우저에 의해 캐시될 수 있으며 이로 인해 예측할 수 없는 문제가 발생할 수 있습니다. 일반적으로 GET 요청은 쿼리 문자열을 통해서만 서버에 데이터를 보낼 수 있습니다.

POST 메서드는 일반적으로 서버에서 일부 파괴적인 작업(즉, 서버의 데이터 수정)을 수행하는 데 사용됩니다. 예를 들어 블로그 게시물을 게시할 때 POST 요청을 사용해야 합니다. GET 요청과 달리 POST 요청에는 캐싱 문제가 없습니다. POST 요청에서는 URL의 일부인 쿼리 문자열도 서버에 데이터를 제출할 수 있지만 이 방법은 모든 데이터를 URL과 별도로 전송해야 하는 것은 아닙니다.

데이터 유형인 jQuery에서는 일반적으로 서버에서 반환하는 데이터 유형을 지정해야 합니다. 경우에 따라 $.getJSON()과 같이 데이터 유형이 이미 메서드 이름에 포함되어 있을 수 있습니다. available 최종적으로 $.ajax() 메소드의 매개변수로 사용될 구성된 객체의 일부입니다. 데이터 유형에는 일반적으로 다음이 포함됩니다.

• 텍스트: 일반 텍스트로, 간단한 문자열을 전송하는 데 사용됩니다.
• html: HTML 조각을 전송하는 데 사용됩니다.
• 스크립트: 페이지에 스크립트를 추가합니다.
• json: 문자열, 배열 또는 개체를 포함할 수 있는 형식이 지정된 JSON 개체를 전송합니다.
• jsonp: 다른 도메인에서 반환된 JSON 데이터를 전송하는 데 사용됩니다.
• xml: 맞춤형 XML 형식의 데이터를 전송하는데 사용됩니다.

비동기 실행, Ajax의 A는 비동기를 의미합니다. 이 시점에서는 Ajax 요청이 기본적으로 비동기식이고 서버에서 반환된 정보를 즉시 사용할 수 없기 때문에 많은 jQuery 초보자가 비동기식이 무엇인지 이해하기 어려울 수 있습니다. 서버에서 반환된 모든 정보는 콜백 함수에서만 처리할 수 있습니다. 예를 들어 다음 코드는 잘못되었습니다.

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

올바른 접근 방식은 콜백 함수에서 서버가 반환한 데이터를 처리하는 것입니다. 콜백 함수는 Ajax 요청이 성공적으로 완료된 경우에만 실행됩니다.

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的