The implementation principle of JSONP in native JavaScript

Ajax cannot cross domains, Jsonp can cross domains The core idea of cross-domain: called (the interface to get), the definition (JSONP core processor) is a different script tag inside the cross script fetch data ( only get the data from the Fetch method )Jsonp incoming data is {URL: ', data:{cbname= ' CB ', (according to the interface established naming specification, some things called callback) Wd= ' aaa ', ... (after which the data will be string concatenation)},success:function (result) {}} One: Set default state (fault tolerant processing)json=json| |     {};     if (!json.url) return; Json.data.cbname=json.data.cbname | | '     CB '; json.data=json.data| | {}; Two: Function name do clear cache processingJson.data[json.data.cbname]= ' show ' +math.random (); Json.data[json.data.cbname]=json.data[json.data.cbname].replace ('. ', '); Third: Data is converted into a stringfor (var name in json.data) {Arr.push (name+ ' = ' + encodeURIComponent (Json.data[name])); } var str=arr.join (' & '); Four: Define processing data function return callback functionWindow[json.data[json.data.cbname]]=function (Result) {success&&success (result); Oh.removechild (OS);//Data acquisition after deleting OS}; Five: Store data into script, get call interfacevar oh=document.getelementsbytagname (' head ') [0];     var os=document.createelement (' script '); os.src=json.url+ '? '     +STR; Oh.appendchild (OS); 1. Save the received data in a script with its src= "Https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show" Here is the equivalent of the data call where its true face is: show ({q: "ABB", p:false,s:["ABB inverter", "ABB Motor", "ABB Inverter accessories", "Abby", "BBS", "ABB-style words", "abbyy", "ABBA", "ABB CONTACTOR", "Abbs Building Forum"]}); 2. Define function Show (JSON) {json.s//data is an array: ["ABB Inverter", "ABB Motor", "ABB Inverter accessories", "Abby", "BBS", "ABB-type words", "abbyy", "ABBA", "     ABB CONTACTOR "," Abbs Architecture Forum "]}function JSONP (url//data parameter) {//Save data to address to new script Var oh=document.getelementsbytagname (' head ') [0];     var os=document.createelement (' script '); Oh.appendchild (OS);} Called when an event is triggered: JSONP (url//data address argument);  1. Get Jsonp interface       get Baidu Search interface steps           1.f12        &NBSP ; 2.network== Find the Beginning is Su's file, and the keyword is the corresponding           3.https://sp0.baidu.com/ 5a1fazu8aa54nxgko9wtanf6hhy/su?wd=abb&json=1&p=3&sid=18285_1423_17948_18205_17001_17072_15711_ 12291_18086_18016&csor=3&cb=jquery110207279864843003452_1456310625782&_=1456310625787          4. Delete unused information           5. Address: https://sp0.baidu.com/ 5a1fazu8aa54nxgko9wtanf6hhy/su?wd=abb&cb=showwd             word    and nbsp     Keywords cb             callback      callback function       &N Bsp   6. The data from the address into the browser is:               show ({q: "ABB", p:false,s:[" ABB inverter "," ABB Motor "," ABB Inverter accessories "," Abby "," BBS "," ABB-type words "," abbyy "," ABBA "," ABB Contactors "," Abbs Architectural Forum "]});      &nbsp        JSONP provides a data interface equivalent to a calling function                 So you need to define a function in a cross-domain show          address interface is equivalent to getting these data   NOTE: 1. You can use the   2.JSONP callback function, Must be global   

The implementation principle of JSONP in native JavaScript