What is ajax returning to me? (ajax call to php file)

Question

I am pretty much brand new to ajax. This is an ajax call which I am using to retrieve information from a sql database using a php document called "bridge.php". I just cannot seem to understand what I am getting back from this, if anything at all. Is it an array? an object? Am I not getting anything back because I'm using a get when I should be using a post? The amount of info that I'm trying to get back would not fit in a get, but the amount I'm sending through the call is small enough to fit.

<script type="text/javascript">
    function refreshPro(namex){
        alert(namex);
        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=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("port_work").innerHTML=xmlhttp.responseText;   //what is xmlhttp.responseText?
            }
        }
        xmlhttp.open("GET","../bridge.php?pro="+namex,true);
        xmlhttp.send();
    }
</script>

and now for the php(bridge.php) which takes the get var from the url and queries the database, which I know this part works okay by itself...

<?php
$pro = $_GET["pro"];
$sql = "SELECT * FROM portfolio WHERE title LIKE \"%$pro%\"";

$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)) {

?>

    <div id="portfolio_item">
        <h2><?php echo $row['title']; ?></h2>
        <img src="<?php echo $row['image_paths']; ?>" alt="<?php echo $row['title']; ?>" />
        <p id="portfolio_desc"><?php echo $row['description']; ?></p>
    </div>

<?php
}
?>

And yes, I've done my homework. I've studied these two other posts but one starts talking about JSON which I know nothing about, and the other didn't quite seem to match my problem, but I still found the answer kinda useful. Returning AJAX responseText from a seperate file and Ajax call not returning data from php file

xmlhttp.responseText is the response that the server sends you. — Broncha
– Broncha, Commented May 9, 2012 at 5:33
Also, simply using jquery makes cross-server xmlhttprequests easier. Just include the jquery js file in a script tag and add your $.ajax(...) call, see the jquery docs for an example (search for 'For example, to make use of the returned HTML'). — Kep
– Kep, Commented May 9, 2012 at 5:34

Ezequiel Muns · Accepted Answer · 2012-05-09 05:46:21Z

2

You are getting back plain HTML from the server. The responseText variable is a string containing the plaintext response to the GET request.

A GET request is like any other browser request you normally perform when visiting a given URL. Thus you can test what the bridge.php script sends for a given input by visiting http://url/to/bridge.php?pro=<someValue> using your browser of choice.

It doesn't matter the amount of data you get back, what matterns WRT using a POST or a GET is how much data you want to put in (GET request can only take 255 chars of data, POST is technically unlimited).

If you get nothing visiting the bridge.php script directly, this indicates that this script may be failing resulting in a 500 Internal Server Error code. This doesn't get caught by your javascript code since you're explicitly checking that the code is 200 (success) before doing anything with the response.

I would add:

    ... snip ...
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("port_work").innerHTML=xmlhttp.responseText;   
        }
        else 
        {
           alert('There was a ' + xmlhttp.status + ' error :(');
        }
    }
    ... snip ...

edited May 9, 2012 at 5:46

answered May 9, 2012 at 5:39

Ezequiel Muns

7,78035 silver badges59 bronze badges

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

3 Comments

Digital Brent Over a year ago

Thank You. The script does work when I visit it directly. Now that I know what I'm dealing with I think I can figure it out. So what can I change ".responseText" to in order to work with just the html?

gview Over a year ago

Why did you accept this answer when it did not solve your problem? There is nothing wrong with the responseText because you are assigning it's value to the innerHTML of your id="port_work". That in essence replaces the entire element in the DOM and considering you are returning an entire div, this should work fine. Firebug is your friend. I'm guessing that the ajax code is never running but firebug would show you this. If you want to provide an actual sample url, people could verify this for you.

Ezequiel Muns Over a year ago

I don't know what you mean by "in order to work with just the html". The responseText is just a string. You could use any JS string functions on it. Otherwise you can add this response to the document (as you've done in your example) thus enabling you to manipulate it using the DOM functions (getElementById, et al).

Kep · Accepted Answer · 2012-05-09 05:38:04Z

0

Using jQuery for this makes it rather simple:

<script type="text/javascript" src="path/to/jquery.js">
<script type="text/javascript">
function refreshPro(namex)
{
    $.ajax({
      type: "GET",
      url: "../bridge.php",
      data: {
        pro: namex
      }
    }).done(function( msg )
    {
      $("#port_work").html(msg);
    });
}
</script>

answered May 9, 2012 at 5:38

Kep

5,87721 silver badges31 bronze badges

Comments

Rajan Rawal · Accepted Answer · 2012-05-09 05:45:34Z

0

First of all just echo 0 or 1 or any damn keyword 'Hello world' from bridge.php.

the code

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
 alert(xmlhttp.responseText);
 }

says that if everything is goes fine. I.E if the path to the bridge.php then it would go inside this if condition. and will alert response.

If this works perfectly then your code shold work too.

also see the answer mentioned by @ccKep. It is easy to use.

In addition use the tool like Mozilla firebug. So that you can understand that what is going on. Hope this helps.

answered May 9, 2012 at 5:45

Rajan Rawal

6,3236 gold badges44 silver badges62 bronze badges

Comments

gview · Accepted Answer · 2012-05-09 05:34:50Z

-1

The Ajax runs on the client not on the server, so you need to provide the url of your server. This is not going to work:

xmlhttp.open("GET","../bridge.php?pro="+namex,true);

What might work is:

xmlhttp.open("GET","http://yourhost.com/bridge.php?pro="+namex,true);

answered May 9, 2012 at 5:34

gview

15.5k3 gold badges53 silver badges56 bronze badges

8 Comments

sberry Over a year ago

Since it is a GET, just try putting that endpoint in your browser directly. Does it return anything?

gview Over a year ago

Yes, you also need to test out the php script and insure that it actually returns something. I assume that's just a snippet because you have no mysql_connect() or mysql_select_db calls evident. Also, I'd recommend testing with firebug, and the console. You can see your ajax calls firing (or not) and look at the request and response data flowing.

Digital Brent Over a year ago

The connect calls are there but I hid them to avoid people being able to see my info and get into my db

Digital Brent Over a year ago

Oh yeah, and I have tested the script and it does work. Thanks again!

gview Over a year ago

Downvoted for what reason? Because I correctly identified that you can't pass a filesystem path when a url is required?

|

Collectives™ on Stack Overflow

What is ajax returning to me? (ajax call to php file)

4 Answers 4

3 Comments

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest