Ajax如何实现封装

　　介绍

小编给大家分享一下Ajax如何实现封装,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

之前是点击按钮取出新闻,现在要实现每隔一段事件进行新闻的更新。这个时候,肯定是加一个定时器,然后每隔一段事件,再进行一次Ajax请求,既然要经常用到Ajax请求,封装函数就很必要了。

window.onload =,()函数,{ 　　var  oBtn =, . getelementbyid (& # 39; btn # 39;),, 　　时间=oBtn.onclick 函数(),{ 　　var  xhr =,空; 　　如果(window.XMLHttpRequest) { 　　时间=xhr  new  XMLHttpRequest (); 　　其他}{ 　　时间=xhr  new  ActiveXObject (& # 39; Microsoft.XMLHTTP& # 39;); 　　}, 　　xhr.open(& # 39;得到# 39;,& # 39;getNews.php& # 39;, true); 　　xhr.send (); 　　时间=xhr.onreadystatechange 函数(),{ 　　if  (==, xhr.readyState  4,), { 　　if  (, xhr.status ==, 200,),{,//红色标识为成功后执行的任务 　　var  data =, JSON.parse (, xhr.responseText );,//,将后台获取的内容转为json类型,每一个json里面有两个键:标题和日期 　　var  oUl =, . getelementbyid (& # 39; ul1& # 39;);,//,获取显示新闻列表的节点 　　var  html =, & # 39; & # 39;; 　　for  (var  i=0, i & lt; https://www.yisu.com/zixun/a  href=" ">“[我].title + +数据” (“[我].date + +数据”]李 '; 　　} 　　oUl。innerHTML=html;//把内容放在页面里 　　其他}{ 　　alert('出错了,错:“+ xhr.status); 　　} 　　} 　　} 　　} 　　} 　　

封装函数的要点就是把重复使用的部分提取取来,同时一些变化的东西作为参数,无法作为参数的进行判断处理。

1所以我们先看看变化的东西都有哪些:1请求方式是get/post 2请求的地址3请求的数据4请求成功后需要做的事情

所以这四个就做为函数的参数:ajax(方法、url、数据成功),

2因为不同的请求方式,我们传数据的方式不一样,所以对于这些,需要进行条件判断。

3还有一个问题就是关于xhr。responseText,变量xhr是在封装函数中声明的,所以这个东西属于ajax函数的,我们在成功函数中是用不到的,但成功是这个函数里面需要用这个数据,所以办法就是在封装函数中调用成功函数的时候,把xhr.responseText当作参数传出去.success (xhr.responseText)。

其实这是一种回调,回调就是一个函数作为另一个函数的参数,并在另一个函数里面被调用,这个栗子就成功是作为ajax函数的参数,并在ajax里面被调用。(其实个人感觉就是函数在用参数,函数的参数,就是拿来用的,只是现在参数是函数,所以就调用呗)。

所以封装后就是这样:

function  ajax (url的方法,,,,数据,,成功),{ 　　var  xhr =,空; 　　try  { 　　时间=xhr  new  XMLHttpRequest (); 　　},catch  (e), { 　　时间=xhr  new  ActiveXObject (& # 39; Microsoft.XMLHTTP& # 39;); 　　} 　　if  (method ==, & # 39;得到,,,,,数据),{ 　　+=url  & # 39; ? & # 39;, +,数据; 　　} 　　xhr.open(方法、url、真实); 　　if  (method ==, & # 39;得到# 39;),{ 　　xhr.send (); 　　},{else  　　xhr.setRequestHeader(& # 39;内容类型# 39;,,& # 39;应用程序/x-www-form-urlencoded& # 39;); 　　xhr.send(数据); 　　} 　　时间=xhr.onreadystatechange 函数(),{ 　　if  (==, xhr.readyState  4,), { 　　if  (, xhr.status ==, 200,), { 　　success ,,,成功(xhr.responseText);,//如果函数存在就执行后面的,,,的执行过程就是前面的是真,才执行后面的。 　　},{else  　　警报(& # 39;出错了,犯错:& # 39;,+,xhr.status); 　　} 　　} 　　} 　　}

调用就是这样

ajax(& # 39;得到# 39;& # 39;getNews.php& # 39;, & # 39; & # 39;,功能(数据),{ 　　var  data =, JSON.parse, data ,, 　　var  oUl =, . getelementbyid (& # 39; ul1& # 39;); 　　var  html =, & # 39; & # 39;; 　　for  (var  i=0, i & lt; https://www.yisu.com/zixun/a  href=" ">“[我].title + +数据” (“[我].date + +数据”]李 '; 　　} 　　oUl。innerHTML=html; 　　});

其实这个封装,还不是那么好,比如上面的数据没有数据,我们还是得占位,像jquery里面用json格式传参,就方便一些,目前还未总结好,后期补充。

Ajax如何实现封装