> 웹 프론트엔드 > JS 튜토리얼 > JSONP 도메인 간 액세스 프록시 API-yahooapis 구현 code_jquery

JSONP 도메인 간 액세스 프록시 API-yahooapis 구현 code_jquery

WBOY
풀어 주다: 2016-05-16 17:47:41
원래의
1401명이 탐색했습니다.

AJAX를 사용하여 일부 공개 API에 액세스하고 싶지만 때로는 서버 측에 코드를 전혀 포함할 생각이 없기 때문에 자신만의 프록시 서비스를 구축하고 싶지 않은 상황에 직면한 적이 있습니까? 귀찮은 브라우저의 동일 출처 정책으로 인해 Ajax 호출이 불가능합니다.
예를 들어 날씨가 편안한 API에 액세스하려는 경우 GET으로 직접 이동하면

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

$.get("http://m.weather.com.cn/data/101010100.html")


이 질문 보기 저는 모두가 그것에 익숙하고 자연스럽게 해결책을 찾을 것이라고 믿습니다. 그러나 여기서는 서버 측 코드를 건드리고 싶지 않습니다. 저는 jsonp를 사용할 것이지만 서버 측에서는 그렇습니다. 계약을 이행하지 않습니다.
주인공인 yahoo가 제공하는 jsonp 프록시를 소개할 시간입니다: http://query.yahooapis.com/v1/public/yql
교차 도메인 액세스를 구현하는 코드: http: //jsfiddle.net/whitewolf /4UDpf/9/
html:
코드 복사 코드는 다음과 같습니다.

< script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js">



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

js:
$(function(){
$.getJSON("http://query.yahooapis.com/v1/public /yql", {
q: "url="http://m.weather.com.cn/data/101010100.html"",
형식: "json"
에서 json에서 * 선택 }, function(data) {
var $content = $("#content")
if (data.query.results) {
$content.text(JSON.stringify(data.query.results) )); else {
$ content.text(' 해당 코드 없음: ' 코드)


}); >효과:

Multiple 말할 필요도 없이 모두가 jsonp의 원리를 알고 있다고 믿습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