原生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 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
javascript常用的方法整理
Aug 20 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
js实现拖动缓动效果
Jan 13 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
用webAPI实现图片放大镜效果
Nov 23 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定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php compact 通过变量创建数组
2016/11/15 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
python tkinter实现屏保程序
2019/07/30 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python保留小数位的三种实现方法
2020/01/07 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python中安装django模块的方法
2020/03/12 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
UNIX文件类型
2013/08/29 面试题
财务会计实习报告体会
2013/12/20 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
顶岗实习计划书
2015/01/16 职场文书
2015年党员承诺书
2015/01/21 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python