jQuery+JSONP 도메인 간 요청을 사용하는 단계에 대한 자세한 설명

이번에는 jQuery+JSONP 크로스 도메인 요청을 사용하는 단계와 jQuery+JSONP 크로스 도메인 요청을 사용할 때 주의 사항에 대해 자세히 설명하겠습니다. 다음은 실제 사례입니다. 보세요.

JSONP(JSON Padding)은 주류 브라우저의 도메인 간 데이터 액세스 문제를 해결하는 데 사용할 수 있는 JSON의 "사용 패턴"입니다. 동일 출처 정책으로 인해 일반적으로 다음 지역에 위치합니다. server1.example.com의 웹페이지는 server1.example.com 이외의 서버와 통신할 수 없으며, HTML <script> 요소는 예외입니다. <script> 요소의 공개 정책을 사용하면 웹페이지는 다른 소스에서 동적으로 생성된 스크립트를 가져올 수 있습니다. JSON 데이터이며, 이러한 사용 패턴을 JSONP라고 합니다. JSONP를 사용하여 캡처한 데이터는 JSON이 아니라 임의의 <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript를 사용합니다. JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터가 실행됩니다. </script>

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

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

① 고객 글쓰기

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

I. url: 요청 주소

II. 데이터: 서버로 전송되는 매개변수 III. 콜백:

콜백 기능

성공 시. getJson의 사용법은 기본적으로 일반적인 $.get 메소드와 동일합니다. 차이점은 getJson이 jQuery의 매개변수 부분에 고정된 부분인 callback=?을 추가해야 한다는 것입니다. 자동으로 교체되나요? 콜백 함수를 실행하는 데 필요한 올바른 함수 이름입니다. 그런 다음 콜백 함수에서 외부 도메인에서 반환된 json 개체를 작동하고 콜백 함수 콜백의 매개 변수는 json 개체입니다.

rreee

② 서버사이드 글쓰기

서버의 로직은 주로 데이터를 json

string

으로 직렬화한 후 "콜백(json)" 형식으로 캡슐화하는 것입니다. 콜백은 jQuery에서 자동으로 생성되어 서버에 전달되는 함수 이름입니다. 다음은 C#을 사용하여 구현됩니다.

nbsp;html>


<meta>
  <title></title>


  

  <script></script>   <script> $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i < json.length; i++) { $("#nameList").append("<li>" + json[i] + ""); } }); </script>  이 시점에서 문제는 성공적으로 해결되었습니다.

생각: 콜백이 서버에 직접 작성되었다면(예: return string.Format("moty({0})", json);) 클라이언트는 이를 어떻게 작성해야 할까요?

참고:

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);
  }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

노드의 프로세스 및 child_process 모듈 사용에 대한 자세한 설명

vue2.0 모든 이미지를 로드하는 루핑 방법

위 내용은 jQuery+JSONP 도메인 간 요청을 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!