Implementation of Ajax cross-domain request based on IFRAME to get Ajax data _ajax related to Web pages

As we all know, in the case of different domains can not send AJAX requests, the browser will report the following error:

At the same time, there is no cross-domain communication in the embedded IFrame, that is, the IFRAME in different domains cannot read data to each other (of course, the hash change can be used to pass data from the parent window to the sub iframe, but it doesn't make any sense). When an IFRAME communicates across domains, the browser reports the following error:

In fact, both of these problems are caused by Cross-domain cross domain.

here's how to solve this problem .

In fact, the crux of the problem is that the browser to resolve the AJAX request address and the current page is compared to the address, if it is cross-domain, it is prohibited and error. So if we let the browser resolve the Ajax address and the current page resolution address, the browser will not prohibit our request.

So how does a browser parse a URL?

First, when the browser accesses a domain name, it queries the local DNS cache for the corresponding IP address of this URL, and if so, gets the IP address directly from the local and then accesses it, if not, The browser sends a DNS request to the DNS server to obtain the IP address of the domain name and then stores the local cache and then accesses it.

So between the above questions, we simply forge a domain name in the local resolution, and then through the forged domain and target domain for Cross-domain request is not OK.

Open C:\Windows\System32\drivers\etc under Windows
This folder has a Hosts file, if the revised hosts to Google's students should be familiar with this, in the hosts file with such a code:

127.0.0.1 A. target Web site. com

So your visit a. target Web site. com is just like visiting localhost, the purpose of this is to facilitate the use of local services, there will be no cross-domain problem between the local service and the domain name of the target, so that a cross-domain request can be made locally to the target domain by embedding an IFRAME tag in the target Web page to obtain the target domain's Data.

Directly on the code (with jquery)

scripting code, inserting directly into the parent domain

var mysrc = "http://a. Target URL. com:9000/myiframe.html";

document.domain = "Destination URL. com";  Critical code to elevate the domain to the root domain

$ ("Body"). Append (' <iframe src= ' + mysrc + ' name= ' myiframe ' id= ' getData ' ></frame> ');  Inserts an IFRAME var interval to the destination Web page

;

function Start () {
 $ ("#getData"). attr ({"src": mysrc});
 Interval = setinterval (function () {
  window.myIframe.run (getlogitic);//Shangzi domain incoming callback function  
 },10000)
}

function Stop () {
 clearinterval (interval);
}

function Getlogitic (orderId) {
 $.ajax ({
  URL: '/query? ') + orderId + ' &id=1&valicode=&temp= ' + math.random (), Method
  : ' Get ',
  success:function (res) {
   Console.log (res);    You can then invoke the child domain's method to transfer data to the local file
  },
  error:function (err) {
   console.log (' err: ', err;
}}}}

HTML code in IFRAME

<! DOCTYPE html>
 
 

Attention:

Only if the IFRAME is elevated to the root domain to communicate with the parent window, the ear document.domain instruction can only elevate the current domain to the current root domain, which is why the local hosts file must be modified, which is the root of the cross-domain problem.
Before grabbing the target page data, look at the way the target page sends the AJAX request, get the requested API, insert the script through the console of the target page, and then run, get the data that you want to get, and send it to the local by the way of the local request.
The following is the process of capturing logistics information in a Logistics Query Web page:

• Painted as the target URL; this is to insert my script into the target Web page, and the page will be inserted with an IFRAME with the same address as local, but with the same domain name and target domain.

Results

This data can be passed back to the local when the request succeeds.

For more highlights, please click on the "Ajax cross-Domain technology summary" for in-depth study and research.

In fact, small series is also the front end, but also in the study and exploration, hoping to learn and progress together.