집 > 기사 > 웹 프론트엔드 > jQuery+JSONP를 통한 도메인 간 요청 방법(자세한 튜토리얼)

jQuery+JSONP를 통한 도메인 간 요청 방법(자세한 튜토리얼)

亚连원래의: 2018-06-01 10:46:101513검색

jsonp를 이해한 후에는 jsonp가 주로 도메인 간 데이터를 얻는 데 사용된다는 것도 이해해야 합니다. 오늘은 실제로 jsonp를 적용하여 도메인 간 데이터를 얻는 방법에 대해 자세히 논의하겠습니다.

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

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

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

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

① 클라이언트측 작성

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

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

III.

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

　② 서버 측 작성

서버의 논리는 주로 데이터를 json 문자열로 직렬화한 다음 이를 "콜백(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.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

jQuery+JSONP를 통한 도메인 간 요청 방법(자세한 튜토리얼)

관련 기사