Cross-origin ajax implementation

Two days ago, xz asked me if I knew how ajax implemented cross-origin calls. Because I have never heard of this concept, I also knew how to implement it. Xz says there are several methods for ajax cross-origin calls. One is iframe, which is implemented by setting document. domain, and the other is implemented by setting jsonp. I checked the materials and wrote several demos over the past two days.

I have created three local sites and set up the host file to simulate cross-subdomain and Cross-Domain

Coolkissbh.com

Blog.coolkissbh.com

Coolkiss.com

 

I. What are the problems with ajax cross-origin calls?

Use $. get of jquery to call the blog.coolkissbh.com page under coolkissbh.com

 

Cross-origin request. An access denied error is reported in IE 7 and 8.
In IE 6.0, this page is accessing information that is not under its control. this poses a security risk. do you want to continue? Prompt box

Firefox does not report an error, but does not make a request

 

Ii. Cross-origin ajax implementation

1. Cross-subdomain ajax implementation

Requirement: Implement coolkissbh.com asynchronous page request for pages under blog.coolkissbh.com
Implementation Method: With iframe, embed a page under blog.coolkissbh.com, such as AjaxProxy. aspx, by setting the src attribute of iframe, and then request Ajax from the page
After the AjaxProxy request is complete, return the returned data to the home page of coolkissbh.com through the parent object. Therefore, real asynchronous requests still occur.
Under the domain name of blog.coolkissbh.com

Note: For cross-subdomain ajax requests implemented using this method, you must set the same domain name on the coolkissbh.com request page and the AjaxProxy. aspx page, that is
Document. domain = "coolkissbh.com ";

Note: If the domain is set across domains, a message is displayed in firefox when the above method is used.
Illegal document. domain value "code:" 1009 error. Therefore, you can only use the second method across regions.

Process the returned data:

AjaxProxy. aspx saves the data returned by ajax to a global variable. coolkissbh.com uses setInterval to determine whether the iframe page is fully loaded.
If the load is complete, obtain the global variable value of AjaxProxy. aspx. Then perform other operations.

Here is a problem: I used to call the parent method after the ajax request of AjaxProxy. aspx is completed, and the data is returned at the same time. However, in IE, When I click the first time
The "permission denied" error will occur, and it will be normal to click again. There is no problem in firefox. I don't know why.

2. Cross-Domain Implementation of ajax
Requirement: Implement coolkissbh.com asynchronous page request for pages under coolkiss.com
Implementation Method: As mentioned above, cross-domain cannot be implemented by setting the domain method. However, you can use the script tag to set the src attribute of the script tag to the coolkiss.com domain name.
And upload 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" pai.html (data );
}
Crosssite. aspx returns a string, returns the returned data to callback, and executes the callback function to implement Ajax. For example:

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

Note: This method can also be used to handle cross-subdomain Ajax issues, but it cannot obtain the various states of Ajax calls as jquery does.

3. Use jquery's jsonp to implement cross-domain Ajax. In fact, the principle is the same as that of the second method, supporting cross-domain and sub-domain

After jquery 1.2, a cross-origin Ajax call is added, that is, the $. getjson function.
The call method is 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" pai.html (data. content );
});
}

 

Coolkiss.com processes the code in the background and passes 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 =? Where? It is automatically replaced with the function (data) function.

 

Source code