Ajax cross-domain implementation method

This time I will bring you the implementation method of Ajax cross-domain. What are the precautions for Ajax cross-domain implementation? The following is a practical case, let’s take a look.

Introduction to ajax

Javascript And XML" (Asynchronous JavaScript and XML) refers to a web development technology for creating interactive web applications.

Let’s get to the point

##1. What are the problems with ajax cross-domain calls? The page under coolkissbh.com uses jquery’s $. get calls the blog.coolkissbh.com page

Cross-domain request, IE 7 and 8 report access denied error

continue
?Prompt boxfirefox does not report an error, but will not make a request

2. Ajax cross-domain implementation Method

Requirements: Implement the page of coolkissbh.com to asynchronously request the page under blog.coolkissbh.com

Implementation method: With the help of iframe, by setting the src attribute of the iframe, embed a page under blog.coolkissbh.com, such as AjaxProxy.aspx, and then use the page to request Ajax

AjaxProxy request After completion, the returned data is sent back to the main page of coolkissbh.com through the parent object. Therefore, the real asynchronous request still occurs under the domain name of blog.coolkissbh.com

Note: The cross-subdomain ajax request implemented through this method needs to be on the request page of coolkissbh.com and the AjaxProxy.aspx page Set the same domain name in

Note: Regarding the issue of setting domain, if it is across the whole domain, when using the above method, firefox will prompt

Process the returned data:

AjaxProxy.aspx will return the data from ajax Save it to a global variable. coolkissbh.com uses setInterval to periodically determine whether the iframe page is loaded. If the loading is completed, obtain the global variable value of AjaxProxy.aspx. Then do other processing.

There is a problem here: I originally planned to call the parent method after the ajax request of AjaxProxy.aspx is completed, and return the data at the same time, but under IE, the "permission" will appear the first time I click denied" error, click again and it will be normal. There is no problem in Firefox, I don't know why.

Requirements: Asynchronous request of the page of coolkissbh.com to the page under coolkiss.com

Implementation method: above It is mentioned that cross-domain cannot be achieved by setting the domain method. But it can be achieved using the script tag. By setting the src attribute of the script tag to a page under the coolkiss.com domain name, and passing 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, passes the returned data back to the 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 method can also be used to deal with cross-subdomain ajax issues, but it cannot obtain the various statuses of ajax calls like jquery.

3, realize cross-domain ajax through jquery’s jsonp Domain ajax, in fact, the principle is the same as the second method, supporting cross-domain and sub-domains

After jquery 1.2, a call to cross-domain ajax was added, which is the $.getJSON function

The calling method is as follows:

The following is the page under coolkissbh.com

//使用jsonp实现跨全域
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 background processing code, passing a json object to the 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? It will be automatically replaced by the function(data) function.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How JSONP handles Ajax cross-domain access

Jump login immediately after Ajax+Session fails page

The above is the detailed content of Ajax cross-domain implementation method. For more information, please follow other related articles on the PHP Chinese website!