原生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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
JavaScript实现省市区三级联动
Feb 13 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获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
详解动画插件wow.js的使用方法
2017/09/13 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
竞聘上岗演讲稿范文
2014/01/10 职场文书
董事长助理岗位职责
2014/02/18 职场文书
利群广告词
2014/03/20 职场文书
大学学风建设方案
2014/05/04 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
2014年幼师工作总结
2014/11/22 职场文书
就业意向书范本
2015/05/11 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android