How to Implement Ajax cross-origin?

Source: Internet
Author: User
Tags subdomain

How to Implement Ajax cross-origin?

Ajax Introduction

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

AJAX is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Next step into the question

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, the real asynchronous request still occurs under the domain name 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 loaded. If the loading is complete, the AjaxProxy is obtained. the global variable value of aspx. Then perform other operations.

Here is a problem: I used to plan to use AjaxProxy. after the aspx ajax request is complete, call the parent method and return the data at the same time. However, in IE, the "permission denied" error will appear when you click the first time, 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 a page under 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").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 ").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.

The above section describes how to implement Ajax cross-origin. I hope it will be helpful to 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.