原生javascript實現(xiàn)的ajax異步封裝功能示例
更新時間：2016年11月03日 14:25:27 作者：kooky798
這篇文章主要介紹了原生javascript實現(xiàn)的ajax異步封裝功能,結合完整實例形式分析了原生javascript實現(xiàn)的ajax異步交互函數(shù)與相應的使用方法,需要的朋友可以參考下
本文實例講述了原生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 異步請求后的內容處理函數(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.連接服務器
//open(方法,文件名,異步傳輸)
oAjax.open("get",url,true);//制止緩存
//3.發(fā)送請求
oAjax.send();
//4.接收返回值 和服務器通訊的時候此事件發(fā)生
oAjax.onreadystatechange=function()
{
//oAjax.readyState //瀏覽器和服務器，進行到哪一步了 異步握手過程
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>
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了opencv 識別微信登錄驗證滑動塊位置及各自的優(yōu)缺點,需要的朋友可以參考下2018-08-08
在前端實現(xiàn)加密算法時,需要特別注意密鑰的安全存儲和管理,不應將敏感的密鑰硬編碼在前端代碼中,這篇文章主要介紹了前端使用國密sm2和sm4進行加解密的相關資料,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了如何利用JavaScript實現(xiàn)一個簡單的投票demo，文中的示例代碼講解詳細，對我們學習有一定參考價值，需要的可以參考一下2022-06-06
WEB泡泡堂2.0（圖形界面+電腦對玩）(javascript)
WEB泡泡堂2.0（圖形界面+電腦對玩）(javascript)2007-01-01
以下map.js和map-util.js都是自定義的map，任選其一就可以。你可以用它來像java里new Map()和put()、remove()、get()等方法2017-11-11
初學者不建議看，這些都是用類實現(xiàn)的代碼，高手推薦學習2008-10-10
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)單選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
document.open() 與 document.write()的區(qū)別
document.open() 與 document.write()的區(qū)別...2007-08-08