อะไรคือความแตกต่างระหว่าง JSON และ JSONP?

ฟอร์แมตแบบฉลาด, ประเภทไฟล์ฉลาดและใช้งานได้จริงหรือไม่?

JSONP คือ JSON พร้อมการขยาย นั่นคือคุณใส่สตริงที่จุดเริ่มต้นและวงเล็บหนึ่งคู่อยู่รอบ ๆ ตัวอย่างเช่น:

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

ผลลัพธ์คือคุณสามารถโหลด JSON เป็นไฟล์สคริปต์ หากก่อนหน้านี้คุณตั้งค่าฟังก์ชั่นที่เรียกfuncว่าฟังก์ชั่นนั้นจะถูกเรียกด้วยอาร์กิวเมนต์หนึ่งซึ่งเป็นข้อมูล JSON เมื่อไฟล์สคริปต์เสร็จสิ้นการโหลด โดยปกติจะใช้เพื่ออนุญาต AJAX แบบข้ามไซต์ที่มีข้อมูล JSON หากคุณรู้ว่า example.com กำลังให้บริการไฟล์ JSON ที่มีลักษณะเหมือนตัวอย่าง JSONP ที่ระบุไว้ด้านบนคุณสามารถใช้รหัสเช่นนี้เพื่อดึงข้อมูลได้แม้ว่าคุณจะไม่ได้อยู่ในโดเมน 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);

โดยทั่วไปคุณไม่ได้รับอนุญาตให้ขอข้อมูล JSON จากโดเมนอื่นผ่าน AJAX เนื่องจากนโยบายต้นทางเดียวกัน AJAX ช่วยให้คุณสามารถดึงข้อมูลได้หลังจากที่โหลดหน้าเว็บแล้วจากนั้นจึงเรียกใช้งานโค้ด / การเรียกใช้ฟังก์ชันเมื่อมีการส่งคืน เราไม่สามารถใช้ AJAX ได้ แต่เราได้รับอนุญาตให้แทรก<script>แท็กลงในหน้าของเราและอนุญาตให้อ้างอิงสคริปต์ที่โฮสต์ที่โดเมนอื่น

โดยปกติแล้วคุณจะใช้นี้จะรวมถึงห้องสมุดจาก CDN เช่นjQuery อย่างไรก็ตามเราสามารถใช้สิ่งนี้ในทางที่ผิดและใช้เพื่อดึงข้อมูลแทน! JSON เป็นจาวาสคริปต์ที่ถูกต้องอยู่แล้ว ( ส่วนใหญ่ ) แต่เราไม่สามารถส่งคืน JSON ในไฟล์สคริปต์ของเราได้เนื่องจากเราไม่มีทางรู้ว่าเมื่อสคริปต์ / ข้อมูลโหลดเสร็จแล้วและเราไม่สามารถเข้าถึงได้เว้นแต่จะเป็น กำหนดให้กับตัวแปรหรือส่งผ่านไปยังฟังก์ชัน ดังนั้นสิ่งที่เราทำคือแจ้งให้เว็บเซอร์วิสเรียกฟังก์ชันในนามของเราเมื่อพร้อม

ตัวอย่างเช่นเราอาจขอข้อมูลบางส่วนจากตลาดหลักทรัพย์ API และพร้อมกับพารามิเตอร์ API ตามปกติของเรา, ?callback=callThisWhenReadyเราจะให้มันโทรกลับเช่น บริการเว็บแล้ว wraps callThisWhenReady({...data...})ข้อมูลที่มีฟังก์ชั่นของเราและส่งกลับไปเช่นนี้ ทันทีที่สคริปต์โหลดเบราว์เซอร์ของคุณจะพยายามดำเนินการ (ตามปกติ) ซึ่งจะเรียกฟังก์ชันตามอำเภอใจของเราและดึงข้อมูลที่เราต้องการให้เรา

มันทำงานคล้ายกับคำขอ AJAX ปกติยกเว้นแทนที่จะเรียกใช้ฟังก์ชันที่ไม่ระบุชื่อเราต้องใช้ฟังก์ชันที่มีชื่อ

jQuery สนับสนุนสิ่งนี้อย่างไร้รอยต่อสำหรับคุณโดยการสร้างฟังก์ชั่นที่มีชื่อไม่ซ้ำใครสำหรับคุณและส่งผ่านสิ่งนั้นออกไปซึ่งจะเป็นการเปิดใช้งานโค้ดที่คุณต้องการ

