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

Dual Screen Script for Ubuntu

I have experienced problems when installing two monitors in Ubuntu. Following script will help you to solve this problem. I had problems when saving below values so I created a script and put it to the startup. #!/bin/sh xrandr --output VGA-0 --mode 1920x1080 --pos 1280x0 --rotate normal --output DVI-I-1 --off --output DVI-I-0 --mode 1280x1024 --pos 0x0 --rotate normal --output HDMI-0 --off
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

MYSQL Compare data in different Databases

Following statement will compare values in two databases and gives you records that not matched. SELECT stage,live,path,scope_id FROM ( SELECT (CASE WHEN (S.value = L.value) THEN '' ELSE 'N/M' END) as matched, S.scope_id, S.path, S.value AS 'stage', L.value AS 'live' FROM cin_stage.core_config_data S INNER JOIN cin_live.core_config_data L ON S.path = L.path ) RES WHERE matched = 'N/M' ORDER BY scope_id
Post a Comment
Read more