ajax 异步封装-函数 javascript原生

来源：互联网发布：双网卡路由器共享网络编辑：程序博客网时间：2024/06/03 01:42
以下为简单的案列代码：

<!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>
0 0