Cross Domain Request dengan JSONP

Karena alasan keamanan browser membatasi fungsi-fungsi object xmlHttpRequest ketika digunakan pada domain yang berbeda. Salah satu teknik yang dapat digunakan untuk mengatasi keterbasan tersebut adalah dengan JSONP (JSON with Padding). Fitur related post pada website ini pun menggunakan teknik JSONP.

Demo

Berikut ini adalah demo dimana text yang diinputkan pada textbox dibawah ini akan dibalik (reverse) pada sisi server.

Target URL	Output
http://playground-astasoft2.rhcloud.com/jsonp/cross-domain-test.php?callback=show_reversed_text&text=foo+bar	show_reversed_text({ "origtext": "foo bar", "revtext": "rab oof" });

Client side

<form action="">
<input type="text" size="50" id="rev-text" value="masukkan text" />
<input type="button" id="rev-button" value="Balik Teks" />
</form>
<div id="scriptwrapper"></div>

<script type="text/javascript">
function show_reversed_text(data) {
  alert("Text awal: " + data.origtext + "\nDibalik: " + data.revtext);
  // enable button
  document.getElementById('rev-button').disabled = false;
}

document.getElementById('rev-button').onclick = function() {
  document.getElementById('rev-button').disabled = true;

  var text = document.getElementById('rev-text').value;
  var url = "http://playground-astasoft2.rhcloud.com/jsonp/cross-domain-test.php?callback=show_reversed_text&text=" + text;
  document.getElementById('scriptwrapper').innerHTML = '';
  
  var bscript = document.createElement("script");
  bscript.setAttribute("src", url);
  document.getElementById('scriptwrapper').appendChild(bscript);
}
</script>

Source cross-domain-tes.php

<?php

class Callback_Factory {
    public static function run() {
        $callback = (isset($_GET['callback']) ? $_GET['callback'] : '');
        
        $ctype = (isset($_GET['ctype']) ? $_GET['ctype'] : 'text/javascript');
        header('Content-Type: ' . $ctype);
        
        if (strlen($callback) > 0) {
            if (method_exists('JSONP_Callback', $callback)) {
                $result = JSONP_Callback::$callback();
                $encoded = json_encode($result);
                printf('%s(%s);', $callback, $encoded);
            }
        }
    }
}

class JSONP_Callback {
    public static function show_reversed_text() {
        $text = (isset($_GET['text']) ? $_GET['text'] : '');
        
        $jsonp = new stdClass();
        $jsonp->origtext = $text;
        $jsonp->revtext = strrev($text);
        
        return $jsonp;
    }
}

Callback_Factory::run();

Share on Facebook Twitter