原生javascript实现的ajax异步封装功能示例

2019-11-20 08:35:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了原生javascript实现的ajax异步封装功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="Scripts/jquery.js"></script></head><style>* { margin: 0px; padding: 0px; }#box { float: left; width: 500px; }#left { float: left; background: #090; width: 100px; height: 100px; }#right { background: #C60; width: 100px; height: 100px; float: left; }#box2 { width: 180px; height: 100px; }html>body #box2 { width: auto; height: auto; min-width: 180px; min-height: 100px; }</style><body><div id="box"> <div id="left">点击我 看效果！</div> <div id="right">fffeeee</div></div><div style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</div><script>// 异步请求封装 IE6即以上浏览器// ajax(url,fnSucc,selectID,fnFaild)//url 请求地址//fnSucc 异步请求后的内容处理函数//fnFaild 请求失败处理函数function ajax(url,fnSucc,fnFaild){    //1.创建Ajax对象    //非IE6    var oAjax;    if(window.XMLHttpRequest)//不会报错，只会是undefined     {oAjax=new XMLHttpRequest();}    else    //iE6 IE5     {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}    //alert(oAjax);    //2.连接服务器    //open(方法,文件名,异步传输)    oAjax.open("get",url,true);//制止缓存    //3.发送请求    oAjax.send();    //4.接收返回值 和服务器通讯的时候此事件发生    oAjax.onreadystatechange=function()    {     //oAjax.readyState //浏览器和服务器，进行到哪一步了 异步握手过程     if(oAjax.readyState==4)//读取完成（可能文件不存在）     {      if(oAjax.status==200 || oAjax.status==304)//请求成功 304即使浏览器缓存了也返回数据      {       fnSucc(oAjax.responseText);       //alert("成功"+oAjax.responseText);      }      else      {       if(fnFaild)//fnFaild传进来时       {        fnFaild(oAjax.status);       }       //alert("失败:"+oAjax.status);//status为404      }     }    }}window.onload=function(){  var oBtn=document.getElementById("left");  oBtn.onclick=function()  {      ajax("http://28967904.jsp.jspee.cn/ext/singlePage/list/json-1-1-20",function(str){        var da= JSON.parse(str); //JSON数据解析        alert(da.totalRow)        },function(erorr){          console.log('请求出错：'+erorr);        })  }}</script></body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：巧用Vue.js+Vuex制作专门收藏微信公众号的app

下一篇：探索Vue.js component内容实现