집 > 기사 > 웹 프론트엔드 > access-jsonp 원칙 및 예제에 걸친 js/ajax(javascript 및 jquery 구현 코드)_javascript 기술

access-jsonp 원칙 및 예제에 걸친 js/ajax(javascript 및 jquery 구현 코드)_javascript 기술

WBOY원래의: 2016-05-16 17:45:071325검색

다행스럽게도 종말 이후에 다시 떠오르는 태양을 봤기 때문에 여기에 기사를 쓸 수 있습니다. 최근에 프로젝트를 진행하면서 기본 도메인 이름으로 기존 함수를 호출하기 위해 하위 도메인 이름을 사용해야 했던 주제로 돌아가 보겠습니다. 그래서 생각한 것이 jsonp를 사용하여 해결하는 것입니다. 평소 프로젝트에서 이러한 요구 사항을 갖고 있는 친구들이 많기 때문에 나중에 참고할 수 있도록 기록해 두었고 모두에게 도움이 되기를 바랍니다.

JSONP 프로토콜이란 무엇인가요?
JSONP는 Padding이 포함된 JSON입니다. 동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 하려면 html의 스크립트 태그를 사용하여 도메인 간 요청을 하고 응답에서 실행할 스크립트 코드를 반환하면 JSON을 사용하여 javascript 개체를 직접 전달할 수 있습니다. 이 도메인 간 통신 방법을 JSONP라고 합니다.
분명히 JSONP는 스크립트 삽입 동작이므로 보안에 특별한 주의가 필요합니다.

Jquery의 jsonp 인스턴스
프로토콜의 클라이언트 역할과 서버 역할을 각각 맡으려면 두 페이지가 필요합니다.

클라이언트 코드:

코드 복사 코드는 다음과 같습니다.

jsonp 테스트 예<br> <script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> <br><script type="text/ javascript "> <br>jQuery(document).ready(function(){ <br>$.ajax({ <br>type: "get", <br>async: false, <br>url: "http: / /www.xxxxxxxxxxxx.cn/demos/jsonp.php", <br>dataType: "jsonp", <br>jsonp: "callback", // jsonp 콜백 함수 이름을 얻기 위해 요청 핸들러 또는 페이지에 전달됩니다. 이름(보통 기본값은 콜백) <br>jsonpCallback: "feedBackState", // 사용자 정의된 jsonp 콜백 함수 이름, 기본값은 jQuery에서 자동으로 생성된 임의의 함수 이름입니다. <br>success: function(data){ <br> var $ul = $("<ul></ul>"); <br>$.each(data,function(i,v){ <br>$("<li/>") . text(v["id"] " " v["name"]).appendTo($ul) <br>}) <br>$("#remote").append($ul) <br> } , <br>오류: function(){ <br>alert('fail') <br>} <br>}) <br></script> head><br><body> <br>원격 데이터는 다음과 같습니다. <br/><br><div id="remote"></div> ; <br></html> <br><br> <br><br>서버 코드(이 예에서는 PHP를 사용함) <br>: </div> <br><strong></strong><br>코드 복사 <div class="codetitle"><span><a style="CURSOR: pointer" data="68849" class="copybut" id="copybut68849" onclick="doCopy('code68849')"> 코드는 다음과 같습니다. <u></u> </a><?php </span>$jsonp = $_REQUEST["callback"] </div>$str = '[ {"id":"1","name":"테스트 1"},{"id":"2","name":"테스트 2"}]' <div class="codebody" id="code68849">$str = $jsonp " (" .$ str.")"; <BR>echo $str; <BR>?> <br><br> <br><br> <br></span></div>Jsonp의 원리와 간단한 예<br> <img alt="" src="http://files.jb51.net/file_images/article/201212/201212270948472.jpg">jquery는 캡슐화되어 있으므로 실제 구현 방법을 보지 못할 수도 있습니다. <br>클라이언트 코드: <strong></strong><br><br><br>코드 복사 <div class="codetitle"><span><a style="max-width:90%" data="46823" class="copybut" id="copybut46823" onclick="doCopy('code46823')"> 코드는 다음과 같습니다. <u><div class="codebody" id="code46823"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><meta http-equiv="Content-Type" content="text/html; 문자 집합 =utf-8" /> <br><head> <br><title>jsonp 테스트 예

서버 코드
:

코드 복사
코드는 다음과 같습니다.

$str = '[{"id":"1 ","name" :"테스트 1"},{"id":"2","name":"테스트 2"}]'; $str = "OnJSONPServerResponse(" .$str.")" ; echo $str; ?>

 
모두가 코드를 보고 어떻게 구현되는지 이해해야 한다고 생각합니다. 

참고
:

1. jquery는 ajax 처리에서 매개변수를 전송하기 위해 utf-8 인코딩을 사용하므로 변환된 코딩을 저장하는 jsonp 처리 끝에서 utf-8 인코딩을 사용하는 것이 가장 좋습니다. , utf-8이 아닌 경우 변환하는 것을 잊지 마세요. 그렇지 않으면 중국어가 깨질 수 있습니다.
2. 요청한 서버 URL은 http://www.xxxxxxxxxxxx.cn/?act=add와 같이 작성하지 않는 것이 가장 좋습니다. http://www.xxxxxxxxxxxx.cn/index.php로 작성해야 합니다. ?act=add, 신청 과정에서 호환되지 않는 문제가 있습니다.

그렇습니다. 문제가 있는 친구가 있으면 게시하고 함께 토론해 보세요.
누구나 재인쇄할 수 있습니다. 독창성을 표시하고 재인쇄 시 링크를 추가해야 합니다. 그렇지 않으면...n단어는 생략됩니다.
서명: 함께 소통하고, 함께 배우고, 도움이 필요한 사람들을 돕고, 성공을 달성하세요. 함께 길.

성명：

이전 기사：자바스크립트 이미지 처리 - 스무딩 처리 구현 원리_javascript 기술다음 기사：자바스크립트 이미지 처리 - 스무딩 처리 구현 원리_javascript 기술

access-jsonp 원칙 및 예제에 걸친 js/ajax(javascript 및 jquery 구현 코드)_javascript 기술

관련 기사