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.
Labels:

Comments

  1. AnonymousMay 7, 2012 at 4:30 AM

    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...
Post a Comment
Read more

Execute *.sql with .NET

Do you ever want to execute slq statements at once. I mean SQL Script file. Normally we are using like following commands to Execute Single SQL statement. SqlCommand cmd = new SqlCommand(sSQL, conn); cmd.ExecuteNonQuery(); cmd.Dispose(); but this way you can execute one command at a time. We cannot execute SQL script using above command. Normal SQL Script Like this. if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[FK__titleauth__au_id__0519C6AF]') and OBJECTPROPERTY(id, N'IsForeignKey') = 1) ALTER TABLE [dbo].[titleauthor] DROP CONSTRAINT FK__titleauth__au_id__0519C6AF GO CREATE TABLE [dbo].[authors] ( [au_id] [id] NOT NULL , [au_lname] [varchar] (40) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL , [au_fname] [varchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL , [phone] [char] (12) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL , [address] [varchar] (40) COLLATE SQL_Latin1_General_CP1_CI_AS NULL , [city] [varchar] (20) COLL...
4 comments
Read more

Magento DB access denied

I got this error suddenly while accessing the magento site. SQLSTATE[HY000] [1129] Host 'user.workgroup' is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' Solution use below command in console mysqladmin flush-hosts or log in to  mysql with a different host if its implemented on network environment and use below statement; FLUSH HOSTS; Or Restart the mysql server
Post a Comment
Read more