Use src of script to implement cross-origin and ajax-like effects, srcajax

Use src of script to implement cross-origin and ajax-like effects, srcajax

Scenario

If there are two servers with different domain names, a.com and B .com, some data can be obtained from the B .com/ B _return_js.php interface. Of course, if it is a B .com page, you can use ajax to directly request this interface, but if it is a request on the.com page.

B _return_js.php interface code:

Copy codeThe Code is as follows:
$ A = array (
Array ('username' => 'Tony ', 'age' => 25 ),
Array ('username' => 'imeng', 'age' => 23 ),
Array ('username' => 'ermeng', 'age' => 22 ),
Array ('username' => 'sanmeng', 'age' => 21 ),
);
Shuffle ($ );

Echo 'var userdata = '. json_encode ($ ). '; // generally, if it is a B .com site request, json_encode ($ a) is returned directly, but if you want to use the src attribute to implement cross-origin, here, we need to assign this value to a js variable to ensure that the data can be obtained and used on the page after the script tag is loaded.

Simple implementation

A simple method is to directly

Copy codeThe Code is as follows:
<Script src = "http:// B .com/ B _return_js.php"> </script>

In this way, the data returned from this interface can be directly obtained on the.com page.
However, there is a defect here that this data can only be obtained when the page is loaded. If we want to use ajax to obtain new interface data at any time, it is not suitable, for example, if you click a button to obtain partial data refresh from this interface, This method may be inappropriate.

Ajax-like implementation

In fact, the idea of implementing the above ajax-like method is to re-generate the above tag when the ajax condition is triggered, and then obtain data from the interface again, but it is actually a little difficult to implement (at least it takes a lot of effort for me ).

Code:

Suppose there is a button under the page a.com/scriptsrc.php

<Input type = "button" id = "ajax_request_from_ B" value = "requests from B .com"/>
Data will be retrieved from the B .com/ B _return_js.php interface each time you click, similar to the ajax implementation code:

Copy codeThe Code 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 (){

// This script tag needs to be reloaded every time. Therefore, a new script tag must be generated each time to ensure that data can be retrieved from the cross-origin server.
If (ele & ele. parentNode)
{
// Ele. parentNode. removeChild (ele); // such deletion cannot completely remove ele from the memory, but only removes the location in the dom.
For (var property in ele ){
Delete ele [property]; // delete permanently
}
}
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. User information is obtained randomly.
});

In this way, every time you click a button, you will retrieve the data from the interface again. The effect is similar to ajax. However, this is a cross-origin JavaScript method. Although it is a bit thankless, it is a way of thinking.