How Ajax cross-domain implementation _ajax related

Source: Internet
Author: User
Tags script tag subdomain

Introduction to Ajax

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

Next step

The first two days XZ asked me if I know how Ajax implements Cross-domain calls, because I haven't heard the concept, so I know how to do it. XZ said that there are several ways of Ajax Cross-domain call, one is the way of the IFRAME, by setting the document.domain to achieve, one is by setting the JSONP to achieve. This two days to check the information, but also wrote a few demo, the following memo.

I built three sites locally and set up a host file to simulate cross domain and Cross-domain

Coolkissbh.com

Blog.coolkissbh.com

Coolkiss.com

First, what's wrong with Ajax Cross-domain calls

Coolkissbh.com the page below using jquery $.get invoke blog.coolkissbh.com page

Cross-domain requests, IE 7 and 8 report access denied error
IE 6.0 pops up this page is accessing information the is isn't under its control. This is poses a security risk.do your want to continue? Prompt box

Firefox doesn't give an error, but doesn't make a request.

Two, the Ajax Cross-domain implementation method

1, cross-domain implementation of Ajax

Requirements: To implement coolkissbh.com page asynchronous request blog.coolkissbh.com under the page

Implementation method: By using the IFRAME, by setting the SRC attribute of the IFRAME, embed a page under blog.coolkissbh.com, such as ajaxproxy.aspx, then request Ajax from the page

After the Ajaxproxy request is completed, the returned data is passed back to the main page of coolkissbh.com through the parent object. Therefore, the true asynchronous request still occurs under the blog.coolkissbh.com domain name

Note: cross-domain AJAX requests implemented in this way require the same domain name to be set on the Coolkissbh.com request page and Ajaxproxy.aspx page, which is
Document.domain = "coolkissbh.com";

Note: The problem with setting domain, if it is across the entire domain, using the above method, Firefox will be prompted
Illegal document.domain value "code:" 1009 Error, so only the second method can be used across the entire domain

Processing the returned data:

Ajaxproxy.aspx the data returned by Ajax to a global variable, coolkissbh.com passes the setinterval to determine whether the page of the IFRAME is loaded or not, and if the load completes, gets the ajaxproxy.aspx global variable value. And then do other processing.

Here is a problem: I originally intended to ajaxproxy.aspx Ajax request completed, call the parent method, while the data back, but in IE, click on the first time will appear "Permission denied" error, again click on the normal. Under Firefox there is no problem, do not know what the reason.

2, implementing Ajax across the entire domain

Requirements: To implement coolkissbh.com page asynchronous request coolkiss.com under the page

Implementation method: It is mentioned above that a domain-wide method cannot be implemented by setting domain methods. However, you can use the script tag to do this by setting the SRC attribute of the script label to a page under the coolkiss.com domain name and uploading the callback function to the page, for example:

Requestajax_crosssite = function () {
var obj = $ ("#crossSitePage");
Obj.attr ("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
HANDLEDATA3 = function (data) {
$ ("#ResponseData"). HTML (data);

Crosssite.aspx returns a string that returns the returned data back to callback, executes the callback function, and implements Ajax, for example:

Response.Clear ();
Response.Write (String. Format ("{0} (' {1} ')", request["callback"], responsedata));
Response.End ();

Note: This approach can also be used to deal with problems across subdomain Ajax, but you can't get the various states of Ajax calls like jquery

3, the implementation of Cross-domain Ajax via jquery Jsonp, in fact, is the same as the second approach, which supports cross domain and subdomain

jquery 1.2 Adds a call to Cross-domain Ajax, which is the $.getjson function

The method is invoked as follows:

Below is the page under coolkissbh.com

Use JSONP to implement cross-domain
REQUESTAJAX_JSONP = function () {
var obj = $ ("#crossSitePage");
$.getjson ("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + math.random (), function (data) {
//alert ( data);
$ ("#ResponseData"). HTML (data.content);
});

Coolkiss.com the spooler code to pass a JSON object to callback:

public partial class CrossSite:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
{
loaddata_jsonp ();
}
}
protected void Loaddata_jsonp ()
{
string responsedata = "{content:\" Hello World from Coolkiss.com\ "}";
if (request["callback"]!= null &&!string. IsNullOrEmpty (request["callback"]))
{
response.clear ();
Response.Write (String. Format ("{0} ({1})", request["callback"], ResponseData));
Response.End ();}}

Callback=? which are automatically replaced with the function (data) functions.

The above is a small set to introduce the Ajax Cross-domain how to achieve the relevant knowledge, I hope to help you!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.