| URL | Description | whether to allow communication |
|---|---|---|
| Http://www.a.com/a.js Http://www.a.com/b.js |
Under the same domain name | Allow |
| Http://www.a.com/lab/a.js Http://www.a.com/script/b.js |
Different folders under the same domain name | Allow |
| Http://www.a.com:8000/a.js Http://www.a.com/b.js |
Same domain, different port | Not allowed |
| Http://www.a.com/a.js Https://www.a.com/b.js |
Same domain, different protocol | Not allowed |
| Http://www.a.com/a.js Http://70.32.92.74/b.js |
Domain name and domain name corresponding IP | Not allowed |
| Http://www.a.com/a.js Http://script.a.com/b.js |
Primary domain is the same, subdomain is different | Not allowed |
| Http://www.a.com/a.js Http://a.com/b.js |
Same domain name, different level two domain name (IBID.) | Not allowed (cookies do not allow access in this case) |
| Http://www.cnblogs.com/a.js Http://www.a.com/b.js |
Different domain names | Not allowed |
The problem we have to solve now is to turn these into permits ... JS cross-domain
1, why there are cross-domain.
In simple terms, when you send an ajax request, you will encounter a JS cross domain
As you know, when you send Ajax, you use the XMLHttpRequest object, but in order to be secure, the browser object is restricted, not allowed to communicate in the table above ...
So, as long as you don't use the XMLHttpRequest object to send an AJAX request, there is no cross-domain restriction problem.
2, do not use Ajax to send requests, but to achieve the effect of local refresh how to do.
Suppose the requested Web page is local 1.html
Dynamically loading JS
var script = document.createelement ("script"); Script.type = "Text/javascript"; SCRIPT.SRC = "http://bbb.com"; var head = document.getElementsByTagName ("head") [0]; Head.insertbefore (script, head.firstchild);
After this code is completed, the response to this address is added to the head tag, http://bbb.com, for example:
If http://bbb.com this address returns a string of 123, the result of the current call page is
<script src= "http://bbb.com" type= "Text/javascript" >
123
</script>
<body>
</body>If http://bbb.com this address returns test ("CCC"), then the result of the current call page is
<script src= "http://bbb.com" type= "Text/javascript" >
Test ("CCC");
</script>
<body>
</body>See here should understand, in fact this dynamic load JS code just another page of the content loaded into this page
Now the page is running with an error, the test method is missing because no test is defined, we add the test method at the local 1.html
Well, 1.html is the final look, the order of execution is:
1. Initialize test method first
2. Create a script tag, load the contents of the http://bbb.com, and insert the return result into the head label
3. Return result is test ("CCC") called the test method, it printed out CCC
3. Can not use the dynamic creation of the script, how to feel useless.
It's perfectly OK.
So write effect is the same, not to say that the dynamic load script tag is Cross-domain, here is a misunderstanding oh ~
So why use the dynamic load script tag?
There are two reasons:
1.SRC dynamic change, do not write dead.
2. Asynchronous loading. If SRC needs to load content to return slower results, dynamically creating a script tag is asynchronously loaded without blocking.
JS across the domain has been made clear, let's look at the cross domain of jqueryjquery cross-domainWe all know that jquery is written by JS, so do not see the source code also know that it is the principle of the above we said JS cross-domain principle we mainly say $.ajax, using jquery students must have used this method, the package is very good, easy to use jquery1.2 added jsonp This parameter type to support the Cross-domain of jquery, example: $.ajax ({
URL: "Http://bbb.com",
Type: "Get",
Data:{p1:1,p2:2},
DataType: "Jsonp",
JSONP: "Callback",
Success:function (AAA) {
Console.log (AAA);
}
}); You can complete a cross-domain Ajax request simply by writing red content in the normal Ajax code. Is it convenient to use O (∩_∩) o~
what are the advantages and disadvantages of JS Cross-domain and jquery cross-domain.
jquery has encapsulated all of the calls into objects, calling it very convenient to write the JS across the domain more trouble, especially when passing parameters, the need to manually splice data? &p1=1&p2=2 but jquery has a bug across the domain, When a large number of simultaneous requests return results, it can result in the loss of a partial callback request (which has actually been sent successfully) when the request is received:
This is a very common situation where you are looping through an AJAX request. Non-Cross-domain requests This is not a problem, success will be called 100 times, but when datatype: "JSONP", success may only perform 70 times 80 times, the remaining requests did not succeed or failed, with complete also caught. The browser will complain that the callback is not found, or there is no hint. There are two places that can cause this problem.1.callback is cleared, so sometimes you can not find the callback this method 2.xmlhttp.readystate==4 send the request at the same time, the browser state only such a readyState when the browser know has been obtained return results, I'm not going to receive the request. This is definitely jquery bug, use JS cross domain no problemclean-up function jqxhr.always (function () { //Set callback back to previous value window[Jsonpcallback] = Previous; Call if it is a function and we have a response if (Responsecontainer && jquery.isfunction (previous)) { window[jsonpcallback] (responsecontainer[0]); } );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
