Generally, for the sake of security, the browser does not allow you to access other domains through XMLHttpRequest on the client (refer to connection 1, 2), even the subdomain of the same domain, for example, from www.joycode.com to blog.joycode.com. (You can use some settings to access the subdomain, but because this method is not very common, you will not consider it all, but if you are interested, refer to connection 2 .)
However, it is obvious that in many cases, it is very useful to access other websites and obtain information/services from other websites, especially in the Web 2.0 era.
There are three common cross-site access methods (refer to connection 3, 4 ):
Create a proxy on the server side of the same domain. The browser sends a request to the proxy URL. Then, the proxy sends a request to the URL of another domain. After obtaining a response, for processing or sending back to the browser as is, use the On-Demand Javascript script. Generate a new <script> dynamically on the page and direct its src attribute to the website of another website. The content returned by this website must be a legal Javascript script, which is commonly used for JSON messages. Use IFRAME. Embedded on the page or dynamically generate An IFRAME pointing to another website. Then, the two webpages can transmit messages by changing the anchor hash fragment of the other website. Changing the anchor hash fragment of a Web page does not allow the browser to reload the web page, so the status of a Web page is maintained, and the web page itself can use a timer (timer) to detect the changes in your anchor hash and change your status accordingly (refer to the methods in the history control of Nikhil Kothari mentioned in this post ). Julien Couvreur describes a more complex application in his Cross-document messaging hack,
"....
For example, if you have page A containing an iframe B in a different domain, then B can create a new iframe and load it with a url in the same domain as. the url that is loaded doesnt generate a request to the server if it is properly cached and only the fragment identifier is used to pass changing information. page A can now get the DOM handle on the new iframe and successfully retrieve the info Rmation transmitted in the url by B... "(in general, webpage A contains an iframe B, and webpage B comes from A different domain. Page B can then generate an IFRAME C and point it to an address in the same domain as page A. Because it is in the same domain as page A and Page C, page A can access information in Page C, and vice versa .)
ASP. net ajax extension (Atlas) provides a bridge mechanism for you to configure on the server side to access other websites, and supports both POX and SOAP protocols. For details, see Building Mash-ups with "Atlas" in the Atlas document. Of course, you can create a web service by yourself to access other websites and return information.
It is said that IFrameExecutor in Atlas can implement cross-origin calls, I followed the steps in Calling web services hosted outside of your application with "Atlas" in this post on the MSDN blog Federal Developer Weblog, however, the error message "Access is denied" is displayed on Windows 2003 Server SP1. Then I downloaded the project in this article. The test result is still "Access is denied ". Some browser settings may need to be modified to succeed, but this is not my purpose. I need an example that can be successful under normal settings.
The implementation of the On-Demand Javascript script is very simple. For example, if I have such a webpage (to test it, I need to change the website)
<Html>
<Head>
<Script language = "javascript" type = "text/javascript">
Function loadContent ()
{
Var s = document. createElement (SCRIPT );
S. src = http://www.anotherdomain.com/TestCrossJS.aspx? F = setDivContent;
Document. body. appendChild (s );
}
Function setDivContent (v)
{
Var dv = document. getElementById ("dv ");
Dv. innerHTML = v;
}
</Script>
</Head>
<Body>
<Div id = "dv"> </div>
<Input type = "button" value = "Click Me" onclick = "loadContent ()">
</Body>
</Html>
Here is www.anotherdomain.com/testcrossjs.aspx,
<Script language = "C #" runat = "server">
Void Page_Load (object sender, EventArgs e)
{
String f = Request. QueryString ["f"];
Response. Clear ();
Response. ContentType = "application/x-javascript ";
Response. Write (String. Format (@"
{0} ({1 });",
F,
DateTime. Now ));
Response. End ();
}
</Script>
Click the "Click Me" button to generate a new script tag, download the corresponding Javascript script, and call back setDivContent () to update the content of a div on the webpage.
IFRAME methods seem to be very popular. Apart from the support of the dojo toolkit, according to Microsoft's Dare Obasanjo (refer to connection 9), Windows Live Contacts Gadget uses this method to obtain the address book of Hotmail. Recently, Joseph Smarr, a developer of Plaxo, made a Cross-site Ajax: challenges and Techniques for Building Rich Web 2.0 Mashups [Source: Kevin Yank -- OSCON 2006: Cross-site Ajax]. They made this method a platform, cooperation is allowed between partners. The developed scheme is called The JavaScript Wormhole, which is said to be intended to be promoted as a standard. The PPT of his lecture can be downloaded here. It is worth looking.
The IFRAME method is as follows:
1. html "> http: // domain1/TestCross.html:
<Html>
<Head>
<Script language = "javascript" type = "text/javascript">
Var url = "http: // domain2/TestCross.html"
Var oldHash = null;
Var timer = null;
Function getHash ()
{
Var hash = window. location. hash;
If (hash. length> = 1) & (hash. charAt (0) = #))
{
Hash = hash. substring (1 );
}
Return hash;
}
Function sendRequest ()
{
Var d = document;
Var t = d. getElementById (request );
Var f = d. getElementById (alienFrame );
F. src = url + "#" + t. value + "<br/>" + new Date ();
}
Function setDivHtml (v)
{
Var d = document;
Var dv = d. getElementById (response );
Dv. innerHTML = v;
}
Function idle ()
{
Var newHash = getHash ();
If (newHash! = OldHash)
{
SetDivHtml (newHash );
OldHash = newHash;
}
Timer = window. setTimeout (idle, 100 );
}
Function window. onload ()
{
Timer = window. setTimeout (idle, 100 );
}
</Script>
</Head>
<Body>
Request: <input type = "text" id = "request"> <input type = "button" value = "send" onclick = "sendRequest ()"/> <br/>
Reply: <div id = "response"> </div>
<Iframe id = "alienFrame" src ="Http: // domain2/TestCross.html "> </iframe>
</Body>
</Html>
2. http: // domain2/TestCross.html:
<Html>
<Head>
<Script language = "javascript" type = "text/javascript">
Var url = "http: // domain1/TestCross.html"
Var oldHash = null;
Var timer = null;
Function getHash ()
{
Var hash = window. location. hash;
If (hash. length> = 1) & (hash. charAt (0) = #))
{
Hash = hash. substring (1 );
}
Return hash;
}
Function sendRequest ()
{
Var d = document;
Var t = d. getElementById (request );
Var f = parent;
// Alert(f.doc ument); // try to remove this comment and you will get "Access is denied"
F. location. href = url + "#" + t. value + "<br/>" + new Date ();
}
Function setDivHtml (v)
{
Var d = document;
Var dv = d. getElementById (response );
Dv. innerHTML = v;
}
Function idle ()
{
Var newHash = getHash ();
If (newHash! = OldHash)
{
SetDivHtml (newHash );
OldHash = newHash;
}
Timer = window. setTimeout (idle, 100 );
}
Function window. onload ()
{
Timer = window. setTimeout (idle, 100 );
}
</Script>
</Head>
<Body>
Request: <input type = "text" id = "request"> <input type = "button" value = "send" onclick = "sendRequest ()"/> <br/>
Reply: <div id = "response"> </div>
</Body>
</Html>
The two web pages are basically the same. The first web page is embedded with an IFRAME. After you click "send", the content in the text box is transmitted to IFRAME through hash fragment. After you click "send" in IFRAME, it will pass the content in the text box to the parent window through hash fragment. Because only hash fragment and lifecycle are modified.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
