Skip to main content

AJAX, Cross Domain, XMLHttpRequest, XDomainRequest Over IE8 FF8 and Chrome

Ok.I have been faced for this cross domain request using ajax last week and i got real pain when i tried to use it.
I tried with jquery ajax and read lots of articles from the Internet. Reading made me to do this post.
First i tell you what was my scene. I had to do a validation regarding some value. I request this via Ajax.




Problems

My Origin (requesting ajax call from)

https://www.domain.com/

My Validation result and requested output

https://sub.domain.com

Here is the deal. Normally you cant do below

Access remote content which different from current protocol://domain.com.
example:
Requesting https://sub.domain.com content from https://www.domain.com/
Requesting http://www.domain.com content from https://www.domain.com/
Requesting http://www.domain.com:80 content from https://www.domain.com:8080

still you have same domain and want to make a call to your sub domain....No you cant.
Even in my sample function. I cant access https from http or https from http ONLY FOR IE8.Other browsers are working. I think you understand me. (My next attempt would be resolve this IE8 Problem).
In my function i manage to fulfill my requirement and hopefully this might help you to enhance, read or use your requirement.
Anyway you can dive in the Internet to get enough details(I spend lots of time...:-P)


also you have to remember the content page your going to request should contain following header type included.



Access-Control-Allow-Origin: *

With php you can add as below

<?php header('Access-Control-Allow-Origin: *'); ?>

Here is my Code.

<html>
<head>
<title>AJAX</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">

var XHR ;

function createXMLHttp() 
{
 if (typeof XMLHttpRequest != "undefined")
 {
  if(window.XDomainRequest)
  {
   return new XDomainRequest();
  }
  else
  {
   return new XMLHttpRequest();
  }
 }
 else if (window.ActiveXObject) 
 {
  var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
  
  for (var i = 0; i < aVersions.length; i++) 
  {
   try
   {
    var oXmlHttp = new ActiveXObject(aVersions[i]);
    return oXmlHttp;
   }
   catch(oError)
   {
    throw new Error("XMLHttp object could be created.");
   }
  }
 }
 throw new Error("XMLHttp object could be created.");
}

function makeAjaxRequest(url)
{
 XHR = new createXMLHttp();
 
 if(XHR)
 {
  XHR.open('GET',url, true);
  //XHR.onreadystatechange = handler; 
  XHR.onload = function() 
       {
        if (XHR.readyState == 4)
        {
         //Chrome 17 and FF 8.0
         if (XHR.status == 200)
         {
          response =eval("("+XHR.responseText+")");
          $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);          
         }
         else
         {
          alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
         }
        }
        else
        {
         //IE8
         response =eval("("+XHR.responseText+")");
         $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);
        }
       
        
       }; 
  XHR.send(null); 
 }
 else
 {
  alert("Cannot Make Ajax Request");
 }

}

function handler(evtXHR)
{
 if (XHR.readyState == 4)
 {
  if (XHR.status == 200)
  {
   response =eval("("+XHR.responseText+")");
   //$("#res-text").html("Name : " + response.name + "\nCompany Overview : " + response.company_overview);
   alert(response.name);
  }
  else
  {
   alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
  }
 }
 else
 {
  //"currently the application is at" + XHR.readyState);
 }
}

makeAjaxRequest('https://graph.facebook.com/19292868552');

</script>


</head>

<body style="background:#001122; color:#FFFFFF; font-size:13px;font-family:'Verdana'">

<div id="res-text" ></div>
</body>

</html><html>
<head>
<title>AJAX</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">

var XHR ;

function createXMLHttp() 
{
 if (typeof XMLHttpRequest != "undefined")
 {
  if(window.XDomainRequest)
  {
   return new XDomainRequest();
  }
  else
  {
   return new XMLHttpRequest();
  }
 }
 else if (window.ActiveXObject) 
 {
  var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
  
  for (var i = 0; i < aVersions.length; i++) 
  {
   try
   {
    var oXmlHttp = new ActiveXObject(aVersions[i]);
    return oXmlHttp;
   }
   catch(oError)
   {
    throw new Error("XMLHttp object could be created.");
   }
  }
 }
 throw new Error("XMLHttp object could be created.");
}

function makeAjaxRequest(url)
{
 XHR = new createXMLHttp();
 
 if(XHR)
 {
  XHR.open('GET',url, true);
  //XHR.onreadystatechange = handler; 
  XHR.onload = function() 
       {
        if (XHR.readyState == 4)
        {
         //Chrome 17 and FF 8.0
         if (XHR.status == 200)
         {
          response =eval("("+XHR.responseText+")");
          $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);          
         }
         else
         {
          alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
         }
        }
        else
        {
         //IE8
         response =eval("("+XHR.responseText+")");
         $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);
        }
       
        
       }; 
  XHR.send(null); 
 }
 else
 {
  alert("Cannot Make Ajax Request");
 }

}

