jQuery+JSONP 도메인 간 요청을 구현하는 방법

이번에는 jQuery+ JSONP 크로스 도메인 요청 구현 방법과 jQuery+JSONP 크로스 도메인 요청을 구현하기 위한 주의사항 에 대해 알려드리겠습니다.

JSONP(JSON with Padding)는 주류 브라우저의 도메인 간 데이터 액세스 문제를 해결하는 데 사용할 수 있는 JSON의 "사용 모드"입니다. 동일 출처 정책으로 인해 일반적으로 server1.example.com에 위치한 웹 페이지는 HTML 요소를 제외하고 server1.example.com 이외의 서버와 통신할 수 없습니다. 요소의 이러한 공개 정책을 사용하면 웹 페이지는 다른 소스에서 동적으로 생성된 JSON 데이터를 얻을 수 있으며 이러한 사용 패턴을 JSONP라고 합니다. JSONP로 캡처된 데이터는 JSON이 아니라 JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터로 실행되는 임의의 JavaScript 입니다.

위 문단은 바이두 백과사전에서 따온 것입니다. 개념은 항상 너무 추상적이고 이해하기 어렵습니다. 너무 많은 예를 보고 그 점을 이해하고 나면 자연스럽게 추상적으로 설명하는 방법을 배우게 될 것입니다. 흔히 “지식을 배우는 것은 얇은 것에서 두꺼운 것으로, 두꺼운 것에서 얇은 것으로 가는 과정”이라고 말하는 이유다. 좋아, 너무 멀리 가자. 예를 직접 살펴보겠습니다.

문제: http://localhost:3561/User/GetAllNames에서 데이터를 가져와 표시해야 하는 로컬 페이지 데모.html이 있습니다.

답변: 문제의 두 당사자가 동일한 서버에 있지 않기 때문에 도메인 간 액세스에는 jsonp를 사용해야 합니다.

① 클라이언트 작성

클라이언트는 도메인 간 액세스를 위해 jQuery에서 제공하는 $.getJson 메서드를 사용합니다. getJson에는 3개의 매개변수가 있습니다:

I.url: 요청 주소;

II.data: 서버로 전송되는 매개변수

III. getJson의 사용법은 기본적으로 일반 $.get 메소드와 동일합니다. 차이점은 getJson이 url 뒤의 매개변수 부분에 ?를 자동으로 대체해야 한다는 것입니다. 콜백 함수. 그런 다음 콜백 함수에서 외부 도메인에서 반환된 json 개체를 작동하고 콜백 함수 콜백의 매개 변수는 json 개체입니다.

$.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); ② 서버측 작성

서버측 논리는 주로 데이터를 json

string 으로 직렬화한 다음 이를 "콜백(json)" 형식으로 캡슐화하는 것입니다. 콜백은 함수 이름입니다. jQuery에 의해 자동으로 생성되어 서버에 전달됩니다. 다음은 C#을 사용하여 구현됩니다. public class UserController : Controller { public string GetAllNames(string callback) { string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(names); return string.Format("{0}({1})", callback, json); } } 이제 문제는 성공적으로 해결되었습니다.

생각: 콜백이 서버 측에 하드 코딩된 경우(예: return string.Format("moty({0})", json);) 클라이언트는 이를 어떻게 작성해야 할까요?

참고:

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); 이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 보세요!