原生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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
xml和web特殊字符
Apr 28 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
探索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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python实现停车管理系统
2018/11/30 Python
python 用下标截取字符串的实例
2018/12/25 Python
通过实例解析python描述符原理作用
2020/01/22 Python
党校学习思想汇报
2014/01/06 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
2014年设计师工作总结
2014/11/25 职场文书
继承公证书格式
2015/01/26 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
用python画城市轮播地图
2021/05/28 Python
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL