Sự khác biệt giữa JSON và JSONP là gì?

Định dạng khôn ngoan, loại tập tin khôn ngoan và thực tế sử dụng khôn ngoan?

JSONP là JSON với phần đệm. Đó là, bạn đặt một chuỗi ở đầu và một cặp dấu ngoặc quanh nó. Ví dụ:

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

Kết quả là bạn có thể tải JSON dưới dạng tệp tập lệnh. Nếu trước đây bạn đã thiết lập một hàm được gọi func, thì hàm đó sẽ được gọi với một đối số, đó là dữ liệu JSON, khi tệp tập lệnh được tải xong. Điều này thường được sử dụng để cho phép AJAX chéo trang với dữ liệu JSON. Nếu bạn biết example.com đang phục vụ các tệp JSON trông giống như ví dụ JSONP được đưa ra ở trên, thì bạn có thể sử dụng mã như thế này để truy xuất nó, ngay cả khi bạn không ở trong miền example.com:

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

Về cơ bản, bạn không được phép yêu cầu dữ liệu JSON từ một tên miền khác thông qua AJAX do chính sách cùng nguồn gốc. AJAX cho phép bạn tìm nạp dữ liệu sau khi một trang đã được tải, sau đó thực thi một số mã / gọi một hàm khi nó trả về. Chúng tôi không thể sử dụng AJAX nhưng chúng tôi được phép đưa <script>các thẻ vào trang riêng của chúng tôi và chúng được phép tham chiếu các tập lệnh được lưu trữ tại các tên miền khác.

Thông thường, bạn sẽ sử dụng điều này để bao gồm các thư viện từ CDN, chẳng hạn như jQuery . Tuy nhiên, chúng ta có thể lạm dụng điều này và sử dụng nó để lấy dữ liệu thay thế! JSON đã là JavaScript hợp lệ ( đối với hầu hết các phần ), nhưng chúng tôi không thể trả lại JSON trong tệp tập lệnh của mình, vì chúng tôi không có cách nào biết khi nào tập lệnh / dữ liệu đã tải xong và chúng tôi không có cách nào để truy cập trừ khi nó được gán cho một biến hoặc được truyền cho một hàm. Vì vậy, những gì chúng tôi làm thay vì nói với dịch vụ web thay mặt chúng tôi gọi một chức năng khi nó sẵn sàng.

Ví dụ: chúng tôi có thể yêu cầu một số dữ liệu từ API trao đổi chứng khoán và cùng với các tham số API thông thường của chúng tôi, chúng tôi cung cấp cho nó một cuộc gọi lại, như ?callback=callThisWhenReady. Dịch vụ web sau đó kết hợp dữ liệu với chức năng của chúng tôi và trả về nó như thế này : callThisWhenReady({...data...}). Bây giờ ngay khi tập lệnh tải, trình duyệt của bạn sẽ cố gắng thực thi nó (như bình thường), đến lượt nó gọi hàm tùy ý của chúng tôi và cung cấp cho chúng tôi dữ liệu chúng tôi muốn.

Nó hoạt động giống như một yêu cầu AJAX bình thường ngoại trừ thay vì gọi một hàm ẩn danh, chúng ta phải sử dụng các hàm được đặt tên.

jQuery thực sự hỗ trợ điều này một cách liền mạch cho bạn bằng cách tạo một hàm có tên duy nhất cho bạn và tắt nó đi, sau đó sẽ lần lượt chạy mã bạn muốn.

JSONP cho phép bạn chỉ định một hàm gọi lại được thông qua đối tượng JSON của bạn. Điều này cho phép bạn bỏ qua chính sách nguồn gốc tương tự và tải JSON từ máy chủ bên ngoài vào JavaScript trên trang web của bạn.

JSONP là viết tắt của JSON JSON với Padding, và đây là cách giải quyết để tải dữ liệu từ các miền khác nhau. Nó tải tập lệnh vào phần đầu của DOM và do đó bạn có thể truy cập thông tin như thể nó được tải trên miền của chính bạn, do đó bằng cách vượt qua vấn đề tên miền chéo.

