快捷導(dǎo)航

原生javascript實現(xiàn)的ajax異步封裝功能示例

更新時間：2016年11月03日 14:25:27 作者：kooky798

這篇文章主要介紹了原生javascript實現(xiàn)的ajax異步封裝功能,結(jié)合完整實例形式分析了原生javascript實現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下

本文實例講述了原生javascript實現(xiàn)的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 異步請求后的內(nèi)容處理函數(shù)
//fnFaild 請求失敗處理函數(shù)
function ajax(url,fnSucc,fnFaild)
{
    //1.創(chuàng)建Ajax對象
    //非IE6
    var oAjax;
    if(window.XMLHttpRequest)//不會報錯，只會是undefined
     {oAjax=new XMLHttpRequest();}
    else
    //iE6 IE5
     {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
    //alert(oAjax);
    //2.連接服務(wù)器
    //open(方法,文件名,異步傳輸)
    oAjax.open("get",url,true);//制止緩存
    //3.發(fā)送請求
    oAjax.send();
    //4.接收返回值 和服務(wù)器通訊的時候此事件發(fā)生
    oAjax.onreadystatechange=function()
    {
     //oAjax.readyState //瀏覽器和服務(wù)器，進行到哪一步了 異步握手過程
     if(oAjax.readyState==4)//讀取完成（可能文件不存在）
     {
      if(oAjax.status==200 || oAjax.status==304)//請求成功 304即使瀏覽器緩存了也返回數(shù)據(jù)
      {
       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數(shù)據(jù)解析
        alert(da.totalRow)
        },function(erorr){
          console.log('請求出錯：'+erorr);
        })
  }
}
</script>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: