CODEWITHSUNDEEP
javascriptjqueryajax
exeleon
exeleon

Reputation: 121

handling server response AJAX

In the process of working on a simple project (or at least I thought to be simple) Where a user clicks a button, and a random saying generated from php appears in the above textbox. I do not have access to the php file so I can't see the code and feel a bit lost. The problem I'm having I believe, is an error in the way Im handling the response from the server (the handleServerResponse function). Any advice would be appreciated.

In an attempt to debug, I've seen this message: (I've changed the url)

XMLHttpRequest cannot load http:somephp.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

the code thus far:

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject(){
var xmlHttp;

if(window.ActiveXObject){
    try{
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
       xmlHttp = false;
       }
    }else{
    try{
       xmlHttp = new XMLHttpRequest();
    }catch(e){
       xmlHttp = false;
    }
  }

if(!xmlHttp)
    alert("Error 1");
  else
    return xmlHttp;
}


$("#BtnReset").click(function () {
    $("#TBSaying").val("");
})

$("#BtnGetSaying").click(function () {
    process();
})


function process(){
    if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
    xmlHttp.open("GET", "http://somephp.php", true);
    xmlHttp.onreadystatechange = handleServerResponse;
    xmlHttp.send(null);
    }else{
       setTimeout('process()', 1000);
    }
}

function handleServerResponse(){
    if(xmlHttp.readyState==4){
       if(xmlHttp.status==200){
        xmlResponse = xmlHttp.responseXML;
        xmlDocumentElement = xmlResponse.documentElement;
        message = xmlDocumentElement.firstChild.data
        $("#TBSaying").val(message);
       }else{
         alert('error 2');
         }
    }
}

Read through the JQuery documentation and started fresh, uploaded it to the same server in which the php resides and it works. here is the final code: Thanks to all that advised!

$("#BtnReset").click(function () {
    $("#TBSaying").val("");
})

$("#BtnGetSaying").click(function () {
    process();
})


function process(){
            // AJAX Code To Submit Form.
            $.get("http://somephp.php",function(data){
             $("#TBSaying").val(data);
  });
 }

Upvotes: 0

Views: 131

Answers (2)

hanshenrik
hanshenrik

Reputation: 21483

Your javascript seems horrible, but alas, wrong "Access-Control-Allow-Origin" is a server-sided (php?) bug, sorry.

tell the server guys to add something like

header("Access-Control-Allow-Origin: *");

to see if your javascript is correct ^^

on a sidenote,

  1. alert("Error 1"); should probably use console.log or throw new Error() instead..
  2. why have xmlHttp as a global, can just use process(e){ var xhr=e.target;...} instead
  3. don't do this setTimeout('process()', 1000); , do setTimeout(process, 1000);

Upvotes: 0

jfriend00
jfriend00

Reputation: 707318

Ajax calls from a browser are restricted by what is called "same origin restrictions". Basically this means that, by default, you can only make an Ajax call back to the same server that the web page came from. That means you cannot make a regular Ajax call to a server on another domain, port or protocol.

You can read about the same origin policy here.

There are a three ways around this restriction, but all require cooperation from a server.

  1. CORS. The server you are making the request from puts headers in its responses that tell the browser whether a cross origin request is allowed or even what domains it is allowed from. This gives the browser permission to complete Ajax calls that are not from the same origin.

  2. JSONP. You can read more about JSONP here. Basically, you request a script from the target server and the script is coded in such a way that it will provide you the answer you want (usually in the JSON data format).

  3. Server proxy. You find or code a server proxy that will request the data from the other server for you. Because server to server communication is not limited by the same origin restrictions, you can sometimes find another server that allows cross-origin requests to it that will then get the data for you and then return it to you.

Upvotes: 1

Related Questions