jsonCallback(
{
    "sites":
    [
        {
            "siteName": "JQUERY4U",
            "domainName": "http://www.jquery4u.com",
            "description": "#1 jQuery Blog for your Daily News, Plugins, Tuts/Tips & Code Snippets."
        },
        {
            "siteName": "BLOGOOLA",
            "domainName": "http://www.blogoola.com",
            "description": "Expose your blog to millions and increase your audience."
        },
        {
            "siteName": "PHPSCRIPTS4U",
            "domainName": "http://www.phpscripts4u.com",
            "description": "The Blog of Enthusiastic PHP Scripters"
        }
    ]
});

(function($) {
var url = 'http://www.jquery4u.com/scripts/jquery4u-sites.json?callback=?';

$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.sites);
    },
    error: function(e) {
       console.log(e.message);
    }
});

})(jQuery);

Bây giờ chúng tôi có thể yêu cầu JSON thông qua AJAX bằng JSONP và hàm gọi lại mà chúng tôi đã tạo xung quanh nội dung JSON. Đầu ra phải là JSON như một đối tượng mà sau đó chúng ta có thể sử dụng dữ liệu cho bất cứ điều gì chúng ta muốn mà không bị hạn chế.

JSONP về cơ bản là JSON với mã bổ sung, giống như một lệnh gọi hàm bao quanh dữ liệu. Nó cho phép dữ liệu được hành động trong quá trình phân tích cú pháp.

JSON

JSON (Ký hiệu đối tượng JavaScript) là một cách thuận tiện để vận chuyển dữ liệu giữa các ứng dụng, đặc biệt khi đích đến là một ứng dụng JavaScript.

Thí dụ:

Dưới đây là một ví dụ tối thiểu sử dụng JSON làm phương tiện vận chuyển cho phản hồi của máy chủ. Máy khách thực hiện một yêu cầu Ajax với hàm tốc ký jQuery $ .getJSON. Máy chủ tạo ra một hàm băm, định dạng nó dưới dạng JSON và trả lại cái này cho máy khách. Máy khách định dạng này và đặt nó trong một phần tử trang.

Người phục vụ:

get '/json' do
 content_type :json
 content = { :response  => 'Sent via JSON',
            :timestamp => Time.now,
            :random    => rand(10000) }
 content.to_json
end

Khách hàng:

var url = host_prefix + '/json';
$.getJSON(url, function(json){
  $("#json-response").html(JSON.stringify(json, null, 2));
});

Đầu ra:

  {
   "response": "Sent via JSON",
   "timestamp": "2014-06-18 09:49:01 +0000",
   "random": 6074
  }

JSONP (JSON với phần đệm)

JSONP là một cách đơn giản để vượt qua các hạn chế của trình duyệt khi gửi phản hồi JSON từ các miền khác nhau từ máy khách.

Thay đổi duy nhất ở phía máy khách với JSONP là thêm tham số gọi lại vào URL

Người phục vụ:

get '/jsonp' do
 callback = params['callback']
 content_type :js
 content = { :response  => 'Sent via JSONP',
            :timestamp => Time.now,
            :random    => rand(10000) }
 "#{callback}(#{content.to_json})"
end

Khách hàng:

var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
  $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});

Đầu ra:

 {
  "response": "Sent via JSONP",
  "timestamp": "2014-06-18 09:50:15 +0000",
  "random": 364
}

Liên kết: http://www.codingslover.blogspot.in/2014/11/what-are-differences-b between-json-and-jsonp.html

JSON JSONP là JSON có thêm mã. Quá dễ dàng cho thế giới thực. Không, bạn phải có một chút khác biệt. Có gì vui trong lập trình nếu mọi thứ chỉ hoạt động ?

Hóa ra JSON không phải là một tập hợp con của JavaScript . Nếu tất cả những gì bạn làm là lấy một đối tượng JSON và bọc nó trong một lệnh gọi hàm, một ngày nào đó bạn sẽ bị cắn bởi các lỗi cú pháp lạ, giống như tôi hôm nay.

JSONP là một cách đơn giản để vượt qua các hạn chế của trình duyệt khi gửi phản hồi JSON từ các miền khác nhau từ máy khách.

Nhưng việc thực hiện thực tế của phương pháp này bao gồm những khác biệt tinh tế thường không được giải thích rõ ràng.

Đây là một hướng dẫn đơn giản cho thấy JSON và JSONP cạnh nhau.

Tất cả các mã có sẵn miễn phí tại Github và một phiên bản trực tiếp có thể được tìm thấy tại http://json-jsonp-tutorial.craic.com