title: Load webpage from different domain
body: <p>I am creating a sample project in MVC.
  Suppose I have two projects A and B.
  In project A I have a javascript file which takes index page of <code>project A</code>  and put it in a div having id <code>Widget</code>.</p>
  
  <p>In <code>project B</code> index page I have a reference to the javascript file of project A and a div with id <code>Widget</code>.</p>
  
  <p>On page load I want to load <code>Project A's index page</code> to <code>Project B's Widget Div</code>. </p>
  
  <p>Here is my code </p>
  
  <pre><code>Project A
  
  Index.cshtml (Index view)
  
  @{
  ViewBag.Title = "Index";
  }  
  &lt;h2&gt;Index&lt;/h2&gt;
  &lt;div id="data"&gt;Thi is index page.&lt;/div&gt;
  
  Widget.js (JavaScript file)
  
  $(document).ready(function (e) {
  $('#widget').load('/Home/Contact', function (response, status, xhr) {
      if (status == "error") {
          var msg = "Sorry but there was an error: ";
          alert(msg + xhr.status + " " + xhr.statusText);
      }
  });
  };
  </code></pre>
  
  <p>Here is another project</p>
  
  <pre><code>Project B
  
  Index view which call the project A's index view
  @{
  ViewBag.Title = "Index";
  }
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://localhost:2455/Scripts/Widget.js"&gt;&lt;/script&gt;
  
  &lt;div id="widget"&gt;&lt;/div&gt;
  
  &lt;div&gt;Project B Index&lt;/div&gt;
  </code></pre>
  
  <p>Above sample code display index view of Project B while I want to display index view of Project A</p>