msv

Gestern bin ich über Crossdomain Ajax mit jQuery gestolpert.
Ein Sicherheitsmechanismus beharrt darauf, dass man Ajax-Anfragen nur innerhalb einer Domain machen kann. Das kann nervig sein, bspw. wenn man vom eigenen Server Daten auf localhost oder vice versa übertragen möchte.

Seit der Version 1.2 von jQuery gibt es die Möglichkeit Daten unterschiedlicher Domains abzugleichen. Hierbei hilft uns die Erweiterung von JSON (JavaScript Object Notation) –> JSONP.

Beispiel:

Die Php Datei: http://tejat.de/~wasat/API/json/json.php spuckt einen JSONP hash aus…

<?php

$MSV = array(
'foo'  => 'Anweisung A: Metasyntaktische Variable',
'bar'  => 'Anweisung B: foo bar baz',
'baz'  => 'Anweisung C: Antwort auf das Leben, das Universum und den ganzen Rest'
);

$data = json_encode($MSV);
echo $_GET['jsonp_callback'] . '(' . $data . ');';

/* prints:
({"foo":"Anweisung A: Metasyntaktische Variable","bar":"Anweisung B: foo bar baz","baz":"Anweisung C: Antwort auf das Leben, das Universum und den ganzen Rest"});
*/
?>

dessen Werte via Script ganz einfach ausgelesen werden können; und zwar Cross-Domain! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Json Test</title>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function(){

            /* json test */
            $.ajax({
            dataType: 'jsonp',
            jsonp: 'jsonp_callback',
            url: 'http://tejat.de/~wasat/API/json/json.php',
            success: function (data) {
            alert(data.foo);
            },
            });

        })

    </script>
</head>

<body>
</body>
</html>

In Zeile 19 von Beispiel 2 sieht man, wie das Script seine Daten aus einer Cross-Domain anfordert. Ergebnis ist ein Alert von ‘foo’.

  • AGB’s
  • Kontakt/ Imprint
  • links
  • profile
  •