Làm cách nào để thiết lập JSONP?

Question

Tôi cần gì ở phía máy chủ để cho phép ai đó lấy dữ liệu từ máy chủ đó bằng cách sử dụng JSONP. Và tôi cần làm gì ở phía người dùng? Tôi muốn sử dụng JSONP như là một thay thế cho một XMLHttpRequest.

Nó sẽ không hoạt động trên phần mở rộng của Firefox của tôi, vì chính sách cùng nguồn gốc. Vì vậy, mọi người đề nghị JSON, nhưng tôi khá mất sau khi tìm kiếm các hướng dẫn và hướng dẫn trên internet.

Cảm ơn sự giúp đỡ!

Answer 1

Giả sử máy chủ của bạn đang chạy PHP, bạn chỉ cần thêm 'gọi lại' yêu cầu GET.

<?php header('content-type: application/json; charset=utf-8'); 
$data = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); 
echo $_GET['callback'] . '('.json_encode($data).')'; 

Và về phía khách hàng (sử dụng jQuery):

$.ajax({url: 'http://site.com/data.php', dataType:'jsonp'}); 

Các mã PHP ở trên chỉ dành cho demo, đừng quên sanitise $ _GET [ 'callback']

Đó cho biết, nếu vấn đề của bạn chỉ là chính sách gốc, bạn có thể chỉ cần allow cross-origin từ phía máy chủ và mọi thứ sẽ hoạt động.

Answer 2

Về phía server, tất cả các bạn phải thiết lập là một nguồn tài nguyên web (ví dụ, trang) mà chấp nhận một yêu cầu GET và trả về dữ liệu sử dụng các quy ước JSON-P, đó là:

callback({"data": "here"}); 

... trong đó tên hàm ("gọi lại" trong ví dụ đó) thường được lấy từ một trong các tham số chuỗi truy vấn (theo quy ước, tham số "gọi lại") và dữ liệu là văn bản JSON (mặc dù về mặt kỹ thuật, nó có thể là bất kỳ thứ gì hợp lệ trong một đối tượng JavaScript theo nghĩa đen, quy ước với JSON-P là hạn chế bản thân với những gì hợp lệ trong JSON). Vì vậy, ví dụ, giả sử rằng yêu cầu trông như thế này:

http://example.com/foo.php?callback=bar

Đó gọi là trang foo.php (không phải là PHP, có thể bất kỳ động hệ thống server-side), nói với nó rằng chức năng chúng tôi muốn nó gọi là "bar". phản ứng của chúng tôi sẽ là:

bar({"data": "here"}); 

Về phía khách hàng, bạn phải thêm một yếu tố script đến trang năng động, và cũng có thêm chức năng gọi lại đó sẽ được kích hoạt bởi các phản ứng JSON-P. Thông thường bạn muốn cung cấp cho chức năng đó một số tên ngẫu nhiên, và loại bỏ nó khi bạn đã hoàn tất.

Here's a complete example làm câu trả lời cho một câu hỏi khác tại đây trên Stack Overflow. Bạn có thể phải điều chỉnh nó một chút để sử dụng trong một phần bổ trợ của Firefox, nhưng các khái niệm thì giống nhau.

Answer 3

jsonp là json với trình bao bọc, vì vậy bạn có thể yêu cầu ajax giả tới máy chủ khác bằng cách chèn động các thẻ <script> mới, với src trỏ đến máy chủ khác. Trình bao bọc cơ bản làm cho các công cụ trả về jsonp là một cuộc gọi hàm javascript hợp lệ có thể được thực thi để trích xuất dữ liệu json chuẩn bên trong.

Nói chung, trong một không an toàn 'chỉ để giới thiệu' phiên bản, bạn muốn có một cái gì đó như thế này:

function unwrap_jsonp(data) { 
    eval(data); 
} 

Các máy chủ từ xa sẽ quay trở lại văn bản đen sau:

unwrap_json("{'this':'is','sparta':'!'}"); 

Lưu ý rằng đây là mã JavaScript nguyên bản, được thực thi và "unwraps" chuỗi JSON được nhúng trở lại cấu trúc dữ liệu javascript gốc.

Hầu hết các dịch vụ JSONP cho phép chỉ định tham số bổ sung thông qua chuỗi truy vấn để đặt tên hàm xử lý bạn muốn bao trả lời, ví dụ:

http://example.com/getjsonp.php?callback=unwrap_json