原生javascript实现的ajax异步封装功能示例
更新时间：2016年11月03日 14:25:27 作者：kooky798
这篇文章主要介绍了原生javascript实现的ajax异步封装功能,结合完整实例形式分析了原生javascript实现的ajax异步交互函数与相应的使用方法,需要的朋友可以参考下
本文实例讲述了原生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程序设计有所帮助。
相关文章
这篇文章主要介绍了详解JS中Array对象扩展与String对象扩展的相关资料,需要的朋友可以参考下2016-01-01
在移动设备上将某张图片擦掉显示另一张图片，利用canvas来实现这篇文章就为大家详细介绍了js canvas实现擦除动画的相关资料，感兴趣的小伙伴们可以参考一下2016-07-07
JavaScript 中,防抖和节流是一种用于优化事件处理函数调用频率的技术,防抖和节流的目的都是为了避免频繁地触发事件处理函数,从而减少浏览器和服务器的负担,本文将给大家介绍一下JavaScript中防抖和节流的原理和区别,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了微信小程序调用摄像头实现拍照功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了uni-app从安装到卸载的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了简单介绍JavaScript数据类型之隐式类型转换的相关资料,需要的朋友可以参考下2015-12-12
JavaScript 前后端通吃，在全栈开发领域具有独特的优势。今天就来看看作为服务端语言的 JavaScript，完成一个简单的代理服务器功能是多么容易。2016-12-12
这篇文章主要介绍了JS计算中奖概率实现抽奖的方法，对算法感兴趣的同学，可以参考下2021-05-05
这篇文章介绍了JS获取农历日期具体实例，有需要的朋友可以参考一下2013-11-11
微信小程序开发越来越多样化,各种丰富的设计及体验,自定义tabBar也经常使用,下面这篇文章主要给大家介绍了关于微信小程序如何自定义tabBar的相关资料,需要的朋友可以参考下2021-08-08
最新评论