Home > Developer > Web Develop
[Front-end learning notes] native Javascript uses JSONP (common front-end methods) for cross-origin, learning notes jsonp
Ajax cross-origin --------------------------
Cross-origin: When a file under a cross-origin domain name is requested for a resource file under a different domain name from another file, a cross-origin request is generated. This is the cross-origin issue of ajax. Cross-origin resolution: jsonp: json width padding core: 1. script tag 2. there is no cross-origin issue when loading resources with script tags. the script only recognizes the actual content of the file, rather than the suffix. As long as the content is valid, JavaScript can use the process: 1. define a function before the resource is loaded. This function accepts a parameter (the data to be retrieved ), in the file to be loaded, execute this function and pass the data to be retrieved as parameters. 2. when needed, the corresponding remote file resources are loaded using the script tag. When the remote resource is loaded, the defined function is executed, and pass the data to the current file as a parameter. Principle expansion: dynamically load files. For example, after you click to load files, add the script tag to the body in the Click Event and set src of the sciprt as the file address, use the callback parameter after the url to control the method name for calling the method.Instance:
Run the following code in the server environment:
Layout code
<Body> <input type = "button" value = ""/> <ul> </ul> <input type = "button" value = ""/> <ul> </ul> <input type = "button" value = ""/> <ul> </body>JS Code
function fn0(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[0].appendChild(oLi); }}function fn1(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[1].appendChild(oLi); }}function fn2(data){ var aUl = document.getElementsByTagName('ul'); for(var i = 0; i < data.length; i++) { var oLi = document.createElement('li'); oLi.innerHTML = data[i]; aUl[2].appendChild(oLi); }}window.onload=function(){ var aInput = document.getElementsByTagName('input'); var aUl = document.getElementsByTagName('ul'); for(var i=0;i<aInput.length;i++) { (function(i){ aInput[i].onclick=function(){ var oScript = document.createElement('script'); oScript.src = 'data.php?t=num&callback=fn'+i; document.body.appendChild(oScript); } })(i); };}Backend code (php)
// Data. php <? Php $ t = isset ($ _ GET ['T'])? $ _ GET ['T']: 'num'; // The frontend informs the backend of the data to be output, is the output array // $ arr1 or $ arr2 $ callback = isset ($ _ GET ['callback'])? $ _ GET ['callback']: 'fn0'; // dynamically generate a method to call data. You do not have to write it to the background, by default, fn0 is called. // assume that the data is two different arrays $ arr1 = array ('20160301', '20160301', '20160301', '20160301 '); $ arr2 = array ('aaaaaaaaa', 'bbbbbbbbbb', 'ccccccccccccccccc', 'ddddddddddd '); // determine the returned data according to the front-end flag if ($ t = 'num') {$ data = json_encode ($ arr1); echo $ callback. "(". $ data. ")";} else {$ data = json_encode ($ arr2); echo $ callback. "(". $ data. ")";}Copyright Disclaimer: This article is an original article by the blogger. Please leave a message if it is reprinted.
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
