原生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="https://www.jb51.net/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> <div>点击我 看效果!</div> <div>fffeeee</div> </div> <div>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数学运算用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzgzyp.html