이번에는 jQuery+JSONP 크로스 도메인 요청구현 방법과 jQuery+JSONP 크로스 도메인 요청을 구현하기 위한 주의사항에 대해 알려드리겠습니다. JSONP(JSON with Padding)는 주류 브라우저의 도메인 간 데이터 액세스 문제를 해결하는 데 사용할 수 있는 JSON의 "사용 모드"입니다. 동일 출처 정책으로 인해 일반적으로 server1.example.com에 위치한 웹 페이지는 HTML 요소를 제외하고 server1.example.com 이외의 서버와 통신할 수 없습니다. <script> 요소의 이러한 공개 정책을 사용하면 웹 페이지는 다른 소스에서 동적으로 생성된 JSON 데이터를 얻을 수 있으며 이러한 사용 패턴을 JSONP라고 합니다. JSONP로 캡처된 데이터는 JSON이 아니라 JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터로 실행되는 임의의 <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>입니다. </p> <p style="text-align: left;"> 위 문단은 바이두 백과사전에서 따온 것입니다. 개념은 항상 너무 추상적이고 이해하기 어렵습니다. 너무 많은 예를 보고 그 점을 이해하고 나면 자연스럽게 추상적으로 설명하는 방법을 배우게 될 것입니다. 흔히 “지식을 배우는 것은 얇은 것에서 두꺼운 것으로, 두꺼운 것에서 얇은 것으로 가는 과정”이라고 말하는 이유다. 좋아, 너무 멀리 가자. 예를 직접 살펴보겠습니다. </p> <p style="text-align: left;"> <img alt="" src="https://img.php.cn/upload/article/000/061/021/3f2454ccbb7c73a79825cc948f18f305-0.png"></p> <p style="text-align: left;"> 문제: http://localhost:3561/User/GetAllNames에서 데이터를 가져와 표시해야 하는 로컬 페이지 데모.html이 있습니다. </p> <p style="text-align: left;"> 답변: 문제의 두 당사자가 동일한 서버에 있지 않기 때문에 도메인 간 액세스에는 jsonp를 사용해야 합니다. </p> <p style="text-align: left;"> ① 클라이언트 작성 </p> <p style="text-align: left;"> <a href="http://www.php.cn/code/10550.html" target="_blank">클라이언트는 도메인 간 액세스를 위해 </a>jQuery에서 제공하는 $.getJson 메서드를 사용합니다. getJson에는 3개의 매개변수가 있습니다: </p> <p style="text-align: left;"> I.url: 요청 주소; </p> <p style="text-align: left;"> II.data: 서버로 전송되는 매개변수 </p> <p style="text-align: left;"> III. <a href="http://www.php.cn/code/8530.html" target="_blank"></a> getJson의 사용법은 기본적으로 일반 $.get 메소드와 동일합니다. 차이점은 getJson이 url 뒤의 매개변수 부분에 ?를 자동으로 대체해야 한다는 것입니다. 콜백 함수. 그런 다음 콜백 함수에서 외부 도메인에서 반환된 json 개체를 작동하고 콜백 함수 콜백의 매개 변수는 json 개체입니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!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"> $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i < json.length; i++) { $("#nameList").append("" + json[i] + ""); } });
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
