JSONP 기초 지식 상세 설명

10981 단어 jsonp
앞 말
JSONP 는 JSON with padding(충전 식 JSON 또는 매개 변수 식 JSON)의 약자 로 JSON 을 응용 하 는 새로운 방법 으로 사무 기와 클 라 이언 트 간 소스 통신 에 자주 사용 되 며 이후 웹 서비스 에서 매우 유행 했다.본문 은 JSONP 를 상세 하 게 소개 할 것 이다.
기초
JSONP 의 기본 사상 은 웹 페이지 가요 소 를 추가 하여 서버 에 JSON 데 이 터 를 요청 하 는 것 이다.이런 방법 은 동원 정책 의 제한 을 받 지 않 는 다.서버 가 요청 을 받 은 후 데 이 터 를 지정 한 이름 의 리 셋 함수 에 넣 어 전송 합 니 다.
요 소 를 통 해 데 이 터 를 호출 할 때 응답 내용 은 자바 script 함수 이름과 괄호 로 감 싸 야 합 니 다.이런 JSON 데 이 터 를 보 내 는 것 이 아니 라 JSONP 에서 P 의 의미 입 니 다.[1, 2, {"buckle": "my shoe"}]JSONP 는 JSON 과 차이 가 많 지 않 습 니 다.함수 호출 에 포 함 된 JSON 에 불과 합 니 다.이 소 포 를 보 낸 후 JSON 응답 을 보 냅 니 다.handleResponse([l, 2, {"buckle": "my shoe"}])패키지 후의 응답 은요소 의 내용 이 됩 니 다.JSON 인 코딩 후의 데 이 터 를 먼저 판단 한 다음 handle Response()함수 에 전달 합 니 다.
실제 적 으로 JSONP 를 지원 하 는 서 비 스 는 클 라 이언 트 가 실현 해 야 할 리 셋 함수 이름 을 강제로 지정 하지 않 습 니 다.예 를 들 어 handle Response.반면,검색 매개 변수 값 을 사용 하여 클 라 이언 트 가 함수 이름 을 지정 한 다음 함수 이름 으로 응답 을 채 울 수 있 도록 합 니 다.JSONP 를 지원 하 는 많은 서비스 들 이 이 매개 변수 이름 을 분별 할 수 있다.또 다른 일반적인 매개 변수 이름 은 callback 입 니 다.사용 하 는 서비스 가 유사 한 특수 한 수 요 를 지원 하기 위해 서 는 코드 에 수정 이 필요 합 니 다.
JSONP 는 두 부분 으로 구성 되 어 있 습 니 다.리 셋 함수 와 데이터 입 니 다.리 셋 함 수 는 응답 이 왔 을 때 페이지 에서 호출 해 야 할 함수 입 니 다.리 셋 함수 의 이름 은 일반적으로 요청 에서 지정 합 니 다.데 이 터 는 리 셋 함수 에 들 어 오 는 JSON 데이터 입 니 다.http://freegeoip.net/json/?callback=handleResponse이 URL 은 JSONP 지리 적 위치 추적 서 비 스 를 요청 하 는 것 입 니 다.검색 문자열 을 통 해 JSONP 서비스의 리 셋 파 라 메 터 를 지정 하 는 것 은 흔히 볼 수 있 습 니 다.위의 URL 에서 보 듯 이 여기 서 지정 한 리 셋 함수 의 이름 은 handle Response()입 니 다.
JSONP 는 동적요 소 를 통 해 사용 되 며,사용 시 src 속성 에 크로스 필드 URL 을 지정 할 수 있 습 니 다.이곳 의요 소 는요소 와 유사 하여 다른 도 메 인 에서 자원 을 제한 없 이 불 러 올 수 있 습 니 다.JSONP 는 유효한 javascript 코드 이기 때문에 요청 이 완료 되면 JSONP 응답 이 페이지 에 불 러 온 후 바로 실 행 됩 니 다.

