1

I am new to Jquery, I am trying to post some data to cross domain and I want to handle the response which is a complete HTML page

I am using the following code

$.ajax({

    url: "http://www.somehost.com/abc/xyz.php",
    type: "post",
    data:{page: "123", calltype: "1"},
    // crossDomain: true,  I tried with using it as well
    dataType:'html',
    success: function(response, textStatus, jqXHR){
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown){
        console.log("The following error occured: "+textStatus);
        console.log(jqXHR);
    },
});

When I use dataType:'html', error function fired and firebug log with 

POST http://www.somehost.com/abc/xyz.php 302 Moved Temporarily 231ms
The following error occured: error
Object { readyState=0, status=0, statusText="error"}

but when I use dataType:'jsonp', again error function fired but this time HTML response loaded successfully but there is some parse error which I am not able to understand and firebug log with

FIRE BUG

The following error occured: parsererror
Object { readyState=4, status=200, statusText="success"}
SyntaxError: syntax error       
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

and html response is correct(because I clicked on the link in firebug it is openning) which is something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>Welcome</title>
.
.
.

I want to do some work on this html page response, I dont know what I am doing wrong please help me.

Edit

After checking @alkis reply, I am trying to use this proxy page on my localhost right now, the server which I am requesting requires some kind of login, which work fines when I call cross domain ajax call (which loads the page fine but there is some kind of parse error I mentioned above), but I dont know it is not responding the exact same page when I use proxy, any help ?

Muaz Usmani
  • 1,199
  • 5
  • 24
  • 48

1 Answers1

2

If you want the responce to be HTML and not json then you will have to use a proxy like this

$.ajax({
url: 'proxy.php',
type: 'POST',
data: {
    address: 'http://www.somehost.com/abc/xyz.php',
    page: "123", 
    calltype: "1"
},
xhrFields: {
   withCredentials: true
},
success: function(response) {
    console.log(response);
},
error: function(jqXHR, textStatus, errorThrown){
    console.log(textStatus);
    console.log(errorThrown);
}
});

And with you server side script

$postdata = http_build_query(
    array(
        'var1' => $_POST['page'],
        'var2' => $_POST['calltype']
    )
);

$opts = array('http' =>
    array(
        'method'  => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',
        'content' => $postdata
    )
);

$context  = stream_context_create($opts);

echo file_get_contents($_POST['address'], false, $context);

All the stuff you see in .php file is because you need to pass the paremeters page and calltype as a post request.

The JSONP method want help you if you want to receive html

This answer is a mix of Tatu Ulmanen AJAX cross domain call and pascal MARTIN How to post data in PHP using file_get_contents?

Community
  • 1
  • 1
Alkis Kalogeris
  • 14,519
  • 11
  • 50
  • 98
  • print the success message on the console. Put an error callback func too. – Alkis Kalogeris Apr 30 '13 at 08:00
  • when I use php proxy it is returning me login page(means there is no session), but when I use cross domain call it is returning me right page which I want(but there is some parse error which I already mentioned). – Muaz Usmani Apr 30 '13 at 08:08
  • You didn't mention that there is a session to be kept. From what I found you'll have to use xhrFields: {withCredentials: true} and read the cookie in the server script and send that too. – Alkis Kalogeris Apr 30 '13 at 08:33
  • On the server check the $_REQUEST array, and see if the xhr param is sending the credentials. Then add it in opts, in the header. – Alkis Kalogeris Apr 30 '13 at 08:36
  • It's unknown territory for me too. What I whould do is make a test of xhr. Just make a post request to a test.php where you return the $_REQUEST array just to see if the cookie is there. If it is then you know the structure of it, so you can just place it in your header opts like this http://stackoverflow.com/questions/3431160/php-send-cookie-with-file-get-contents – Alkis Kalogeris Apr 30 '13 at 10:20