JavaScript cross-domain request and JSONP request instances

<script type= "Text/javascript" src= "./whenready.js" ></script><script type= "Text/javascript" >/** * One: Cross-domain Request * * This common JavaScript module queries all <a> elements that have an href attribute but no title attribute * and register them with the onmouseover event handler * This event handler uses XMLHttpRequest Head request details of the linked resource * Then set these details as the link's Title property * So they will show */whenready (function () {///If there is a chance to use cross-domain request var supportcors = (new XMLHttpRequest ()). Withcredentials!==undefined;//Traverse all links in the document var links = document.getelementsbytagname (' a '); for (Var i = 0; i < links.length; i++) {var link = links[i];if (!link.href) continue;//skip anchor if no hyperlink if (link.title) continue;//Skip link already has tooltip//If this is a cross-domain link if ( Link.host!== Location.host | | Link.protocol!== location.protocol) {link.title = "off-site link";//Suppose we can't get any information if (!supportcors) continue;//exit if there is no cors support Otherwise, we can learn more about this link//So go ahead and register the event handler, so we can try to}//register the event handler when the mouse hangs up to download the link details if (link.addeventlistener) Link.addeventlistener ("MouseOver", Mouseoverhandler,false); Elselink.attachevent ("MouseOver", Mouseoverhandler);} function Mouseoverhandler (e) {var link = E.tarGet | | E.srcelement; <a> element var url = link.href;//link urlvar req = new XMLHttpRequest ();//Request Req.open ("HEAD", url);// Just ask for header information Req.onreadystatechange = function () {///event handler if (Req.readystate!== 4) return;//if not completed, return directly if (Req.status ===200) {//If successful var type = Req.getresponseheader ("Content-type");//Get the details of the link var size = req.getresponseheader ("Content-length" var data = Req.getresponseheader ("last-modified");//display details in tooltips link.title = "type:" +type+ "\ n" + "size:" +size+ "\ n" + "Time: "+date;} else{//if the request fails and the link does not have an "off-site link" tooltip//Then this error is displayed if (!link.title) Link.title = "couldn ' t fetch details:\n" +req.status+ "" + Req.statustext;}}; Req.send (null);//Remove Handler, only want to get these header information once if (Link.removeeventlistener) Link.removeeventlistener ("MouseOver", Mouseoverhandler,handler); Elselink.detachevent ("onmouseover", Mouseoverhandler);}); * * II: Send an HTTP request with <script>: JSONP * sends a JSONP request based on the specified URL * and then passes the parsed response data to the callback function * Add a query parameter named JSONP at the URL, The name of the callback function that specifies the request */function Getjsonp (url,callback) {//Creates a unique callback function name for this request var cbnum = "CB" +getjsonp.counter+++;//perSelf-increment counter var cbname = "Getjsonp." +cbnum;//as a property of the JSONP function//Add the callback function name to the query portion of the URL as a form encoding//using JSONP as the parameter name, some services that support JSONP//may use other parameter names, such as: Callbackif ( Url.indexof ("?") = = = 1)//url no query part url+= "? jsonp=" +cbname;//add parameter as query part else//otherwise URL + = "&jsonp" +cbname; Add it as a new parameter//create a SCRIPT element to send the request var script = document.createelement ("script");//define the callback function that will be executed by the script getjsonp[cbnum] = Function (response) {Try{callback (response);//processing response data}finally{//Even if the callback function or response throws an error deletegetjsonp[cbnum];// Delete to function script.parentNode.removeChild (script);//Remove Script Element}};//Immediate departure http request SCRIPT.SRC = url;// Set the script's urldocument.body.appendChild;//Add it all in the document}getjsonp.counter = 0;//counter to create a unique callback function name </script>

　　

JavaScript cross-domain request and JSONP request instances