Berikut ini adalah dua halaman, test.php dan 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);
?>
Sekarang masalah saya: ketika kedua file tersebut pada server yang sama (baik localhost atau web server), bekerja dan alert("Sukses")
disebut; Jika pada server yang berbeda, yang berarti testserver.php pada web server dan test.php di localhost, tidak bekerja, dan alert("Kesalahan")
mengeksekusi. Bahkan jika URL di dalam ajax berubah untuk http://domain.com/path/to/file/testserver.php
Gunakan JSONP.
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).");";
?>
Echo mungkin salah, it's been a while since I've menggunakan php. Dalam hal apapun, anda perlu untuk output callbackName('jsonString')
perhatikan kutipan. jQuery akan lulus's sendiri balik nama, sehingga anda perlu untuk mendapatkan dari MENDAPATKAN params.
Dan sebagai Stefan Kendall diposting, $.getJSON() adalah singkatan metode, tapi kemudian anda perlu menambahkan 'callback=?'
ke url sebagai parameter GET (ya, nilai adalah ?, jQuery menggantikan ini dengan sendiri dihasilkan metode callback).
JSONP adalah pilihan yang baik, tapi ada cara yang lebih mudah. Anda hanya dapat mengatur Access-Control-Allow-Origin
header pada server anda. Setting ke *
akan menerima cross domain AJAX permintaan dari setiap domain. (https://developer.mozilla.org/en/http_access_control)
Metode untuk melakukan hal ini akan bervariasi dari satu bahasa ke bahasa, tentu saja. Berikut ini adalah Rails:
class HelloController < ApplicationController
def say_hello
headers['Access-Control-Allow-Origin'] = "*"
render text: "hello!"
end
end
Dalam contoh ini, say_hello
aksi akan menerima permintaan AJAX dari setiap domain dan mengembalikan respon dari "hello!".
Berikut adalah contoh header mungkin kembali:
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
Mudah seperti itu, itu memang memiliki beberapa batasan browser. Lihat http://caniuse.com/#feat=cors.
Anda dapat mengontrol ini melalui HTTP header dengan menambahkan Akses-Kontrol-Allow-Origin. Pengaturan untuk * akan menerima cross domain AJAX permintaan dari setiap domain.
Menggunakan PHP it's benar-benar sederhana, hanya menambahkan baris berikut ke script yang anda ingin memiliki akses ke luar dari domain anda:
header("Access-Control-Allow-Origin: *");
Don't lupa untuk mengaktifkan mod_headers modul di httpd.conf.
Anda perlu untuk melihat-lihat di Asal yang Sama Kebijakan:
Dalam komputasi, asal yang sama kebijakan yang penting adalah konsep keamanan untuk jumlah sisi browser pemrograman bahasa, seperti JavaScript. Yang kebijakan izin script yang berjalan pada halaman yang berasal dari situs yang sama untuk mengakses satu sama lain's metode dan sifat-sifat yang tidak spesifik pembatasan, tetapi mencegah akses ke sebagian besar metode dan properti di halaman di situs yang berbeda.
Bagi anda untuk dapat mendapatkan data, harus:
Protokol yang sama dan host
Anda perlu untuk mengimplementasikan JSONP untuk pemecahan masalah ini.
Aku harus memuat halaman web dari lokal disk yang "file:///C:/tes/htmlpage.html", call "http://localhost/getxml.php" url, dan melakukan ini di IE8+ dan Firefox12+ browser, menggunakan jQuery v1.7.2 lib untuk meminimalkan kode boilerplate. Setelah membaca puluhan artikel akhirnya figured it out. Berikut adalah ringkasan.
Berikut adalah contoh jQuery ajax call dengan beberapa debug sysouts.
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);
}
});
Memang benar bahwa sama-asal kebijakan mencegah JavaScript dari membuat permintaan di seluruh domain, tapi CORS spesifikasi memungkinkan hanya semacam akses API yang anda cari, dan didukung oleh arus batch browser utama.
Lihat cara mengaktifkan cross-origin resource sharing untuk klien dan server:
"Cross-Origin Resource Sharing (CORS) adalah sebuah spesifikasi yang memungkinkan benar-benar membuka akses seluruh domain-batas. Jika anda melayani semua konten, silakan mempertimbangkan untuk menggunakan CORS untuk membukanya untuk universal JavaScript/akses browser."
Saya menggunakan Apache server, jadi saya've digunakan mod_proxy modul. Mengaktifkan modul:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
Kemudian tambahkan:
ProxyPass /your-proxy-url/ http://service-url:serviceport/
Akhirnya, lewat proxy-url untuk naskah anda.
Ini adalah mungkin, tetapi anda perlu menggunakan JSONP, tidak JSON. Stefan's link menunjuk anda ke arah yang benar. The jQuery AJAX page memiliki informasi lebih lanjut tentang JSONP.
Remy Tajam memiliki rinci contoh menggunakan PHP.
Keamanan Browser mencegah membuat ajax panggilan dari halaman yang di-host pada satu domain ke halaman yang di-host pada domain yang berbeda; ini disebut "sama-asal kebijakan".
Ada beberapa contoh untuk menggunakan JSONP yang meliputi penanganan kesalahan.
Namun, perlu diketahui bahwa kesalahan-acara ini tidak dipicu ketika menggunakan JSONP! Lihat: http://api.jquery.com/jQuery.ajax/ atau https://stackoverflow.com/questions/5247295/jquery-ajax-request-using-jsonp-error
Dari Jquery docs (link):
Karena untuk keamanan browser pembatasan, yang paling "Ajax" permintaan dapat asal-usul yang sama kebijakan; permintaan tidak dapat berhasil mengambil data dari berbagai domain, subdomain, atau protokol.
Script dan JSONP permintaan yang tidak tunduk pada asal-usul yang sama kebijakan pembatasan.
Jadi saya akan mengambil bahwa anda perlu menggunakan jsonp untuk permintaan. Tapi belum't mencoba ini sendiri.
Aku tahu 3 cara untuk mengatasi masalah anda:
header("Access-Control-Allow-Origin: *");
atau hanya sebuah domain dengan menambahkan kode di bawah ini ke .file htaccess:
`<FilesMatch ".(ttf|otf|eot|woff)$">
Untuk Microsoft Azure, it's sedikit berbeda.
Azure memiliki khusus CORS pengaturan yang perlu diatur. It's pada dasarnya hal yang sama di belakang layar, tetapi hanya mengatur header joshuarh menyebutkan tidak akan bekerja. Azure dokumentasi untuk memungkinkan cross domain dapat ditemukan di sini:
https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript
Aku memainkan sekitar dengan ini selama beberapa jam sebelum menyadari saya hosting platform memiliki pengaturan khusus.
ia bekerja, semua yang anda butuhkan:
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 ajax):
var getWBody = $.ajax({ cache: false,
url: URL,
dataType : 'json',
type: 'GET',
xhrFields: { withCredentials: true }
});