function handleResponse(response){
  alert ("You're at IP address " + response.ip + ", which is in " + response.city + ", "+ response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handLeResponse"; document.body.insertBefore(script, document.body.firstChild);
JSONP 가 개발 자 들 사이 에서 유행 하 는 이 유 는 매우 간단 하고 사용 하기 쉬 우 며 구식 브 라 우 저가 모두 지원 되 고 서버 개조 가 매우 작 기 때문이다.이미지 Ping 에 비해 응답 텍스트 에 직접 접근 하여 브 라 우 저 와 서버 간 의 양 방향 통신 을 지원 하 는 것 이 장점 입 니 다.
요 소 를 사용 하여 Ajax 전송 을 진행 합 니 다.같은 소스 정책 의 영향 을 받 지 않 기 때문에 다른 서버 에서 데 이 터 를 요청 할 수 있 습 니 다.그리고 JSON 인 코딩 데 이 터 를 포함 한 응답 체험 자동 디 코딩(즉 실행)
그러나 JSONP 도 두 가지 부족 합 니 다.우선 JSONP 는 다른 도 메 인 에서 코드 를 불 러 와 서 실 행 됩 니 다.다른 도 메 인 이 안전 하지 않 으 면 응답 에 악성 코드 를 끼 울 수 있 으 며,이때 JSONP 호출 을 완전히 포기 하 는 것 외 에는 추궁 할 방법 이 없다.따라서 자신 이 운영 하지 않 는 웹 서 비 스 를 사용 할 때 안전 하고 믿 을 수 있 도록 해 야 한다.둘째,JSONP 요청 이 실 패 했 는 지 확인 하 는 것 은 쉽 지 않다.HTML 5 는요소 에 onerror 이벤트 처리 프로그램 을 추 가 했 지만 아직 브 라 우 저 지원 을 받 지 못 했 습 니 다.이 를 위해 개발 자 들 은 지 정 된 시간 내 에 응답 을 받 았 는 지 타 이 머 를 사용 해 야 했다.그렇다 고 마음 에 들 지 는 않 는 다.모든 사용자 가 인터넷 에 접속 하 는 속도 와 대역 폭 이 똑 같은 것 은 아니다.
간단 한 예시
[전단]

<button id="btn">获取信息</button>
<img id="img" height="16" style="display:none" src="data:image/gif;base64,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" alt="loading">
<div id="result"></div>
<script>
var add = (function(){
  var counter = 0;
  return function(){
    return ++counter;
  }
})();
function loadScript(url){
  loadScript.mark = 'load';
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  script.onload = function(){
    img.style.display = 'none';
    btn.removeAttribute('disabled');
  }
  document.body.appendChild(script);
}
function test(data){
  var sum = add() - 1;
  if(sum < data.length ){
   result.innerHTML += data[sum];  
  }
}
btn.onclick = function(){
  img.style.display = 'inline-block';
  btn.setAttribute('disabled','');
  loadScript('https://www.webhuochai.com/test/getData.php?callback=test');
}
</script>
[백 엔 드]

<?php
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
$arr = [1,2,3,4,5];
echo test_input($_GET['callback']) ."(" .json_encode($arr) .");";
?>
바 이 두 검색 상자
바 이 두 검색 창 은 JSONP 기술 을 사 용 했 습 니 다.바 이 두 검색 URL 에서 유용 한 조 회 는 다음 과 같 습 니 다.https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&&cb=a결 과 는:

a({q:"123",p:false,s:["12306","12306铁路客户服务中心","12308汽车订票官网","12306火车票网上订票官网","12333","12315","12345","12333社保查询网","123网址之家","12366"]});
그래서 wd 는 키워드 이 고 cb 는 JSONP 의 함수 명 을 사용 합 니 다.가 져 온 데이터 에서 s 는 키워드 로 시 작 된 데이터 로 구 성 된 데이터 입 니 다.
바 이 두 검색 의 핵심 URL 은 다음 과 같 습 니 다.https://www.baidu.com/s?wd=awd 는 키워드 로 wd=a 일 때 키워드 가 a 인 웹 페이지 를 엽 니 다.

<style>
body{margin: 0;}
ul{margin: 0;padding: 0;list-style: none;}
a{color:inherit;text-decoration: none;}
input{padding: 0;border: 0;}
.box{width: 340px;height: 38px;border: 2px solid gray;}
.con{overflow: hidden;}
.input{float: left;width: 300px;height: 38px;}
.search{width: 38px;height: 38px;float: right;background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/search.png') 0 -38px;}
.list{position: absolute;width: 298px;border: 1px solid #e6e8e9; overflow: hidden;}
.in{line-height: 30px;border-bottom: 1px solid lightblue;cursor:pointer;text-indent: 1em;}
.list .in:last-child{margin-bottom: -1px;}
.in:hover{background-color: #f9f9f9;}
</style>
<div class="box" id="box">
  <div class="con">
    <input class="input" id="search">
    <a target="_blank" id="btn" href="javascript:;" rel="external nofollow" class="search"></a>
  </div>
  <ul class="list" id="list"></ul>    
</div> 
<script>
function loadScript(url){
  loadScript.mark = 'load';
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
}
function callback(data){
  if(data){
    var arr = data.s;
    var html = '';
    for(var i = 0,len = arr.length; i < len; i++){
      html+= "<li class='in'><a href='https://www.baidu.com/s?wd="+ arr[i]+"' target='_blank' style='display:block'>" + arr[i]+ "</a></li>"
    }
    list.innerHTML = html;    
  }
}
search.onkeyup = function(e){
  e = e || event;
  if(e.keyCode == '13'){
    window.open('https://www.baidu.com/s?wd=' + this.value);
  }
  if(this.value){
    if(search.data != this.value){
      btn.setAttribute('href','https://www.baidu.com/s?wd=' + this.value);
      var that = this;
      loadScript("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + that.value + "&&cb=callback");
    }
  }else{
    list.innerHTML = '';
  }
  search.data = this.value;
}
search.onclick = function(e){
  e = e || event;
  list.style.display = 'block';
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble = true;
  }
}
document.onclick = function(){
   list.style.display = 'none';
}
</script>
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
c+이 진 트 리 의 몇 가지 알고리즘
c++의 메시지 상자 message box()상세 소개 및 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage