Ajax基础教程之封装(三)
在上篇文章给大家介绍了Ajax基础详解教程(一) Ajax基础详解教程(二)
今天接着我们上篇博文的栗子,现在我来扩大一下需求,之前是点击按钮取出新闻,现在要实现每隔一段事件进行新闻的更新。这个时候,肯定是加一个定时器,然后每隔一段事件,再进行一次Ajax请求,既然要经常用到Ajax请求,封装函数就很必要了,先来看一下上个栗子的js代码,我们来进行封装。
window.onload=function(){ varoBtn=document.getElementById('btn'); oBtn.onclick=function(){ varxhr=null; if(window.XMLHttpRequest){ xhr=newXMLHttpRequest(); }else{ xhr=newActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','getNews.php',true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){//红色标识为成功后执行的任务 vardata=JSON.parse(xhr.responseText);//将后台获取的内容转为json类型每一个json里面有两个键:title和date varoUl=document.getElementById('ul1');//获取显示新闻列表的节点 varhtml=''; for(vari=0;i<data.length;i++){//循环所有的json数据,并把每一条添加到列表中 html+='<li><ahref="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML=html;//把内容放在页面里 }else{ alert('出错了,Err:'+xhr.status); } } } } } </script>
封装函数的要点就是把重复使用的部分提取取来,同时一些变化的东西作为参数,无法作为参数的进行判断处理。
1所以我们先看看变化的东西都有哪些:1请求方式是get/post2请求的地址3请求的数据4请求成功后需要做的事情
所以这四个就做为函数的参数:ajax(method,url,data,success);
2因为不同的请求方式,我们传数据的方式不一样,所以对于这些,需要进行条件判断。
3还有一个问题就是关于xhr.responseText,变量xhr是在封装函数中声明的,所以这个东西属于ajax函数的,我们在success函数中是用不到的,但是success这个函数里面需要用这个数据。所以办法就是在封装函数中调用success函数的时候,把xhr.responseText当作参数传出去。success(xhr.responseText)。
其实这是一种回调,回调就是一个函数作为另一个函数的参数,并在另一个函数里面被调用,这个栗子就是success作为ajax函数的参数,并在ajax里面被调用。(其实个人感觉就是函数在用参数,函数的参数,就是拿来用的,只是现在参数是函数,所以就调用呗)。
所以封装后就是这样:
functionajax(method,url,data,success){ varxhr=null; try{ xhr=newXMLHttpRequest(); }catch(e){ xhr=newActiveXObject('Microsoft.XMLHTTP'); } if(method=='get'&&data){ url+='?'+data; } xhr.open(method,url,true); if(method=='get'){ xhr.send(); }else{ xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send(data); } xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ success&&success(xhr.responseText);//如果函数存在就执行后面的&&的执行过程就是前面的是真,才执行后面的。 }else{ alert('出错了,Err:'+xhr.status); } } } }
调用就是这样
ajax('get','getNews.php','',function(data){ vardata=JSON.parse(data); varoUl=document.getElementById('ul1'); varhtml=''; for(vari=0;i<data.length;i++){ html+='<li><ahref="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML=html; });
其实这个封装,还不是那么好,比如上面的data没有数据,我们还是得占位,像jquery里面用json格式传参,就方便一些,目前还未总结好,后期补充。