JSONP تعليمي

هذا الفصل سوف نقدم JSONP المعرفة.

Jsonp (JSON مع الحشو) هو سلمان "واسطة استخدام" التي تتيح لها الحصول على معلومات من المجالات الأخرى على شبكة الإنترنت (المواقع)، أن البيانات عبر المجال للقراءة.

لماذا نحن بحاجة إلى تقنية خاصة مجال مختلف (الموقع) للوصول إلى البيانات من (JSONP) ذلك؟ وذلك لأن سياسة المصدر نفسه.

سياسة الأصل، بل هو السياسة الأمنية المعروفة التي اقترحها نتسكيب، والآن كل المتصفحات تدعم سوف جافا سكريبت استخدام هذه الاستراتيجية.

تطبيقات JSONP

1. تنسيق البيانات JSONP الخادم

إذا كان الزبائن يريدون الوصول: http://www.w3big.com/try/ajax/jsonp.php؟jsonp=callbackFunction.

لنفترض أن العميل المتوقع أن يعود البيانات JSON: [ "customername1"، "customername2"].

عاد حقا لبيانات العميل يتم عرضها على النحو التالي: callbackFunction ([ "customername1"، "customername2"]).

خادم كود ملف jsonp.php:

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

2. وظيفة العميل لتحقيق callbackFunction

<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
    {
        html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>

الصفحات المطبوعة

<div id="divCustomers"></div>

عملاء كاملة الشفرة

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JSONP 实例</title>
</head>
<body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
        function callbackFunction(result, methodName)
        {
            var html = '<ul>';
            for(var i = 0; i < result.length; i++)
            {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
<script type="text/javascript" src="http://www.w3big.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

مسج باستخدام JSONP

يمكن استخدام رمز أعلاه أمثلة التعليمات البرمجية مسج:

<!DOCTYPE html>
<html>
<head>
	<title>JSONP 实例</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>	
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.w3big.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
	
	var html = '<ul>';
	for(var i = 0; i < data.length; i++)
	{
		html += '<li>' + data[i] + '</li>';
	}
	html += '</ul>';
	
	$('#divCustomers').html(html); 
});
</script>
</body>
</html>

السابقة: JSON مقدمة

JSON مسار

JSON أمثلة