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

##AJAX is "Asynchronous

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

AJAX = Asynchronous JavaScript and XML (a subset of Standard Universal Markup Language).

AJAX is a technology for creating fast, dynamic web pages.

By exchanging a small amount of data with the server in the background, AJAX can enable asynchronous updates of web pages. This means that parts of a web page can be updated without reloading the entire page.

Traditional web pages (not using AJAX) must reload the entire web page if the content needs to be updated.

Let’s get to the point

Two days ago, xz asked me if I knew how to implement cross-domain calls with ajax, because I had never heard of this concept. , so we also know how to implement it. xz said that there are several ways to call Ajax cross-domain. One is the iframe method, which is achieved by setting document.domain, and the other is achieved by setting jsonp. I checked the information in the past two days and wrote a few demos. I will make a note below.

I built three sites locally and set up the host file to simulate cross-subdomains and cross-domains

coolkissbh.com

blog.coolkissbh.com

coolkiss.com

##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

IE 6.0 pops up this page is accessing information that is not under its control. this poses a security risk.do you want to

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

2. Ajax cross-domain implementation Method

#1. Implement ajax across subdomains

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

document.domain = "coolkissbh.com";

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

Illegal document.domain value" code: "1009 error, so only the second method can be used across the entire domain

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.

2, implement ajax across the whole domain

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!