JSONPอนุญาตให้คุณระบุฟังก์ชันการโทรกลับที่ส่งผ่านวัตถุ JSON ของคุณ สิ่งนี้ช่วยให้คุณสามารถข้ามนโยบายต้นกำเนิดเดียวกันและโหลด JSON จากเซิร์ฟเวอร์ภายนอกลงใน JavaScript บนหน้าเว็บของคุณ

JSONP ย่อมาจาก“ JSON with Padding” และเป็นวิธีแก้ปัญหาสำหรับการโหลดข้อมูลจากโดเมนที่แตกต่างกัน มันโหลดสคริปต์ลงในส่วนหัวของ DOM และทำให้คุณสามารถเข้าถึงข้อมูลราวกับว่ามันถูกโหลดในโดเมนของคุณเองดังนั้นโดยผ่านปัญหาข้ามโดเมน

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);

ตอนนี้เราสามารถร้องขอ JSON ผ่าน AJAX โดยใช้ JSONP และฟังก์ชั่นการโทรกลับที่เราสร้างขึ้นรอบเนื้อหา JSON ผลลัพธ์ควรเป็น JSON เป็นวัตถุซึ่งเราสามารถใช้ข้อมูลสำหรับสิ่งที่เราต้องการโดยไม่มีข้อ จำกัด

JSONP เป็นหลัก, JSON พร้อมรหัสพิเศษ, เช่นการเรียกใช้ฟังก์ชันที่ล้อมรอบข้อมูล จะช่วยให้ข้อมูลที่จะดำเนินการในระหว่างการแยกวิเคราะห์

JSON

JSON (สัญลักษณ์วัตถุ JavaScript)เป็นวิธีที่สะดวกในการขนส่งข้อมูลระหว่างแอปพลิเคชันโดยเฉพาะเมื่อปลายทางเป็นแอปพลิเคชัน JavaScript

ตัวอย่าง:

นี่เป็นตัวอย่างขั้นต่ำที่ใช้ JSON เป็น transport สำหรับการตอบกลับของเซิร์ฟเวอร์ ลูกค้าทำการร้องขอ Ajax ด้วยฟังก์ชัน jQuery shorthand $ .getJSON เซิร์ฟเวอร์สร้างแฮชจัดรูปแบบเป็น JSON และส่งคืนไปยังไคลเอ็นต์ ลูกค้าจัดรูปแบบนี้และวางไว้ในองค์ประกอบของหน้า

เซิร์ฟเวอร์:

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

ลูกค้า:

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

เอาท์พุท:

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

JSONP (JSON พร้อม Padding)

JSONPเป็นวิธีที่ง่ายในการเอาชนะข้อ จำกัด ของเบราว์เซอร์เมื่อส่งการตอบสนอง JSON จากโดเมนที่แตกต่างจากไคลเอนต์

การเปลี่ยนแปลงเพียงอย่างเดียวในฝั่งไคลเอ็นต์ด้วย JSONP คือการเพิ่มพารามิเตอร์การโทรกลับไปยัง URL

เซิร์ฟเวอร์:

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

ลูกค้า:

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

เอาท์พุท:

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

ลิงก์: http://www.codingslover.blogspot.in/2014/11/what-are-differences-between-json-and-jsonp.html

“ JSONP คือ JSON พร้อมรหัสพิเศษ” จะง่ายเกินไปสำหรับโลกแห่งความเป็นจริง ไม่คุณต้องมีความคลาดเคลื่อนเล็กน้อย อะไรคือความสนุกสนานในการเขียนโปรแกรมถ้าทุกอย่างเป็นเพียงแค่การทำงาน ?

ปรากฎJSON ไม่ได้เป็นส่วนหนึ่งของ JavaScript หากสิ่งที่คุณทำคือนำอ็อบเจกต์ JSON มารวมไว้ในการเรียกใช้ฟังก์ชันวันหนึ่งคุณจะถูกกัดด้วยข้อผิดพลาดทางไวยากรณ์ที่แปลกประหลาดอย่างที่ฉันเป็นทุกวันนี้

JSONP เป็นวิธีที่ง่ายในการเอาชนะข้อ จำกัด ของเบราว์เซอร์เมื่อส่งการตอบสนอง JSON จากโดเมนที่แตกต่างจากไคลเอนต์

แต่การใช้งานจริงของวิธีการเกี่ยวข้องกับความแตกต่างเล็กน้อยที่มักจะไม่อธิบายอย่างชัดเจน

นี่คือบทช่วยสอนอย่างง่ายที่แสดง JSON และ JSONP เคียงข้างกัน

รหัสทั้งหมดมีอิสระที่ Github และรุ่นสดสามารถดูได้ที่http://json-jsonp-tutorial.craic.com