Scene
If there are two servers with different domain names, a.com and b.com, in the b.com/b_return_js.php interface, some data can be obtained. Of course, if it is on the b.com page, you can use ajax to directly request this interface, but what if it is requested on the a.com page.
Interface code of b_return_js.php:
The code copy is as follows:
$a = array(
array('username'=>'tony', 'age'=>25),
array('username'=>'yimeng', 'age'=>23),
array('username'=>'ermeng', 'age'=>22),
array('username'=>'sanmeng', 'age'=>21),
);
shuffle($a);
echo 'var userdata = '.json_encode($a).';'; // Generally, if it is a site request from b.com, it will directly return json_encode($a). However, if you want to use the src attribute to achieve cross-domain, here we need to assign this value to a js variable to ensure that this data can be obtained and used in the page loaded by the script tag.
Simple implementation
There is an easy way to go directly on the page under a.com
The code copy is as follows:
<script src="http://b.com/b_return_js.php"></script>
In this way, the data returned in this interface can be directly obtained from the a.com page.
But there is a flaw here. This data can only be obtained when the page is loaded. If we want to use ajax, the method that can obtain new interface data at any time is not very suitable. For example, clicking a button to obtain data partially refreshed from this interface, this method is somewhat inappropriate.
Class ajax implementation
In fact, the idea of implementing the ajax class mentioned above is to regenerate the above tag when the ajax condition is triggered, so as to obtain data from the interface again. However, in fact, it is still a little difficult to implement (at least it took a lot of effort for me).
On code:
If there is a button under the a.com/scriptSrc.php page
<input type="button" id="ajax_request_from_b" value="Request from B.com"/>
Each click will get data from the b.com/b_return_js.php interface, similar to ajax implementation code:
The code copy is as follows:
function createScript()
{
//console.log(ele);
ele.src = 'http://b.com/b_return_js.php';
ele.type = 'text/javascript';
ele.language = 'javascript';
}
function getData()
{
console.log(userdata);
}
$('#ajax_request_from_b').click(function(){
//The script tag needs to be reloaded every time, so a new script tag must be regenerated every time to ensure that data can be obtained from the cross-domain server.
if(ele && ele.parentNode)
{
//ele.parentNode.removeChild(ele); //This kind of deletion cannot completely delete ele from memory, but only remove the location in the dom
for (var property in ele) {
delete ele[property]; //Delete completely
}
}
ele = document.createElement('script'); //This is a new ele
createScript();
document.getElementsByTagName("head")[0].appendChild(ele);
ele.onload = function(){getData()}; //The userdata can be obtained after the script element is loaded. Each time the user information is obtained in a random order.
});
In this way, every time you click the button, you will get the data from the interface again, and the effect is similar to ajax, but this is a cross-domain method of JS. Although it is a bit thankless, it is still a way of thinking.