다음은 test.php와 testserver.php의 두 페이지입니다.
test.php
<script src="scripts/jq.js" type="text/javascript"></script>
<script>
$(function() {
$.ajax({url:"testserver.php",
success:function() {
alert("Success");
},
error:function() {
alert("Error");
},
dataType:"json",
type:"get"
}
)})
</script>
testserver.php
<?php
$arr = array("element1",
"element2",
array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>
이제 내 문제는이 두 파일이 모두 동일한 서버 (로컬 호스트 또는 웹 서버)에 있으면 작동하고 alert (&" Success &")
가 호출되지만 다른 서버에 있으면, 즉 웹 서버의 testserver.php와 로컬 호스트의 test.php가 있으면 작동하지 않고 alert (&" Error &")
가 실행됩니다. 아약스 내부의 URL이 http://domain.com/path/to/file/testserver.php 로 변경되더라도
JSONP]1을 사용합니다.
jQuery:
$.ajax({
url:"testserver.php",
dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
success:function(json){
// do stuff with json (in this case an array)
alert("Success");
},
error:function(){
alert("Error");
}
});
PHP:
<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>
PHP를 사용한 지 오래되어서 에코가 잘못되었을 수 있습니다. 어쨌든 따옴표로 묶인 callbackName('jsonString')
을 출력해야 합니다. jQuery는 자체 콜백 이름을 전달하므로 GET 매개변수에서 해당 이름을 가져와야 합니다.
그리고 스테판 켄달이 게시한 것처럼, $.getJSON()는 속기 메서드이지만, GET 매개변수로 'callback=?'
을 URL에 추가해야 합니다(예, 값은 ?, jQuery는 이를 자체 생성된 콜백 메서드로 대체합니다).
그러나 제슨프 좋은 인프라일까요 옵션을 쉽게. '설정' 헤더입니다 그 허용하시겠습니까 액세스 제어 서버의 됩니다. Ajax 요청을 수락할 크로스-도메인 *' 설정하면 '의 모든 도메인. (https://developer.mozilla.org/en/http_access_control)
물론 이렇게 하려면 언어, 언어 방법을 따라 다릅니다. 이것은 의 레일:
class HelloController < ApplicationController
def say_hello
headers['Access-Control-Allow-Origin'] = "*"
render text: "hello!"
end
end
이 예에서, AJAX 요청을 받아들일 것이라는 응답이 반품하십시오 say_hello '작업' 의 모든 도메인 및 누구없어요! " ";).
예 복귀하십시오 헤더도 슬라이드에서는 경우가 있다.
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive
그러나 쉽게 않니다 있지만브라우저에 은 몇 가지 제한이 있다. # 성과 = 고르 (http://caniuse.com/) 참조.
header("Access-Control-Allow-Origin: *");
동일 출처 정책]1을 살펴봐야 합니다:
컴퓨팅에서 동일 오리진 정책은 은 중요한 보안 개념입니다. 자바스크립트와 같은 브라우저 측 프로그래밍 자바스크립트와 같은 언어에 대한 중요한 보안 개념입니다. 동일 출처 정책은 정책은 다음에서 실행되는 스크립트를 허용합니다. 동일한 사이트에서 시작된 페이지에서 실행되는 스크립트 서로의 메소드에 액세스하고 특정 제한이 없는 속성 제한이 없지만 액세스를 방지합니다. 대부분의 메소드 및 속성 다른 사이트의 페이지.
데이터를 가져올 수 있으려면 데이터가 있어야 합니다:
동일한 프로토콜 및 호스트
이를 해결하려면 JSONP를 구현해야 합니다.
난 이미 웹 페이지에서, 로컬 디스크 " 호출하십시오 " http://localhost/getxml.php" 로드하기에 file:///C:/test/htmlpage.html";; 그리고 이렇게 IE8+ jQuery 라이브러리를 사용할 수 있는 url 을 브라우저 및 Firefox12+ v1.7.2 최소화하므로 상용구 코드. 수십 개의 기사를 읽은 뒤 마침내 해냈다. 이것은 내 요약.
Jquery ajax 호출 일부 디버그입니다 시수츠 예를 들어보겠습니다.
jQuery.support.cors = true;
$.ajax({
url: "http://localhost/getxml.php",
data: { "id":"doc1", "rows":"100" },
type: "GET",
timeout: 30000,
dataType: "text", // "xml", "json"
success: function(data) {
// show text reply as-is (debug)
alert(data);
// show xml field values (debug)
//alert( $(data).find("title").text() );
// loop JSON array (debug)
//var str="";
//$.each(data.items, function(i,item) {
// str += item.title + "\n";
//});
//alert(str);
},
error: function(jqXHR, textStatus, ex) {
alert(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
동일-출처 정책 때문에 하는 것은 사실이지만 수 있지만 단순히 JavaScript 에서 요청에 대해 도메인과의 고르 사양명세 API 를 지원하는 배치처리 액세스하면 정렬하려면 찾고 있으며, 현재 주요 브라우저.
알 수 있는 크로스 기원 위한 리소스 공유 클라이언트 및 서버:
" 크로스 기원, 자원 공유 (고르) 는 오픈 액세스 할 수 있는 진정한 사양명세를 스트라이프하지 도메인 경계를. 컨텐츠가 경배하되 경우 브라우저 자바스크립트 / universal access." 고르 사용해 보십시오 열기 위해 it up.
내가 사용하는 Apache 서버 도왔으매 I& # 39, ve 함께사용할 mod_proxy 모듈에서는. 활성화하십시오 모듈:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
그 후 추가:
ProxyPass /your-proxy-url/ http://service-url:serviceport/
마지막으로 가상본 uirl 전달하십시오 데이터베이스에구성원을 스크립트입니다.
이는 사용해야 할 수 있지만, JSON 제슨프 없습니다. # 39 의 stefan& 링크가 abc. 올바른 방향으로 가고 있습니다. JQuery 아약스 페이지 에서 더 많은 정보를 갖고 있는 제슨프.
레미 샤프 (sharp) 는 자세한 사용 예를 php.
제슨프 사용하기 위한 몇 가지 예를 들어 있는 오류 처리.
그러나 이 때 트리거됨 제슨프 사용하여 오류 발생 유념하십시오 아니다! 참조: http://api.jquery.com/jQuery.ajax/ 또는 https://stackoverflow.com/questions/5247295/jquery-ajax-request-using-jsonp-error
Jquery 의 문서 (링크).
인해, 대부분의 브라우저 보안 제한사항에 " Ajax"; 요청은 어원이 같은 정책을 제외된다. 읽어들입니다 요청 데이터를 다른 도메인, 하위 도메인 또는 포로토콜 성공적으로 수 없습니다.
스크립트입니다 및 정책 제한을 받지 않는 제슨프 요청률 같은 있다.
그래서 꼭 이래야겠어요 받으라니깐 해당 request 에 대한 제슨프 사용해야 합니다. 하지만, 이 t # 39 haven& 적이 있어요.
그러니까말이야 3 방법으로 해결할 수 있다는 장점이 있습니다.
'헤더입니다 (", 그 허용하시겠습니까 액세스 제어: '*").
htaccess 파일 벨로 위해 도메인 스피커에만 추가하기만 코드:
\ '< 필레스 마치. (트프 otf eot woff) $ " > ";;; < 이프모두리 mod_headers.c>; 그 " 스텐비프 :// (www.), http (s)?? (google.com staging.google.com development.google.com otherdomain.net dev02.otherdomain.net) $ ". 크세스콘트로랄로로리긴 = $0 Env = {} ᅦ 크세스콘트로랄로로리긴 크세스콘트로랄로로리긴 추가 헤더입니다 그 허용하시겠습니까 액세스 제어 % < /IfModule>; '/FilesMatch> <;
Azure 가 고르 설정해야 하는 특별한 설정. # 39 의 it& 본질적으로 같은 것이 아니라 단지 머리글로 설정, behind the scenes 조슈아로 언급 작동하지 않습니다. 쓰여져 있는 문서를 사용할 수 있도록 하는 도메인 간 여기에서 찾을 수 있습니다.
https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript
내가 만약 이 실현을 위한 바이올린 수립하였습니다 대체하십시오 몇 시간 전에 내 호스팅 플랫폼 특수 설정값입니다.
작동하잖아, all you need.
PHP.
header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
JS (jQuery 아약스):
var getWBody = $.ajax({ cache: false,
url: URL,
dataType : 'json',
type: 'GET',
xhrFields: { withCredentials: true }
});