原生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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
用javascript实现自定义标签
May 08 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 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中strtotime函数使用方法详解
2011/11/27 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
js实现弹框效果
2021/03/24 Javascript
文秘人员工作职责
2014/01/31 职场文书
移风易俗倡议书
2014/04/15 职场文书
养成教育经验材料
2014/05/26 职场文书
2014年话务员工作总结
2014/11/19 职场文书
质量负责人岗位职责
2015/02/15 职场文书
实习证明格式范文
2015/06/16 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Python进度条的使用
2021/05/17 Python