How to capture the output of a php from javascript

Question

I have written few php files which sit in a server. The output of the php would be as follows:

172.xx.xx.xx/myphpfile.php?arg="abc"

Output

{
status: "ok",
result: "asdsdf"
}

My requirement is to call this php api (172.xx.xx.xx/myphpfile.php?arg="abc") from my javascript, parse the output and draw a chart in the page. To summarize the following are my doubts.

How to call a remote php file from javascript?
How to capture the output of a php file in a javascript?

this stackoverflow.com/questions/7319928/… may help

k102
– k102

2011-09-12 10:18:12 +00:00
Commented Sep 12, 2011 at 10:18 — k102
– k102, Commented Sep 12, 2011 at 10:18

Quentin · Accepted Answer · 2011-09-12 10:17:40Z

1

Remote PHP? Due to the same origin policy you have to write the PHP so it emits JSONP. (That link also explains how to use it from JS).

Alternatively, and with more limited browser support, use CORS with XHR

answered Sep 12, 2011 at 10:17

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonas Stensved · Accepted Answer · 2011-09-12 10:18:29Z

1

First of all, javascript is client-side and php is server-side. The web servers outputs text to your browser and it doesn't know about server techniques used.

For fetching and manipulating the data, have a look at jQuery and jQuery ajax

answered Sep 12, 2011 at 10:18

Jonas Stensved

15.5k5 gold badges58 silver badges85 bronze badges

3 Comments

Jonas Stensved Over a year ago

You can solve it a thousand ways, jQuery is one common way, I didn't say its the only way.

Dutchie432 Over a year ago

For someone like the user who posted this question (completely new to the idea of AJAX), jQuery would be the only learning tool I suggest. It simplifies the ajax process many times over not to mention the increase in cross-browser compatibility. Look at the answer by Hungry Mind above. Do you mean to tell me that code is better to start off with? +1 Jonas

Quentin Over a year ago

That's a strawman argument. Just because someone considers jQuery to be a poor place to start doesn't mean they think W3Schools is. Both have their flaws, jQuery hides so much of what is going on that users often don't understand basic things like "The callback doesn't get called before a function you put immediately after the call to the ajax method". W3Schools is just a collection of barely working code, full of security problems, thrown at a wall of adverts. I wouldn't recommend either for someone just starting out.

Dutchie432 · Accepted Answer · 2011-09-12 10:18:30Z

1

Both can easily be done with javascript (and even easier with jQuery). If your resulting page is in JSON format (which it appears to be), you can simply do..

$.getJSON('172.xx.xx.xx/myphpfile.php', 'arg=abc', function(obj){
    alert(obj.status);
});

More info: http://api.jquery.com/jQuery.getJSON/

If the API file is not on your server

If the API is not on the same domain as your page with the JS, you will need to create your own PHP page to read the remote file, and dump its contents locally to the domain.

getJson.php

die(file_get_contents('172.xx.xx.xx/myphpfile.php?arg='.$_REQUEST['arg']));

JS

$.getJSON('gtJson.php', 'arg=abc', function(obj){
    alert(obj.status);
});

answered Sep 12, 2011 at 10:18

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

2 Comments

Matt Over a year ago

He doesn't need to create his own proxy. Since it's his own service he's written, he can easily adapt it work with JSONP instead.

Dutchie432 Over a year ago

Point taken. Most of the time I see these questions, the person posing the question is not in a position to change the source API(s).

Imad Moqaddem · Accepted Answer · 2011-09-12 10:19:43Z

1

You have to use Ajax. Avoid the classic method, prefer using a framework like jQuery or ExtJS, it will be easier and cross-browser.

http://api.jquery.com/jQuery.ajax/

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Ajax

answered Sep 12, 2011 at 10:19

Imad Moqaddem

1,4939 silver badges11 bronze badges

Comments

Siddiqui · Accepted Answer · 2011-09-12 10:31:51Z

1

Here is the code which I use

<script type="text/javascript">

    //Global Variables  
    var xmlHttpFP;

    if (window.ActiveXObject)
    {   
        xmlHttpFP = new ActiveXObject("Microsoft.XMLHTTP");     
    }//End if
    else
    {
        xmlHttpFP = new XMLHttpRequest();
    }//End else

    //Function To fetch Data From Server
    function LoadFPSummary()
    {   

        xmlHttpFP.open("GET","172.xx.xx.xx/myphpfile.php?arg='abc'");

        xmlHttpFP.send();
        document.getElementById("response").innerHTML = xmlHttpFP.responseText;
    }

    xmlHttpFP.send(null);
</script>

answered Sep 12, 2011 at 10:31

Siddiqui

7,90817 gold badges84 silver badges132 bronze badges

2 Comments

Quentin Over a year ago

Don't use globals. Test for the standard XHR object before looking for the ActiveX version. What on earth does FP stand for?

Siddiqui Over a year ago

@Quentin, FP is my own naming convention, its doesn't belong to any standard, just for my own understanding. And I understand your suggestions I'll consider that when I have to reuse it. Thanks for your valuable suggestions.

Johnatan · Accepted Answer · 2011-09-12 10:19:09Z

0

AJAX is the tool you need. Read more here.

answered Sep 12, 2011 at 10:19

Johnatan

1,2688 silver badges16 bronze badges

1 Comment

Quentin Over a year ago

No, don't. That article is full of horrible, horrible code with race conditions and SQL injection security holes wide enough to drive Belgium though.

Hungry Mind · Accepted Answer · 2011-09-12 11:00:33Z

-1

You have to move AJAX technology

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("172.xx.xx.xx/myphpfile.php?arg=abc",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>

<div id="myDiv"><h2>Get from PHP</h2></div>
<button type="button" onclick="myFunction()">Load</button>

</body>
</html>

edited Sep 12, 2011 at 11:00

answered Sep 12, 2011 at 10:27

Hungry Mind

1138 bronze badges

2 Comments

Quentin Over a year ago

Keep away from W3Schools. That code is awful. It has race conditions in it! (The only reason it doesn't have SQL injection problems is because it doesn't include any server side code).

Dutchie432 Over a year ago

Also, this would be the worst way I can think of to teach someone about the basics of AJAX. This code is overwhelming and with the neat 3rd party wrappers they have out there, there's no reason to use XMLHttpRequest or Microsoft.XMLHTTP

Collectives™ on Stack Overflow

How to capture the output of a php from javascript

7 Answers 7

Comments

3 Comments

2 Comments

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

2 Comments

Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related