简单封装ajax

来源：互联网发布：其他设备网络控制器编辑：程序博客网时间：2024/05/24 07:27

<ul id="ul"></ul><button  id="btn">更新</button>

 var oul=document.getElementById('ul');      var obtn=document.getElementById('btn');      obtn.onclick=function(){      var xml=new XMLHttpRequest();      xml.open("GET","file.txt",true);      xml.send();      xml.onreadystatechange=function(){      if(xml.readyState==4 && xml.status==200){      var data=JSON.parse(xml.responseText);

//ajax回调回来的responseText只是字符串类型,用JSON.parse把他解析成对象

//他是一个数组，需要把数组里每一项取出来放到标签li里面，所以需要一个for循环      var html="";//作为字符串拼接用的      for(var i=0;i<data.length;i++){      html+='<li>'+data[i]+'</li>'      }      oul.innerHTML+=html;//把所用的拼接完成之后再拼接到最大的ul 上面去      }      }      }

以上是一个简单ajax异步实例，下面我们一步步进行简单封装，让初学者理解封装步骤。

如果一个网站用到很多ajax异步，那按照上面的写法得写死，所以我们需要封装，精简代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="ajax.js"></script></head><body><ul id="ul"></ul><button  id="btn">更新</button><script>var oul=document.getElementById('ul');var obtn=document.getElementById('btn');obtn.onclick=function(){ajax("GET","file.txt",true,function(data){var html="";for(var i=0;i<data.length;i++){html+='<li>'+data[i]+'</li>'};oul.innerHTML+=html;});}</script></body></html>

另起一个js文件，把ajax.js 文件引入当前页面

以下是ajax.js代码

function ajax(method,url,async,success){var xml = "";xml=new XMLHttpRequest();xml.open(method,url,async);xml.send();xml.onreadystatechange=function(){if(xml.readyState==4 && xml.status==200){var data=JSON.parse(xml.responseText);//string转换成代码,success && success(data);}}}

如果有很多ajax异步，就可重复调用ajax.js文件，减少代码重复，这只是初步封装，还会有更精简的封装，今天先写到这里，明天讲解会更深入，

没有注释，多多见谅

阅读全文

0 0