Beispiel einer asynchronen Ajax-Kapselungsfunktion, die in nativem Javascript implementiert ist
- 高洛峰Original
- 2016-12-07 16:55:281858Durchsuche
Das Beispiel in diesem Artikel beschreibt die asynchrone Kapselungsfunktion von Ajax, die durch natives Javascript implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
<!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>
<p id="box">
<p id="left">点击我 看效果！</p>
<p id="right">fffeeee</p>
</p>
<p style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</p>
<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>
Das Obige ist der Inhalt des von nativem Javascript implementierten Beispiels für die asynchrone Ajax-Kapselungsfunktion. Weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung allgemeiner Anweisungen in Vue.js (v-if, v-for usw.)Nächster Artikel：Zusammenfassung allgemeiner Anweisungen in Vue.js (v-if, v-for usw.)