原生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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
vue 如何使用递归组件
Oct 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作为Shell脚本语言使用
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
python实现媒体播放器功能
2018/02/11 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
python简单实现9宫格图片实例
2020/09/03 Python
德国旅游网站:weg.de
2018/06/03 全球购物
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
中学生评语大全
2014/04/18 职场文书
在校学生证明格式
2015/06/24 职场文书
运动会广播稿50字
2015/08/19 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android