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

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档

* { 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; }

点击我 看效果！

fffeeee

dddd

// 异步请求封装 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.οnlοad=function(){

var oBtn=document.getElementById("left");

oBtn.οnclick=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);

})

}

}

以上就是原生javascript实现的ajax异步封装功能示例的内容，更多相关内容请关注PHP中文网(www.php.cn)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！