JSONP for cross domain communication solution using with javascript and PHP

Last year in Feb I heard about JSONP and really liked the JSONP solutions. JSONP allows you to make an HTTP request outside your own domain
JSONP consume the Web Services from JavaScript code. Earlier I worked on so on AJAX but there is issue with working or communication issue with cross domain sites.

XMLHttpRequest is blocked from making external requests.

JSONP for cross domain communication solution using with javascript and PHP

JavaScript code to make a JSONP call will as follows:

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

01function common_jsonpRequest(url, name, query) {
02 
03 if (url.indexOf("?") > -1)
04 url += "&jsonp="
05 else
06 url += name + "&";
07 if (query)
08 url += encodeURIComponent(query) + "&";
09 url += new Date().getTime().toString(); // prevent caching
10 
11 var JSONPscript = document.createElement("script");
12 JSONPscript.id = 'wordpressapi_jsonpRequest';
13 JSONPscript.setAttribute("src", url + "&CacheBuster=" + Math.random());
14 JSONPscript.setAttribute("type","text/javascript");
15 
16 // write the jsonp script tag
17 document.body.appendChild(JSONPscript);
18 //script.text = "";
19 
20}
21 
22function returncall (data){
23 alert(data);
24// you can use data as a variable also.
25}

[/viral-lock]

In same javascript you should write the returning function as above.

You can call JSONP this function as follows;

1<a href="http://images.purabtech.in/JSONP-request.gif">
2<img class="alignnone size-medium wp-image-1167" title="JSONP-request" src="http://images.purabtech.in/JSONP-request-300x125.gif" alt="" width="300" height="125" />
3</a>
4common_jsonpRequest(base_url+'getData.php?jsonp=mycallback&name=for_wordpressapi');

Notel: getData.php file will beahave like externaal javascript file so handle this file carefully.
getData.php sample file.

1<?php
2$data = "this is our dynamic data";
3if($_REQUEST['name']=='for_wordpressapi'){
4 
5echo "returncall(".$data.")";
6 
7}
8 
9?>&nbsp;

This will return the “this is our dynamic data” as a alert.

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn View all posts by Purab

2 thoughts on “JSONP for cross domain communication solution using with javascript and PHP”

this is a really good resource for educators. thanks for sharing.

Exceptional webpage. My class mates and I were just discussing this the other night. Also your webpage looks great on my old laptop. Now thats uncommon. Nice work.

JSONP for cross domain communication solution using with javascript and PHP

Share Article:

Published by

Purab

2 thoughts on “JSONP for cross domain communication solution using with javascript and PHP”

Leave a Reply Cancel reply