Ajax Cross Domain

Ajax Cross Domain

Introduction

It is very hard to handle different domain request/response from our website. Although it can be done easily using modern server-side scripting languages, due to Same Origin Policy, this functionality is not preferred by the clients. But in the web industry, we are required to send and retrieve requests often to remote servers via clients-side.

So let’s consider this scenario where the customers purchase the products, from any sellers via website.For this, we need to scrape the product/cart details from multiple seller sites and show them on our website. ACD can make this simple. There are lots of applications that we can develop using this technique.

This blog will explain the basic concept of ACD technique and how we can handle the cross-domain requests using the extended Ajax XMLHttpRequest object.

Use Case

To scrap the shopping cart bag count, from ecommerce website which are enabled by cookies. Lets take the example of these two websites like  shop.nordstrom.com, www1.macys.com/

What we need to do:

  • Set up Perl5+ and the Apache web server
  • Set up a cgi-bin directory
  • Configure the remote URI.

Solution

Before solving our use case, let’s get some pre-requisites satisfied.

Pre-requisites:

  • Download the source code from (http://www.ajax-cross-domain.com/ACD-source.txt) and create a new folder (ACD) under cgi-bin and save it.
  • Change the source code file from permission mode to 755.
  • We need to tell Apache that .js extensions need to be run as CGI. So create a file named .htaccess with the following content:

Flow Chart:

Request & Response flow diagram

request-response-flow-diagram

Create sample web page:

Copy the sample code below and save it into a web directory. When we run it, it will give JS alert with contents of nordstorm site.

Look at the URI parameter passed in acd.js file. It is a required parameter and identifies the remote resource. The value of URI must be enclosed by brackets and it has to be a valid URI according to RFC 3986 with a percent-encoded query-string.

Challenges:

This nordstrom website requires the client browser to be set such that it accepts the cookies. This is the reason why we are not able to ready the contents, even after using PHP server side scripting functionality like PHP file_get_contents, CURL. But using Ajax Cross Domain technique we are able to read the contents, headers from that website.

Example to show response header of a remote website:

When we run the code given below, it will read the headers of remote server ie: google.com and display the output in Js alert.

Example to perform the POST request to Remote resource:

The example given below explains how we can perform the post request to remote url using ACD. Along with the remote url there is one more additional parameter called postdata.

  •  Output :

When we run the above code, it will post the data to a third party domain and return the response to js. ACD.responseText method which holds the exact value that the remote server’s output, except for the line-ends. The apostrophe (‘), forward slash (/) and backslash (\) are escaped by a backslash (\). This notation is required for technical reasons and does not affect the string value. The sample output which is returned by the remote server is given below:

Example to show the STATUS of remote server:

When we run the code given below, it will display the Http status code of remote server, which we have given in the URI parameter.

  • Output :

Properties and Methods:

Following are the properties of ACD object.

  • ACD.responseText  (This property returns the full body of response.)
  • ACD.getAllResponseHeaders (This property returns the full header list of response.)
  • ACD.status (This property returns the HTTP status code of request.)
  • ACD.request (This property shows the full request as it was fired to remote resource.)
  • ACD.error (This property shows any errors that might have occurred.)

Conclusion

Now we are ready to access the cross domain via JavaScript code and it can handle the following features

  • Load XML data from a remote web site and access it by JavaScript on our site.
  • Use third-party API’s to display real-time information such as weather, news, status, …
  • Load and parse remote RSS feeds in JavaScript.
  • Set up our communication software between different domains and machines.
  • Use our customized lay-out for data loaded from a remote resource.
  • Examine all sent HTTP headers from remote resources in JavaScript.
  • Load the 3rd party website and enable auto login from our server.
  • Develop a cross-domain chat application

References

4098 Views 4 Views Today