jquery 의 ajax 방법 은 JSONP 를 통 해 원 격 호출 을 어떻게 합 니까?

JSONP 의 개념 과 JSONP 를 왜 사용 하 는 지 에 대해 서 는 이미 많은 튜 토리 얼 이 있 습 니 다. 이 절 은 JQUERY 에 있 는 ajax 방법 이 JSONP 를 통 해 원 격 호출 을 하 는 지 보 여 줍 니 다. 먼저 $. ajax 의 매개 변수 type: 요청 방식 GET / OST url: 요청 주소 async: 불 형식 입 니 다. 기본적으로 true 는 요청 이 비동기 인지 여 부 를 표시 합 니 다. false 는 동기 화 를 표시 합 니 다.dataType: 되 돌아 오 는 데이터 형식 jsonp: 요청 처리 프로그램 이나 페이지 에 전달 되 는 jsonp 리 셋 함수 이름 을 가 져 오 는 매개 변수 이름 (일반 기본 값: callback) jsonp Callback: 사용자 정의 jsonp 리 셋 함수 이름, 기본 값 은 jQuery 가 자동 으로 생 성 하 는 랜 덤 함수 이름, "?" 라 고 쓸 수 있 습 니 다.jQuery 는 자동 으로 데 이 터 를 처리 합 니 다 success: 성공 적 으로 실 행 된 함수 error: 이상 처리 함수 1. 예제 1 서버 에서 MVC 의 ACTION 을 사용 하여 데 이 터 를 되 돌려 줍 니 다.

 
  
public class HomeController : Controller 
  
{ 
  
// 
  
// GET: /Home/ 
  
 
  
public ActionResult Index() 
  
{ 
  
returnView(); 
  
} 
  
 
  
public ActionResult ReturnJson() 
  
{ 
  
string callback = Request.QueryString["callback"]; 
  
string json = "{'name':'  ','age':'20'}"; 
  
string result = string.Format("{0}({1})", callback, json); 
  
returnContent(result); 
  
} 
  
 
  
} 
  
 
 

클 라 이언 트 는 jsonp 를 사용 하여 데 이 터 를 전송 합 니 다.

 
  
@{ 
  
ViewBag.Title = "Index"; 
  
Layout = "~/Views/Shared/_Layout.cshtml"; 
  
} 
  
 
  
  
  
 
  <br>functionSendData() 
  <br>{ 
  <br>$.ajax({ 
  <br>type: "get", 
  <br>async: false, 
  <br>url: "/home/ReturnJson", 
  <br>dataType: "jsonp", 
  <br>success: function(data){ 
  <br>alert(data.name); 
  <br>}, 
  <br>error: function(){ 
  <br>alert('fail'); 
  <br>} 
  <br>}); 
  <br>} 
  <br> 
  
 
  
 
  
 
 

제출 단 추 를 누 르 면 서버 쪽 의 Request. Query String ["callback"] 이 무 작위 함수 이름 을 되 돌려 줍 니 다.이렇게 해서 JSONP 형식 으로 데 이 터 를 전달 하도록 설정 되 었 습 니 다.
2. 사용자 정의 함수 명
전달 과정 에서 함수 이름 을 사용자 정의 할 수 있 습 니 다. jsonpCallback 인 자 를 사용 하면 됩 니 다.
jsonp: 전 달 된 매개 변 수 를 표시 합 니 다. 기본 값 은 callback 입 니 다. 서버 세그먼트 도 이 매개 변 수 를 통 해 사용자 정의 함수 이름 을 가 져 올 수 있 습 니 다. 서버 는 Request. Query String ["callback"] 을 가 져 옵 니 다.
jsonpCallback 은 전달 하 는 매개 변수 값, 즉 리 셋 함수 이름 을 표시 합 니 다. 이것 은 사용자 정의 이름 입 니 다.

 
  
 
  <br>functionSendData() { 
  <br>$.ajax({ 
  <br>type: "get", 
  <br>async: false, 
  <br>url: "/home/ReturnJson", 
  <br>dataType: "jsonp", 
  <br>jsonp: "callback",//             ，    jsonp         (     :callback) 
  <br>jsonpCallback: "receive",//    jsonp      ，   jQuery          ，    "?"，jQuery          
  <br>success: function(data) { 
  <br>alert(data.name); 
  <br>}, 
  <br>error: function() { 
  <br>alert('fail'); 
  <br>} 
  <br>}); 
  <br>} 
  <br> 
  <br>functionreceive(data) { 
  <br>alert(data.age); 
  <br>} 
  <br>