function handler(evtXHR)
{
 if (XHR.readyState == 4)
 {
  if (XHR.status == 200)
  {
   response =eval("("+XHR.responseText+")");
   //$("#res-text").html("Name : " + response.name + "\nCompany Overview : " + response.company_overview);
   alert(response.name);
  }
  else
  {
   alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
  }
 }
 else
 {
  //"currently the application is at" + XHR.readyState);
 }
}

makeAjaxRequest('https://graph.facebook.com/19292868552');

</script>


</head>

<body style="background:#001122; color:#FFFFFF; font-size:13px;font-family:'Verdana'">

<div id="res-text" ></div>
</body>

</html><html>
<head>
<title>AJAX</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">

var XHR ;

function createXMLHttp() 
{
 if (typeof XMLHttpRequest != "undefined")
 {
  if(window.XDomainRequest)
  {
   return new XDomainRequest();
  }
  else
  {
   return new XMLHttpRequest();
  }
 }
 else if (window.ActiveXObject) 
 {
  var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
  
  for (var i = 0; i < aVersions.length; i++) 
  {
   try
   {
    var oXmlHttp = new ActiveXObject(aVersions[i]);
    return oXmlHttp;
   }
   catch(oError)
   {
    throw new Error("XMLHttp object could be created.");
   }
  }
 }
 throw new Error("XMLHttp object could be created.");
}

function makeAjaxRequest(url)
{
 XHR = new createXMLHttp();
 
 if(XHR)
 {
  XHR.open('GET',url, true);
  //XHR.onreadystatechange = handler; 
  XHR.onload = function() 
       {
        if (XHR.readyState == 4)
        {
         //Chrome 17 and FF 8.0
         if (XHR.status == 200)
         {
          response =eval("("+XHR.responseText+")");
          $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);          
         }
         else
         {
          alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
         }
        }
        else
        {
         //IE8
         response =eval("("+XHR.responseText+")");
         $("#res-text").html("Name : " + response.name + "<br/>Company Overview : " + response.company_overview);
        }
       
        
       }; 
  XHR.send(null); 
 }
 else
 {
  alert("Cannot Make Ajax Request");
 }

}

function handler(evtXHR)
{
 if (XHR.readyState == 4)
 {
  if (XHR.status == 200)
  {
   response =eval("("+XHR.responseText+")");
   //$("#res-text").html("Name : " + response.name + "\nCompany Overview : " + response.company_overview);
   alert(response.name);
  }
  else
  {
   alert("Invocation Errors Occured " + XHR.readyState + " and the status is " + XHR.status);
  }
 }
 else
 {
  //"currently the application is at" + XHR.readyState);
 }
}

makeAjaxRequest('https://graph.facebook.com/19292868552');

</script>


</head>

<body style="background:#001122; color:#FFFFFF; font-size:13px;font-family:'Verdana'">

<div id="res-text" ></div>
</body>

</html>
 

Read More: http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

Leave a comment. Cheers.

Comments

  1. No point in checking XHR.readyState when you use onload. Onload is only invoked when XHR.readyState == 4 and XHR.status == 200. Basically it's a special case of onreadystatechange

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Disable Export Button In Crystal Report When you are taking crystal report printouts through a program, such as program written using vb6. you might have a problem how to disable Export button in print preview. All you have to change following property to false or Uncheck the Export option in Property Pages. You CR.WindowShowExportBtn = False Crystal Report Object in Visual Basic 6. (CR is refer to Crystal Report Object ) You can go to Property Pages by right click and choose Properties on Crystal Report Object After you done those things you crystal Report print preview will showing like follows. I was face to above problem. We implemented a software program which is written using vb6. Cashier can take daily sale print out. before printing it is showing a preview to the user. So when the time pass user click export button and saved that report as a excel file. Then he modified the values and took printout to the management. That gives Security problem to the program a

Magento Generate Google Sitemap using Cron

I had a problem with generating the Google sitemap using cron job. To do that you can simply change following database value. SELECT * FROM core_config_data WHERE path = 'crontab/jobs/sitemap_generate/schedule/cron_expr' Change the value as you set time in cron jobs. EX: Generate the Sitemap for every 5 minutes value = */5 * * * * That's it. Now you have to worry about cron is working or not. Just type following in your browser and hit enter. http://youresite.com/cron.php
Git script which shows little bit advanced status. Save with Preferred file name in /usr/local/bin/XX branch="" branches="git branch --list" ESC_SEQ="\x1b[" COL_RESET=$ESC_SEQ"39;49;00m" COL_RED=$ESC_SEQ"31;01m" while read -r branch; do clean_branch_name=${branch//\*\ /} description=`git config branch.$clean_branch_name.description` if [ "${branch::1}" == "*" ]; then printf "$COL_RED$branch$COL_RESET $description \n" else printf " $branch $description\n" fi done <<< "$branches" git status Use the following command to add a description to your local branches. git branch --edit-description