本文執行個體講述了原生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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
