原生javascript封装ajax和jsonp
在我们请求数据时，完成页面跨域，利用原生JS封装的ajax和jsonp：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //ajax 和jsonp 跨域的封装 var $={ //封装ajax，堪比jquery中的ajax ajax:function(option){ //判断输出的async真假 var async=typeof(option.async)==="undefined"?true:option.async; var xhr=null; //判断在各浏览器的请求 if(window.XMLHttpRequest){ // 主流浏览器 xhr=new XMLHttpRequest(); }else if(window.ActiveXObject){ // IE浏览器 xhr=new ActiveXObject("Microsoft.XMLHttp"); } //打开 xhr.open(option.type || "get",option.url,async); xhr.onreadystatechange=function(){ // 请求成功执行的 if(this.readyState==4 && this.status==200){ var data=this.responseText; if(option.dataType=="json"){ // data=JSON.parse(data); data=eval("("+data+")"); } option.success && option.success(data); } }; xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //发送 xhr.send(); }, loadScript:function(url){ //创建一个script标签 var script=document.createElement("script"); script.src=url; //插入到head标签中 document.getElementsByTagName('head')[0].appendChild(script); }, jsonp:function(option){ //利用随机数给函数其一个函数名 var cbName="JSONCallback"+Math.random().toString().substr(2,10); //将url中的callback=?替换成callback=生成的函数名 option.url=option.url.replace(/callback=\?/,'callback='+cbName); //创建一个用cbName作为函数名的函数 window[cbName]=function(data){ option.success && option.success(data); window[cbName]=null; //window清空 ,避免污染全局变量 } //调用loadScript方法，生成script的标签，设置src； this.loadScript(option.url); } } $.ajax({ url:"json.php", type:"post", async:false, dataType:"json", success:function(data){ console.log(data) }, error:function(){ } }) $.jsonp({ url:"http://www.bjuga.com/demo.php?callback=?",//后台给得接口 success:function(data){ console.log(data) } }) </script> </body> </html>
