本文實例講述了原生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程序設計有所幫助。