Home > Developer > Web Develop
Homologous
1, the basic concept: the same-origin strategy is a browser security policy, so-called homology refers to the domain name, protocol, the port is exactly the same.
//allow communication under the same domain namehttp//Www.a.com/a.jshttp//Www.a.com/b.js//different folders under the same domain name, allow communicationhttp//Www.a.com/lab/a.jshttp//Www.a.com/script/b.js//same domain name, different ports, not allowedhttp//Www.a.com:8000/a.jshttp//Www.a.com/b.js//same domain name, different protocol, not allowedhttp//Www.a.com/a.jsHttps//Www.a.com/b.js//domain and domain name corresponding IP, not allowedhttp//Www.a.com/a.jshttp//70.32.92.74/b.js//primary domain is the same, subdomain is different, not allowedhttp//Www.a.com/a.jshttp//Script.a.com/b.js//same domain name, different level two domain name (IBID.), not allowedhttp//Www.a.com/a.jshttp//A.com/b.js//different domain names, not allowedhttp//Www.cnblogs.com/a.jshttp//Www.a.com/b.js
Cross-domain
1, cross-domain is very dangerous
2, iframe tag src attribute can get external Web site DOM Object
3, cross-domain and can be used, from other websites to receive some very useful data
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>Body{Background-color:Yellow; } </style></Head><Body><H1>I'm an insider.</H1><inputtype= "text"value= "123"></Body></HTML>
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style>Body{Background-color:Green; } </style></Head><Body><H1>I am the external</H1><iframesrc= "15-inner.html"></iframe><Script> variframe=Document.queryselector ('iframe'); varinnerdocument=iframe.contentWindow.document; Console.log (innerdocument);</Script></Body></HTML>
Core Ideas
1, because the browser prohibits cross-domain access, but can be cross-domain through the SRC attribute
2. Add a PHP address to the SCR attribute of the script tag, and the page load will send a GET request automatically
3, fetch the data: The server gets the parameters passed by the GET request, and then returns back, and then uses string concatenation to pass the JSON data past, when it is a function name + argument form passed to the page
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body><Script> functionsay (data) {Console.log (data); Console.log (data.name);//WqConsole.log (data.age);// - }</Script><!--a GET request was sent -<Scriptsrc= "Files/07.php?callback=say"></Script></Body></HTML>
<? PHP $str= ' {name: ' Wq ', age:17} '; Echo $_get [' Callback ']. ' (‘. $str. ') ' ;? >4, jquery in the asynchronous method has helped us to encapsulate a jsonpcallback, can be callback=jsonpcallback stitching into the URL, except post
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body><inputtype= "button"value= "Ajax Send Jsonp"><Scriptsrc= "Js/jquery.min.js"></Script><Script> functionsay (data) {Console.log (data); } $(function () { $('input'). Click (function() {$.ajax ({URL:'files/08.php', DataType:'Jsonp', type:'Post', Success:function(data) {Console.log (data); }, Jsonpcallback:'say' }); }); });</Script></Body></HTML>
<? PHP $str= ' {name: ' Wq ', age:17} '; Echo $_get [' Callback ']. ' (‘. $str. ') ' ;? >// {name: "Wq", age:17} // {name: "Wq", age:17}Return two rows of data, it can be found that the Jsonpcallback parameter is say, one is called the Say method, one is the success of successful printing after the transfer of data
ajax--Cross-domain access
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
