ajax - HTML5 Post Request Body

Question

function sendPost(){

alert("IN SEND POST");


var username = document.myForm.username.value;
var password = document.myForm.password.value;
alert("username"+username);
alert("password"+password);

console.log("in java script");

    var url = "some url";

    alert("IN url SEND POST");

    var data = "<MESSAGE><HEADER><LOGIN>005693</LOGIN></HEADER><SESSION><LATITUDE>0.0</LATITUDE><LONGITUDE>0.0</LONGITUDE><APP>SRO</APP><ORG>MNM</ORG><TRANSACTION>PRELOGIN</TRANSACTION><KEY>PRELOGIN/ID</KEY><TYPE>PRELOGIN</TYPE></SESSION><PAYLOAD><PRELOGIN><ID>005693</ID><USERNAME>005693</USERNAME><PASSWORD>tech@2014</PASSWORD></PRELOGIN></PAYLOAD></MESSAGE>";

console.log("2")

    var req;
    if(window.XMLHttpRequest) {
    console.log("2");
    try {
      req = new XMLHttpRequest();
    } catch(e) {
      req = false;
    }
  }
  else if(window.ActiveXObject) {
  console.log("3");
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        req = false;
      }
    }
  }


  console.log("4");
  req.onreadystatechange=function()
  {
  console.log("5");
  if (req.readyState==4 && req.status==200)
    {
    console.log("ready state accepted");
    xmlDoc=req.responseXML;
     console.log("xmlDoc"+xmlDoc);
     alert("xmlDoc"+xmlDoc);
    txt="";
    x=xmlDoc.getElementsByTagName("FIRSTNAME");
    y=xmlDoc.getElementsByTagName("LASTNAME");
     console.log("Response achieved"+x);
    }


  }


req.open("POST",url,true);
console.log("6");
req.setRequestHeader("Content-type","application/xml");
req.send(data);
 console.log("7");
  return true;
  }

I get a response in rest client perfectly as i Want as seen in image

In Google Chrome --> I get status as 0 and ready state as 1 and then 4 In Internet Explorer --> I get status as 200 OK and ready state goes from 1 , 2, 3, 4 but a blank xml is returned

In rest client I get a perfect hit and an xml is returned

I tried asking question in different ways but some say its a cross origin problem If yes please lemme know the solution via code in javascript

Please guide

Answer 1

Firstly, I suggest rewriting your code with jQuery's help. This would compact your code, make it cross-platform, and easier to read and maintain:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function sendPost(){
    $.ajax({
        url: "some url",
        type: "POST",
        contentType: "text/xml",
        data: 
            "<MESSAGE><HEADER><LOGIN>005693</LOGIN></HEADER>" +
            "<SESSION><LATITUDE>0.0</LATITUDE><LONGITUDE>0.0</LONGITUDE>" +
            "<APP>SRO</APP><ORG>MNM</ORG><TRANSACTION>PRELOGIN</TRANSACTION>" + 
            "<KEY>PRELOGIN/ID</KEY><TYPE>PRELOGIN</TYPE></SESSION>" +
            "<PAYLOAD><PRELOGIN><ID>005693</ID>" +
            "<USERNAME>" + $("#username").val() + "</USERNAME>" +
            "<PASSWORD>" + $("#password").val() + "</PASSWORD>" +
            "</PRELOGIN></PAYLOAD></MESSAGE>",
        dataType: 'xml',
        success: function(data) {
            var firstname = $(data).find("FIRSTNAME").text();
            var lastname = $(data).find("LASTNAME").text();
            alert('Hello ' + firstname + ' ' + lastname);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Error');
        }
    });
}
</script>

Secondly, a javascript that origins from your server (e.g. www.myserver.com) can't communicate with other servers (i.e. you can't request data from www.anotherserver.com). Well you CAN, but if so you'd need to ensure the answer sent from www.anotherserver.com would be in JSONP format - and then you would just change "dataType" in the example above to "jsonp" to be able to access the result like "data.firstname" and "data.lastname".

Anyway, in your case I would create a local proxy on my own webserver (in the same folder where you have the above .HTML-file) that would forward the request to the other server and return the result. Thus:

$.ajax({
        url: "myproxy.php",
        type: "POST", ...

And then in myprox.php, something like this (I'm just assuming PHP here, but this could be easily ported to ASP.NET or ASP Classic):

<?php
    // myproxy.php forwards the posted data to some other url, and returns the result
    $clientContext = stream_context_create(array(
        'http' => array(
            'method' => 'POST',
            'header' => 'Content-Type: text/xml; charset=utf-8',
            'content' => http_get_request_body()
        )
    )); 
    print file_get_contents("some url", false, $clientContext);
?>

To clarify: This would make your HTML-page talk to myproxy.php (which lives on the same server [even in the same directory]), then myproxy.php talks to the server at "some url" which returns the data to myproxy.php, which in it's turn returns the data to your script.

Best of luck!