首页 > 代码库 > ajax请求详解
ajax请求详解
//1. 创建一个ajax对象//var xhr=new XMLHttpRequest;//var xhr=null;//try{// if(window.XMLHttpRequest){// xhr=new XMLHttpRequest;// }else if(new ActiveXObject("Microsoft.XMLHTTP")){// xhr=new ActiveXObject("Microsoft.XMLHTTP");// }else if(new ActiveXObject("Msxm12.XMLHTTP")){// xhr=new ActiveXObject("Msxm12.XMLHTTP");// }else if(new ActiveXObject("Msxm13.XMLHTTP")){// xhr=new ActiveXObject("Msxm13.XMLHTTP");// }////}catch(e){// throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!");//}//第一次升级v//惰性思想:在自执行函数执行之后我们把getXHR赋值为一个具体的函数,这样以后执行这个方法时,就不用在判断是什么浏览器了//var getXHR=null;//-function(){// var list=[function(){// return new XMLHttpRequest;// },function(){// return new ActiveXObject("Microsoft.XMLHTTP");// },function(){// return new ActiveXObject("Msxm12.XMLHTTP");// },function(){// return new ActiveXObject("Msxm13.XMLHTTP");// }];// var temp=null;// for(var i=0;i<list.length;i++){// try{// temp=list[i]();// }catch(e){// continue;// }// getXHR=list[i];// break;// }// if(!temp){// throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!");// }//}();var getXHR=function(){ var list=[function(){ return new XMLHttpRequest; },function(){ return new ActiveXObject("Microsoft.XMLHTTP"); },function(){ return new ActiveXObject("Msxm12.XMLHTTP"); },function(){ return new ActiveXObject("Msxm13.XMLHTTP"); }]; var temp=null; for(var i=0;i<list.length;i++){ try{ temp=list[i](); }catch(e){ continue } getXHR=list[i]; break } if(!temp){ throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!"); } return temp};var xhr=getXHR();//2. 打开一个URL地址(服务器给我们的数据请求的一个接口API)//第一个参数请求方式get post put delete// get: 一般用来向服务器发送一个请求,从服务器获取内容// post:一般应用于客服端给服务器推送大量的内容// get 通过URL请求向服务器传参数,并在?的后面拼上需要传的参数// post 通过xhr.send(字符串)//xhr.send(‘{"name":"xiaoming","age":12}‘);// 长度:get通过URL传参数,但是浏览器对于URL的大小是有限制的(一般谷歌8KB 火狐7KB IE2KB),// 一旦超出浏览器会自动减去,这样传给后台的数据就不完整了,这种情况只能用post// 安全:get通过URL传参数可以在控制台看见,安全性不高 post 是把传递的内容放在HTTP主题中 在控制台看不到 安全性更高// 缓存问题:post请求浏览器不会默认记录缓存信息,也不需要清除缓存// get请求浏览器会默认记录缓存信息,一般我们会在URL拼接参数的时候给他一个时间戳或者随机数,这样每次请求的地址就会不一样(不一样就不缓存)var time=new Date();var times=time.getTime();console.log(times);var url="http://www.com.qq.com";var code=Math.random();var strCode=url.indexOf("?")>-1?url+"time="+times:url+"?time="+times;console.log(strCode);//3. 监听数据请求//xhr.readyState:ajax请求状态码//0 未发送请求 1 已打开连接 2 已获取响应头部信息 3 请求的数据内容正在加载 4 请求完成得到数据//xhr.status:网络状态码//200 一般以2开头 正常 404 找不到 文件,图片...不存在 502 服务器错误xhr.onreadystatechange=function(){ if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){ var str=xhr.responseText; //接收后台返回来的JSON字符串 }};xhr.send(null);function Ajax(url,callback){ var xhr=getXHR(); url+=url.indexOf("?")>-1?"time="+(new Date).getTime():"?time="+(new Date).getTime(); xhr.open("get",url,true);//同步false 异步true xhr.onreadystatechange=function(){ if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){ var str=xhr.responseText; str="JSON" in window?JSON.parse(str):eval("("+str+")"); callback(str); } } xhr.send(null);}
ajax请求详解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。