原生javascript实现的ajax异步封装功能示例


Posted in Javascript onNovember 03, 2016

本文实例讲述了原生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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jquery手风琴特效插件
Feb 04 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript表格的渲染组件
Jul 03 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Vue自定义指令详解
Jul 28 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 #Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 #Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
You might like
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
升职自荐书范文
2013/11/28 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
《老王》教学反思
2014/02/23 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技