快捷導(dǎo)航

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

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

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

本文實(shí)例講述了原生javascript實(shí)現(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>無(wú)標(biāo)題文檔</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">點(diǎn)擊我 看效果！</div>
 <div id="right">fffeeee</div>
</div>
<div style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</div>
<script>
// 異步請(qǐng)求封裝 IE6即以上瀏覽器
// ajax(url,fnSucc,selectID,fnFaild)
//url 請(qǐng)求地址
//fnSucc 異步請(qǐng)求后的內(nèi)容處理函數(shù)
//fnFaild 請(qǐng)求失敗處理函數(shù)
function ajax(url,fnSucc,fnFaild)
{
    //1.創(chuàng)建Ajax對(duì)象
    //非IE6
    var oAjax;
    if(window.XMLHttpRequest)//不會(huì)報(bào)錯(cuò)，只會(huì)是undefined
     {oAjax=new XMLHttpRequest();}
    else
    //iE6 IE5
     {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
    //alert(oAjax);
    //2.連接服務(wù)器
    //open(方法,文件名,異步傳輸)
    oAjax.open("get",url,true);//制止緩存
    //3.發(fā)送請(qǐng)求
    oAjax.send();
    //4.接收返回值 和服務(wù)器通訊的時(shí)候此事件發(fā)生
    oAjax.onreadystatechange=function()
    {
     //oAjax.readyState //瀏覽器和服務(wù)器，進(jìn)行到哪一步了 異步握手過(guò)程
     if(oAjax.readyState==4)//讀取完成（可能文件不存在）
     {
      if(oAjax.status==200 || oAjax.status==304)//請(qǐng)求成功 304即使瀏覽器緩存了也返回?cái)?shù)據(jù)
      {
       fnSucc(oAjax.responseText);
       //alert("成功"+oAjax.responseText);
      }
      else
      {
       if(fnFaild)//fnFaild傳進(jìn)來(lái)時(shí)
       {
        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('請(qǐng)求出錯(cuò)：'+erorr);
        })
  }
}
</script>
</body>
</html>

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

您可能感興趣的文章: