Have you ever wanted to display content from another domain into you site using client side scripts? At this moment you may already know it is not possible make ajax request to a different domain or subdomain using javascript, since it violates the same origin policy
Luckily, there is a work around to it.
You can achieve this by including a proxy page that is dedicated to making a server side request to the intended page in the other domain and return the contents retrieved as its own content. How cool is that? J
Then you can make ajax request to the proxy page using jquery and further filter the content using selectors and integrate it into your Page.
The code below demonstrates how to load content from www.example.com .
Proxy page: uses System.Net classes to make http request and receive the response .If the request is successful, i.e. Status Code is 200, and it will read the response stream from the cross domain request and return the content read in its response.
Proxy.aspx.cs:
using System;
using System.IO;
using System.Net;
namespace CrossDomainPageRequestSample
{
public partial class Proxy : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// ‘loadUrl‘ is the address to the page in the other domain
var url = Request.QueryString["loadurl"];
// create a request
HttpWebRequest request = (HttpWebRequest)
WebRequest.Create(url);
// make the request
var response = (HttpWebResponse)request.GetResponse();
// we will read data via the response stream
if (response.StatusCode == HttpStatusCode.OK)
{
var contentReader = new StreamReader(response.GetResponseStream());
Response.ContentType = response.ContentType;
Response.Write(contentReader.ReadToEnd());
}
}
}
}
Proxy.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Proxy.aspx.cs" Inherits="CrossDomainPageRequestSample.Proxy" %>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
head>
<body>
<form id="form1" runat="server">
<div>
div>
form>
body>
html>
DefaultPage:
This page makes Ajax request to the Proxy page and filters the content returned and appends to the div with id ‘otherSiteContent’.
$('#otherSiteContent').load('proxy.aspx?loadurl=http://www.example.com/ #header', function () { });
Default.aspx
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="CrossDomainPageRequestSample._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
script>
<script type="text/javascript">
$(document).ready(function () {
// the script below loads the proxy page and further applies id selector #header and appends the content to
// the div #otherSiteContent
$('#otherSiteContent').load('proxy.aspx?loadurl=http://www.example.com/ #header', function () {
});
});
script>
asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
div>
Page Content from the other site goes below
<div id="otherSiteContent">
div>
asp:Content>
DefaultPage.aspx.cs
using System;
namespace CrossDomainPageRequestSample
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
No comments:
Post a Comment