jquery cross-domain access problem solution (notes)_jquery

In the past two days, it is necessary to implement direct url rewrite of the third-level domain name to the static page of the website, such as http://123.456.789.com/ UrlRewrite to http://www.789.com/news/123.html

Speaking of which, it may not have anything to do with js cross-domain access. The questions that come to mind are all related to UrlRewrite. Okay, now everything is ready for URLRewrite. Enter http://123.456.789.com/ directly in the browser address bar. You will find that this comes directly through http://www.789.com/news/123.html in the address bar. Something went wrong with the page I visited, and the images, styles, and JS on the web page seemed to have lost their function.

Looking at the URLs in the two address bars, I suddenly patted myself on the head and got some ideas. It turns out that the source code of this page requests images, CSS, and JS through relative paths. Of course, this will not be a problem when accessing the path of http://www.789.com/news/123.html directly, but when accessing using http://123.456.789.com/, look at the two addresses in the address bar. The obvious path of the URL is completely different. For example, images/1.gif in 1 is equivalent to requesting http://www.789.com/news/1.gif, but in 2 it becomes http://123.456.789. .com/images/1.gif Obviously you will never be able to request this image. Because you will never find this picture under this path. Well, for the sake of simplicity, we will not use the many methods introduced by others on the Internet, but use absolute paths to solve it. Okay, everything looks so natural and smooth. But the real trouble is yet to come.

Up to this point, it doesn’t seem to match our title. Don't worry, one problem will always be solved before a second one pops up.

First of all, let’s talk about my page. This page is made static through the program. However, some changing information must be displayed in the static page. Many people here may think of using IFRAME can solve it, but this solution is not what I want to use. 1. IFRAME is less efficient than other methods, and 2. IFRAME is not friendly to crawling spiders. So here I first used JQUERY's load function to directly request the dynamic page and then displayed the returned dynamic information in the static page. Okay, at this point some friends may already know why this diary is called "jquery cross-domain access problem".

First look at my parameters in the jquery load function $("#head").load("http://www.cnblogs.com/project/ajax.php"{"Action":"head "}); Of course, through the above lessons, the parameters have been changed to $("#head").load("http://www.789.com/project/ajax.php"{"Action":"head" }); However, "jquery.js line 138 is not authorized to be accessed" still appeared. I ran directly to check the juqery line 138. It turned out that there was a problem with the load function (I didn't understand the source code. To be honest, it was too tortured. A bunch of compressed The JS code makes people want to die.) Well, I went to Google on the Internet, and several people’s answers caught my attention. They all said that this is a problem with JS cross-domain operations. JS itself cannot directly operate across domains. Then contact your own third-level domain name URLRewrite and think about the cross-domain issue. The domain under the third-level domain name is 123 under 456 under 789, and the request is under the 789.com domain name. So what is this if it is not cross-domain? suddenly see the light. I'm sure I found the problem.

Continue searching on Google. Many people recommend jquery getJson to be solved using the callback function. Once the principle is solved, we will slowly study it. Haha, continue searching http://blog.ossxp.com/2010/02/462/ The article is very good and helped me a lot. I still follow the example in my own project. Problem solved!

HTML page jquery code

Copy code The code is as follows:

$. getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?",
function(data){ // Parameter 1 passed to the background;
var html = decodeURI (data.str)
$('#head').html(html); //Call the div used to display content
});

Server-side PHP code

Copy code The code is as follows:

$str = "

this is test

";
$arr['str'] = $str;
$json = json_encode($arr); //Use the Json_encode function to process php arrays
echo $_GET['callback']."(".$json.")";

The problem of cross-domain access to the server's dynamic class content through the third-level domain name URLREWRITE to the static page has been successfully solved!