原生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客户端解决方案 缓存提供程序
Jul 14 Javascript
js调试系列 初识控制台
Jun 18 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
QT与javascript交互数据的实现
May 26 Javascript
Vue h函数的使用详解
Feb 18 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文档更新介绍
2011/07/22 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
学习node.js 断言的使用详解
2019/03/18 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
Python实现拼接多张图片的方法
2014/12/01 Python
浅谈python中set使用
2016/06/30 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python调用自定义函数的实例操作
2019/06/26 Python
python解析yaml文件过程详解
2019/08/30 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
军神教学反思
2014/02/04 职场文书
《匆匆》教学反思
2014/02/22 职场文书
高中综合实践活动总结
2014/07/07 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
现场施工员岗位职责
2015/04/11 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js